Skip to main content

Notifications

Publish & Channel Management
Answered

Customize look and feel of a government GCC bot

Posted on by 24

I was using this line of code for my non-GCC test bot; however, it is not working for my gcc bot. Is there a different URL for GCC or is this not currently supported? Not including my BOT ID for security reasons. 

 

 

<!DOCTYPE html>
<html>
<head>
 <title>TEST CHAT BOT</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: 24px;
 font-family: Source Sans Pro Bold 700;
 line-height: 20px;
 color: whitesmoke;
 display: table-cell;
 padding: 13px 0px 0px 20px;
 }

 #heading {
 background-color: #FFFFFF;
 height: 50px;
 }

 .main {
 margin: 18px;
 border-radius: 4px;
 }

 div[role="form"]{
 background-color: #FFFFFF;
 }

 #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></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 - hide upload button
 hideUploadButton: true,
 
 // Primary font
 primaryFont: "Source Sans Pro",
 userAvatarInitials: "ME",
 userAvatarBackgroundColor: "Grey",
 
		 // Change bubble from BOT
 bubbleTextColor: "#FFFFFF",
 bubbleBackground: "#007D85",
		 bubbleBorderRadius: 10,
 bubbleNubSize: 10,
 bubbleBorderColor: "#FFFFFF",
 bubbleNubOffset: "top",
		 
 // Change bubble from USER
 bubbleFromUserBackground: "#EDEDED",
 bubbleFromUserTextColor: "#000000",
 bubbleFromUserBorderRadius: 10,
 bubbleFromUserBorderColor: "#EDEDED",
 bubbleFromUserNubSize: 10,
 bubbleFromUserNubOffset: "top",
 
 
 // Add avatar images and user avatar images and BG color for BOT
 botAvatarInitials: 'BT',
 accent: '#00809d',
 botAvatarBackgroundColor: "#FFFFFF",
 botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg',
 userAvatarImage: 'https://avatars.githubusercontent.com/u/661465',
 
 //Change the suggested action layout buttons
 suggestedActionLayout: 'carousel',
 suggestedActionBorderRadius: 10,	 
 suggestedActionBackgroundColorOnHover: '#007D85',
 suggestedActionTextColorOnHover: '#FFFFFF',
 };

 // Add your BOT ID below 
 var BOT_ID = "<<INSERT BOT ID>>"; 
 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>

 

  

  • jdriscollpro Profile Picture
    jdriscollpro 24 on at
    Re: Customize look and feel of a government GCC bot

    Hi @PowerPuffKK 

     

    This worked for my non-GCC test bot, but for my GCC bot ID, this would not connect. IS there a different URL for GCC bots?

    Jarrett

  • Verified answer
    PowerPuffKK Profile Picture
    PowerPuffKK 325 on at
    Re: Customize look and feel of a government GCC bot

    Hi @jdriscollpro,

     

    Thanks for the question!

     

    Just to confirm, PVA is indeed supported for GCC.

     

    I have found the issue with your code - the following properties do not exist in Bot Framework, they are used in Adaptive Cards Framework and were breaking your code.

     

    bubbleNubOffset

     

     

     

    bubbleNubSize: 10,

     

     

     

    I have updated your code and have tried it in browser with my sample PVA and can confirm that it's successfully loading, please see screenshot below.

     

    Here's the code snippet(I have removed my bot ID): 

     

     

    <!DOCTYPE html>
    <html>
    <head>
     <title>TEST CHAT BOT</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: 24px;
     font-family: Source Sans Pro Bold 700;
     line-height: 20px;
     color: whitesmoke;
     display: table-cell;
     padding: 13px 0px 0px 20px;
     }
    
     #heading {
     background-color: #FFFFFF;
     height: 50px;
     }
    
     .main {
     margin: 18px;
     border-radius: 4px;
     }
    
     div[role="form"]{
     background-color: #FFFFFF;
     }
    
     #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></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 - hide upload button
     hideUploadButton: true,
     
     // Primary font
     primaryFont: "Source Sans Pro",
     userAvatarInitials: "ME",
     userAvatarBackgroundColor: "Grey",
     
    		 // Change bubble from BOT
     bubbleTextColor: "#FFFFFF",
     bubbleBackground: "#007D85",
    		 bubbleBorderRadius: 10,
     
     bubbleBorderColor: "#FFFFFF",
     
    		 
     // Change bubble from USER
     bubbleFromUserBackground: "#EDEDED",
     bubbleFromUserTextColor: "#000000",
     bubbleFromUserBorderRadius: 10,
     bubbleFromUserBorderColor: "#EDEDED",
     
     
     
     
     // Add avatar images and user avatar images and BG color for BOT
     botAvatarInitials: 'BT',
     accent: '#00809d',
     botAvatarBackgroundColor: "#FFFFFF",
     botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg',
     userAvatarImage: 'https://avatars.githubusercontent.com/u/661465',
     
     //Change the suggested action layout buttons
     suggestedActionLayout: 'carousel',
     suggestedActionBorderRadius: 10,	 
     suggestedActionBackgroundColorOnHover: '#007D85',
     suggestedActionTextColorOnHover: '#FFFFFF',
     };
    
     // Add your BOT ID below 
     var BOT_ID = ""; 
     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>

     

     

     

    And here's a screenshot of your working chatbot with the formatting you applied in your code:

     

    PowerPuffKK_0-1653763978129.png

     

    Hope this helps! If it does, I'd be really grateful if you could mark it as a solution for future forum visitors who might be experiencing the same issue.

     

    Have a good day 😊

    Kristine

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

Featured topics