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 Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Canadian Cloud 2022 768x460.png

Register for a free PVA chatbot creation workshop.

Learn how to respond rapidly to your customers and employees at scale, using intelligent conversational chatbots.

Top Solution Authors
Users online (1,593)