cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
julianhoewel_95
Helper II
Helper II

Bot icon is not visible on published website.

Hi,

we implemented a virtual agent on our website based on the concept that the bot automatically starts the conversation when it is opened (https://docs.microsoft.com/en-us/power-virtual-agents/configure-bot-greeting). This work's fine.

The problem we have is that the bot's icon is not visible on our website, but in contrast to that it's showing just fine on the demo-website or in the virtual agent preview. 

Website (live)Website (live)Preview in Virtual AgentsPreview in Virtual Agents

 

Any solutions or hints for this problem?

Thanks in advance!
Julian

4 REPLIES 4
Monkeyman
Resolver III
Resolver III

Hey, where have you hosted the image? Is the image accessible from anywhere?

The icon is hosted directly in virtual agents, nowhere else.
As you see in my screenshots the icon is showing in the preview, but not on our website where the bot is embedded. 
Unfortunately I don't have access to the HTML-Code, because our website is managed by an external company.
Is it necessary to also upload the bot's icon into the website's html files?


Yes, I would try this.

fernandosilva
Helper V
Helper V

Hi @julianhoewel_95 ,

 

If you use a custom canvas like the one in this page: https://docs.microsoft.com/en-us/power-virtual-agents/customize-default-canvas

you can customize the bot and user bot.

 

This is what I did:

 

 const styleSet = window.WebChat.createStyleSet({

            // Add styleOptions to customize Web Chat canvas
            bubbleBackground: 'rgba(250, 250, 250, 1)',
            bubbleFromUserBackground: 'rgba(250, 250, 250, 1)',
            rootHeight: '100%',
            rootWidth: '100%',
            backgroundColor: 'white',
            hideUploadButton: false,
            userAvatarBackgroundColor: 'white',
            botAvatarBackgroundColor: 'white',

        });

// Set the avatar options. 
        const avatarOptions = {
            backgroundColor: 'white',
            botAvatarBackgroundColor: 'rgba(255, 255, 255, 1)',
            // accent: 'rgba(255, 255, 255, 1)',
            botAvatarImage: '../../chatbot/images/chatboticon.png',
            botAvatarInitials: 'Bot',
            userAvatarImage: '../../chatbot/images/chatboticonuser.png',
            userAvatarInitials: 'User',

        };

fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat({
                        directLine: window.WebChat.createDirectLine({
                            token: conversationInfo.token,
                        }),
                        // webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
                        // store: store,
                        styleSet,
                        styleOptions: avatarOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

 

I hope it helps.

Helpful resources

Announcements
Power Virtual Agents News & Announcements

Power Virtual Agents News & Announcements

Keep up to date with current events and community announcements in the Power Virtual Agents community.

Community Calls Conversations

Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Power Virtual Agents Community Blog

Power Virtual Agents Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Users online (5,164)