index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Chat Adapter Prototype</title>
    <script src="https://cdn.botframework.com/botframework-webchat/4.8.1/webchat.js"></script>
    <script src="/dist/chat-adapter.js"></script>
    <style type="text/css">
      body,
      html,
      #root {
        height: 100%;
      }

      body {
        background-color: #f7f7f7;
        margin: 0;
      }

      #root {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        margin: auto;
        min-width: 360px;
        max-width: 720px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script>
      (async function () {
        'use strict';

        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });

        if (!res.ok) {
          throw new Error('Token service is down');
        }

        const { token, userID: userId } = await res.json();

        const {
          default: createAdapter,
          applyIngressMiddleware,
          applyEgressMiddleware,
          CLOSED,
          compose,
          exportDLJSInterface,
          OPEN
        } = window.ChatAdapter;

        const APP_ID = 'ddd880d3-c7e6-44dd-812d-cedd77ff7200';
        const ORG_ID = '6acc1fd1-0120-43ba-bcc9-985ec34ec324';
        const ORG_URL = 'https://org33bcd853-crm.oc.crmlivetie.com';

        // const directLine = window.WebChat.createDirectLine({ token });
        const directLine = createAdapter(
          {}
        );

        window.WebChat.renderWebChat(
          {
            directLine
          },
          document.getElementById('root')
        );

        window.directLine = directLine;
      })();
    </script>
  </body>
</html>