Use Web Chat with the direct line app service extension

Note

Web Chat version 4.9.1 or higher is required for native Direct Line App Service Extension support.

This article describes how to use Web Chat with the Direct Line App Service Extension.

Integrate Web Chat client

Note

Adaptive Cards sent through the Direct Line App Service Extension do not undergo the same processing as those sent through other versions of the Direct Line channel. Due to this the JSON representation of the Adaptive Card sent to Web Chat from the Direct Line App Service Extension will not have default values added by the channel if the fields are omitted by the bot when the card is created.

Generally speaking, the approach is the same as before. With the exception that in version 4.9.1 or higher of Web Chat there is built in support for establishing a two-way WebSocket, which instead of connecting to https://directline.botframework.com/ connects directly to your hosted bot. The direct line URL for your bot will be https://<your_app_service>.azurewebsites.net/.bot/, where the /.bot/ extension is the Direct Line endpoint on your App Service. If you configure your own domain name you still must append the /.bot/ path to access the direct line REST APIs.

  1. Exchange the secret for a token by following the instructions in the Authentication article. But, instead of obtaining a token at this location: https://directline.botframework.com/v3/directline/tokens/generate, you generate the token directly from your Direct Line App Service Extension at this location: https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

  2. The sample below includes a call to fetch a token from the host service similar to what is included in Web Chat Samples, you can update the webpage that uses Web Chat with these changes:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.js"
    ></script>
    <style>
      html,
      body {
        background-color: #f7f7f7;
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        height: 100%;
        margin: auto;
        max-width: 480px;
        min-width: 360px;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script>
      (async function() {
        const res = await fetch('<URL of your Token Service as described in Steps 1 and 2 above.>', { method: 'POST' });
        const { token } = await res.json();

        window.WebChat.renderWebChat(
          {
            directLine: await window.WebChat.createDirectLineAppServiceExtension({
              domain: 'https://<your_app_service>.azurewebsites.net/.bot/v3/directline',
              token
            })
          },
          document.getElementById('webchat')
        );

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>