Power Platform Community Forum Thread Details

Hi,

Anyone facing issue with botAvatarImage and userAvatarImage?

I see the botAvatarImage and userAvatarImage are not working. I am referring to the doc provided by PVA. URL:https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-bot-icon-and-name/

I had also posted the issue earlier but no luck.

@BoLi Can you please help?

<!DOCTYPE html>
<html>
<head>
 <title>Contoso Sample Web Chat</title>
 <!-- This styling is for the Web Chat 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/3324/3324775.svg',
 userAvatarImage: 'https://image.flaticon.com/icons/svg/3324/3324784.svg'

 };

 // 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>

Categories:

General topics