cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
jdriscollpro
Advocate I
Advocate I

Customize look and feel of a government GCC bot

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>

 

  

1 ACCEPTED SOLUTION

Accepted Solutions
PowerPuffKK
Resolver IV
Resolver IV

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

View solution in original post

2 REPLIES 2
PowerPuffKK
Resolver IV
Resolver IV

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

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

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Top Solution Authors
Users online (4,637)