cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
HemanthN
Helper III
Helper III

Bot Avatar and User Avatar images not working

Hi,

Bot and User Avatar images are not working. Does anybody know how to fix this?

Please refer to the below code and snapshot

 

a3.png

 

<!DOCTYPE html>
<html>
<head>
    <title>Contoso Sample Web Chat</title>
    <!-- This styling is for the canvas demonstration purposes. It is recommended
that style is moved to separate file for organization in larger projects -->
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }
        #heading {
            background-color: black;
            height: 50px;
        }
        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: black;
        }
        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
        }
      </style>
</head>
<body>
    <div>
        <div id="heading">

            <!-- Change the h1 text to change the bot name -->
            <h1>Contoso Bot Name</h1>

        </div>
        <div id="webchat" role="main"></div>
    </div>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <script>
        const styleOptions = {
          botAvatarImage:'https://image.flaticon.com/icons/svg/639/639365.svg',
          userAvatarImage: 'https://image.flaticon.com/icons/svg/189/189093.svg',
           // Add styleOptions to customize web chat canvas
           hideUploadButton: true
        };

        // Add your BOT ID below
        var BOT_ID = "ABC";

        var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

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

 

 Regards,

Hemanth

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @HemanthN ,

 

I will send the feedback to Microsoft, but you can fix using this code:

 

const styleOptions = {
botAvatarInitials: 'BT',
accent: '#00809d',
botAvatarBackgroundColor: "#FFFFFF",
botAvatarImage: 'https://image.flaticon.com/icons/svg/639/639365.svg',
hideUploadButton: true,
};


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

View solution in original post

4 REPLIES 4
renatoromao
Super User
Super User

Hi @HemanthN ,

 

Maybe you chatbot are getting error to use the external image.

Try to download the image and publish it into your website (the same that you publish the chatbot) and reference the botAvatarImage and userAvatarImage using your website.

 


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

Hi @renatoromao 

 

I have published the chatbot and the images on the website and it's not working but i see the botAvatarInitials and  userAvatarInitials are working.

The code that i have added as the example in this blog is the basic example that is provided on the PVA blog URL:https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-...

 

Please check. I don't see that botAvatarImage and userAvatarImage are not working. Please try the example code provided in your instance or http://jsfiddle.net/

 

Regards,

Hemanth

Hi @HemanthN ,

 

I will send the feedback to Microsoft, but you can fix using this code:

 

const styleOptions = {
botAvatarInitials: 'BT',
accent: '#00809d',
botAvatarBackgroundColor: "#FFFFFF",
botAvatarImage: 'https://image.flaticon.com/icons/svg/639/639365.svg',
hideUploadButton: true,
};


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

View solution in original post

Hi @renatoromao ,

 

That's awesome. It's working now. Thanks.

 

Regards,

Hemanth 

Helpful resources

Announcements
March Update

Welcome to the User Group Private Preview

Check out new user group experience and if you are a leader please create your group

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (3,546)