Solved: Customize look and feel of a government GCC bot

jdriscollpro · ‎05-18-2022

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>

PowerPuffKK · ‎05-28-2022

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:

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

View solution in original post

PowerPuffKK · ‎05-28-2022

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:

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

jdriscollpro · ‎05-31-2022

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

Customize look and feel of a government GCC bot

Helpful resources

Microsoft 365 Conference – December 6-8, 2022