Share
Report
24I 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>
All responses (
Answers (
