Skip to main content

Notifications

Copilot Studio - General
Answered

New canvas bot not rendering on custom html canvas

Posted on by 785

Hi there,

 

I have published a new bot and want to run it on the custom html canvas like the previous bots that I created that are running on custom canvas without any issue.

 

So, new canvas, new bots and I'm using the same custom html canvas as you see below: 

The Bot ID has been hidden for security reasons.

 

<!DOCTYPE html>
<html>

<head>
 <title>My bot</title>
 <link rel="stylesheet" href="style.min.css">
</head>

<body>
 <div>
 <div id="heading">
 <!-- Change the h1 text to change the bot name -->
 <div class="headingFirst">
 <h1 class="chatboth1header">Let's Chat!</h1>
 </div>
 <div class="headingSecond"></div>
 </div>
 </div>

 <div id="webchat" role="main"></div>
 </div>

 <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

 <script>
 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',
 suggesteActionLayout: 'stacked',

 });
 // Set the avatar options. 
 const avatarOptions = {
 backgroundColor: 'white',
 botAvatarBackgroundColor: 'rgba(255, 255, 255, 1)',
 // accent: 'rgba(255, 255, 255, 1)',
 botAvatarImage: 'boticon.png',
 botAvatarInitials: 'LICI',
 userAvatarImage: 'usericon.png',
 userAvatarInitials: 'ME',

 };



 const store = window.WebChat.createStore({},
 ({
 dispatch
 }) => next => action => {
 if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
 dispatch({
 meta: {
 method: "keyboard",
 },
 payload: {
 activity: {
 channelData: {
 postBack: true,
 },
 name: 'startConversation',
 type: "event"
 },
 },
 type: "DIRECT_LINE/POST_ACTIVITY",
 });
 }
 return next(action);
 }
 );

 // Add your BOT ID below 
 var BOT_ID = "*********************************";
 var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

 const directLineTokenString = "directLineToken";

 const getDirectLineToken = async () => {
 if (!sessionStorage) return undefined;

 const now = Date.now();

 let tokenItem = undefined;

 try {
 tokenItem = JSON.parse(sessionStorage.getItem(directLineTokenString));
 } catch (err) {
 console.error("An error occurred: " + err);
 }

 // If there is no token in storage or the token has expired
 if (!tokenItem || (tokenItem && now > tokenItem.expiration)) {
 try {
 const res = await fetch(theURL);
 const result = await res.json();
 const tokenStorageItem = {
 token: result.token,
 expiration: now + result.expires_in * 1000,
 };
 sessionStorage.setItem(
 directLineTokenString,
 JSON.stringify(tokenStorageItem)
 );
 return result.token;
 } catch (err) {
 sessionStorage.removeItem(directLineTokenString);
 console.error("An error occurred: " + err);
 return undefined;
 }
 } else {
 return tokenItem.token;
 }
 };

 (async function () {
 const token = await getDirectLineToken();
 window.WebChat.renderWebChat({
 directLine: window.WebChat.createDirectLine({
 token
 }),
 styleSet,
 store: store,
 styleOptions: avatarOptions,
 },
 document.getElementById("webchat")
 );
 })().catch(async (err) => {
 console.error("An error occurred: " + err);
 });

 </script>
</body>

</html>

 

 

Since the bot id is taken from the url as it's quite impossible to find anywhere in the platform, I followed the same steps taken to find the bot id from my previous bots.

 

Bot ID placed and no way that the bot is rendering and there is no clue why that is not happening.

 

See screenshots below:

2023-09-13 16.38.14 dev.loveitcoverit.com b63c76ca0645.png

Line 101 on the HTML file:

2023-09-13 16.40.28 dev.loveitcoverit.com 3953edb4974b.png

Line 101 browser console error.

2023-09-13 16.40.41 dev.loveitcoverit.com 110589914e5b.png

 

 

Any help is appreciated.

 

Kind regards,

 

Fernando

 

Categories:
  • Verified answer
    fernandosilva Profile Picture
    fernandosilva 785 on at
    Re: New canvas bot not rendering on custom html canvas

    Hi All,

     

    Don't need to reply to this thread.

    I found out that there is another template and made it to work.

     

    <!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 a 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 = {
    
     // Add styleOptions to customize Web Chat canvas
     hideUploadButton: true
     };
    
     // Add your BOT token endpoint below
     var theURL = "<BOT TOKEN ENDPOINT>";
    
     var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
     var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
     var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; 
    
     var directline;
     fetch(regionalChannelSettingsURL)
     .then((response) => {
     return response.json();
     })
     .then((data) => {
     directline = data.channelUrlsById.directline;
     })
     .catch(err => console.error("An error occurred: " + err));
    
     fetch(theURL)
     .then(response => response.json())
     .then(conversationInfo => {
     window.WebChat.renderWebChat(
     {
     directLine: window.WebChat.createDirectLine({
     domain: `${directline}v3/directline`,
     token: conversationInfo.token,
     }),
     styleOptions
     },
     document.getElementById('webchat')
     );
     })
     .catch(err => console.error("An error occurred: " + err));
    
     </script>
     </body>
    </html>

     

    All good for now.

     

    Thank you

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
WarrenBelz Profile Picture

WarrenBelz 137,998

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 63,059

Leaderboard