Use Web Chat with the Direct Line App Service extension

  • Article

Commencing September 1, 2023, it is strongly advised to employ the Azure Service Tag method for network isolation. The utilization of DL-ASE should be limited to highly specific scenarios. Prior to implementing this solution in a production environment, we kindly recommend consulting your support team for guidance.

APPLIES TO: SDK v4

This article describes how to use Web Chat with the Direct Line App Service extension. Web Chat version 4.9.1 or later is required for native Direct Line App Service extension support.

Integrate Web Chat client

Note

Adaptive Cards sent through the Direct Line App Service extension don't 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 won't 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 later of Web Chat there is built-in support for establishing a two-way WebSocket. This allows Web Chat to directly connect to the Direct Line App Service extension hosted with your bot instead of connecting to https://directline.botframework.azure.cn/. The Direct Line URL for your bot will be https://<your_app_service>.chinacloudsites.cn/.bot/, the Direct Line endpoint on your app service extension. If you configure your own domain name, or your bot is hosted in a sovereign Azure cloud, substitute in the appropriate URL and append the /.bot/ path to access the Direct Line App Service extension's REST APIs.

  1. Exchange the secret for a token by following the instructions in the Authentication article. Instead of obtaining a token at https://directline.botframework.azure.cn/v3/directline/tokens/generate, you'll generate the token directly from your Direct Line App Service extension at https://<your_app_service>.chinacloudsites.cn/.bot/v3/directline/tokens/generate.

  2. For an example that shows how to fetch a token see Web Chat Samples.

    <!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.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() {
        <!-- NOTE: You should replace the below fetch with a call to your own token service as described in step 2 above, to avoid exposing your channel secret in client side code. -->

        const res = await fetch('https://<your_app_service>.chinacloudsites.cn/.bot/v3/directline/tokens/generate', 
          {
            "method": "POST",
            "headers": {
              "Authorization": "Bearer " + "<Your Bot's Direct Line channel secret>"
            },
            "body": "{'user': {'id': 'my_test_id', 'name': 'my_test_name'}}"
          }
        );
        const { token } = await res.json();

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

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

    Tip

    In the JavaScript bot implementation, make sure that WebSockets are enabled in the web.config file, as shown below.

    <configuration>
    <system.webServer>
        <webSocket enabled="true"/>
        ...
    </system.webServer>
</configuration>