Add v3 sample (#1287)

microsoft · Nov 1, 2018 · 883e4ef · 883e4ef · rodrigorodriguez · Nov 2, 2018
1 parent 4dc8eb4
commit 883e4ef
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/samples/webchat-v3/index.html b/samples/webchat-v3/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Web Chat: Using Web Chat v3</title>
+    <!--
+      If you want to continue to use the deprecated Web Chat v3, you can use our bundle "botchat.js" or "botchat-es5.js".
+
+      Please note that v3 does not have similar customizability and style options as in v4.
+    -->
+    <link rel="stylesheet" href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" />
+    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
+    <style>
+      html, body { height: 100% }
+      body { margin: 0 }
+
+      #webchat,
+      #webchat > * {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      (async function () {
+        // In this demo, we are using Direct Line token from MockBot.
+        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
+        // You should never put the Direct Line secret in the browser or client app.
+        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
+
+        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+        const { token } = await res.json();
+
+        BotChat.App({
+          directLine: { token },
+          user: { id: 'userid' },
+          bot: { id: 'botid' },
+          resize: 'detect'
+        }, document.getElementById('webchat'));
+      })().catch(err => console.error(err));
+    </script>
+  </body>
+</html>