Bot icon is not visible on published website.

[julianhoewel_95]

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)Preview in Virtual Agents

Any solutions or hints for this problem?

Thanks in advance!
Julian

[Monkeyman]

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

[julianhoewel_95]

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?

[Monkeyman]

Yes, I would try this.

[fernandosilva]

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.