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.
<!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
