Skip to main content

Notifications

Announcements

No record found.

Power Platform Community / Forums / General / Bot icon is not visibl...
General
Unanswered

Bot icon is not visible on published website.

Posted on by 2

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  

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

 

Any solutions or hints for this problem?

Thanks in advance!
Julian

Categories:
  • fernandosilva Profile Picture
    fernandosilva 681 on at
    Re: Bot icon is not visible on published website.

    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.

  • Monkeyman Profile Picture
    Monkeyman 212 on at
    Re: Bot icon is not visible on published website.

    Yes, I would try this.

  • julianhoewel_95 Profile Picture
    julianhoewel_95 2 on at
    Re: Bot icon is not visible on published website.

    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 Profile Picture
    Monkeyman 212 on at
    Re: Bot icon is not visible on published website.

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

Helpful resources

Quick Links

Exciting News for Copilot Studio Communi…

Get ready to experience a whole new level of engagement with the Copilot Studio…

Celebrating the May Super User of the…

LaurensM is an exceptional contributor to the Power Platform Community…

Check out the Copilot Studio Cookbook…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

Leaderboard

#1
renatoromao Profile Picture

renatoromao 6,459

#2
Pstork1 Profile Picture

Pstork1 1,954

#3
Expiscornovus Profile Picture

Expiscornovus 1,648