You’re offline. This is a read only version of the page.
Hi there,
I have published a new bot and want to run it on the custom html canvas like the previous bots that I created that are running on custom canvas without any issue.
So, new canvas, new bots and I'm using the same custom html canvas as you see below:
The Bot ID has been hidden for security reasons.
Share
Report<!DOCTYPE html>
<html>
<head>
<title>My bot</title>
<link rel="stylesheet" href="style.min.css">
</head>
<body>
<div>
<div id="heading">
<!-- Change the h1 text to change the bot name -->
<div class="headingFirst">
<h1 class="chatboth1header">Let's Chat!</h1>
</div>
<div class="headingSecond"></div>
</div>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const styleSet = window.WebChat.createStyleSet({
// Add styleOptions to customize Web Chat canvas
bubbleBackground: 'rgba(250, 250, 250, 1)',
bubbleFromUserBackground: 'rgba(250, 250, 250, 1)',
rootHeight: '100%',
rootWidth: '100%',
backgroundColor: 'white',
hideUploadButton: false,
userAvatarBackgroundColor: 'white',
botAvatarBackgroundColor: 'white',
suggesteActionLayout: 'stacked',
});
// Set the avatar options.
const avatarOptions = {
backgroundColor: 'white',
botAvatarBackgroundColor: 'rgba(255, 255, 255, 1)',
// accent: 'rgba(255, 255, 255, 1)',
botAvatarImage: 'boticon.png',
botAvatarInitials: 'LICI',
userAvatarImage: 'usericon.png',
userAvatarInitials: 'ME',
};
const store = window.WebChat.createStore({},
({
dispatch
}) => next => action => {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
name: 'startConversation',
type: "event"
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
);
// Add your BOT ID below
var BOT_ID = "*********************************";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
const directLineTokenString = "directLineToken";
const getDirectLineToken = async () => {
if (!sessionStorage) return undefined;
const now = Date.now();
let tokenItem = undefined;
try {
tokenItem = JSON.parse(sessionStorage.getItem(directLineTokenString));
} catch (err) {
console.error("An error occurred: " + err);
}
// If there is no token in storage or the token has expired
if (!tokenItem || (tokenItem && now > tokenItem.expiration)) {
try {
const res = await fetch(theURL);
const result = await res.json();
const tokenStorageItem = {
token: result.token,
expiration: now + result.expires_in * 1000,
};
sessionStorage.setItem(
directLineTokenString,
JSON.stringify(tokenStorageItem)
);
return result.token;
} catch (err) {
sessionStorage.removeItem(directLineTokenString);
console.error("An error occurred: " + err);
return undefined;
}
} else {
return tokenItem.token;
}
};
(async function () {
const token = await getDirectLineToken();
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token
}),
styleSet,
store: store,
styleOptions: avatarOptions,
},
document.getElementById("webchat")
);
})().catch(async (err) => {
console.error("An error occurred: " + err);
});
</script>
</body>
</html>
Since the bot id is taken from the url as it's quite impossible to find anywhere in the platform, I followed the same steps taken to find the bot id from my previous bots.
Bot ID placed and no way that the bot is rendering and there is no clue why that is not happening.
See screenshots below:
Line 101 on the HTML file:
Line 101 browser console error.
Any help is appreciated.
Kind regards,
Fernando
Hi All,
Don't need to reply to this thread.
I found out that there is another template and made it to work.
All responses (
Answers (<!DOCTYPE html>
<html>
<head>
<title>Contoso Sample Web Chat</title>
<!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to a separate file for organization in larger projects -->
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
h1 {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 20px;
}
#heading {
background-color: black;
height: 50px;
}
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"]{
background-color: black;
}
#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>Contoso Bot Name</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
hideUploadButton: true
};
// Add your BOT token endpoint below
var theURL = "<BOT TOKEN ENDPOINT>";
var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`;
var directline;
fetch(regionalChannelSettingsURL)
.then((response) => {
return response.json();
})
.then((data) => {
directline = data.channelUrlsById.directline;
})
.catch(err => console.error("An error occurred: " + err));
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
domain: `${directline}v3/directline`,
token: conversationInfo.token,
}),
styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>
All good for now.
Thank you
#1
Michael E. Gernaey
468
Super User 2025 Season 2
#2
stampcoin
52
Super User 2025 Season 2
#3
trice602
46
Super User 2025 Season 2
