Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>My Bot</title>
- </head>
- <body>
- <div>
- <div id="heading">
- <!-- Change the h1 text to change the bot name -->
- <div class="headingFirst">
- <h1 class="chatboth1header">My Bot</h1>
- </div>
- <div class="headingSecond"></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(0, 0, 255, .1)",
- bubbleFromUserBackground: "rgba(0, 255, 0, .1)",
- rootHeight: "100%",
- rootWidth: "100%",
- backgroundColor: "white",
- hideUploadButton: false,
- userAvatarBackgroundColor: "white",
- botAvatarBackgroundColor: "white",
- });
- // Add your BOT ID below
- const BOT_ID = "my_bot_id";
- const 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
- },
- document.getElementById("webchat")
- );
- })().catch(async (err) => {
- console.error("An error occurred: " + err);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement