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>
Solved! Go to Solution.
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
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
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
The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.
Learn how to respond rapidly to your customers and employees at scale, using intelligent conversational chatbots.
User | Count |
---|---|
1 | |
1 | |
1 | |
1 | |
1 |