In order to integrate your Intelligent Assistant into a website, there are two options. Javascript which allows for moderate customization and React that allows for full customization.

Authenticating your bot

Regardless of what option is chosen, you'll need to authenticate the webchat client so that it's the only one that can access your company FAQ knowledge base.

  1. To obtain the Direct Line token you need to call from your backend an API endpoint passing a secret (to be provided by MeBeBot). Keep this secret safe as it is the one that allows access to your FAQ knowledge base. Access to this secret and the request to generate the token must happen on your backend so that the secret is never exposed to the frontend. Only the token will be passed to the frontend but it has an expiration time so the risk is redu.
    POST https://directline.botframework.com/v3/directline/tokens/generate
Authorization: Bearer SECRET

Integrating with Javascript

In your website you'll need to:

  1. Obtain the webchat.js from the bot framework CDN
  2. A div to insert the webchat client into
  3. A script to render the webchat into the div.
  4. Replace YOUR_DIRECT_LINE_TOKEN with the token obtained in the "Authenticating your bot" section
<!DOCTYPE html>
<html>
   <head>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <style>
         html,
         body {
            height: 100%;
         }

         body {
            margin: 0;
         }

         #webchat {
            height: 100%;
            width: 100%;
         }
      </style>
   </head>
   <body>
      <div id="webchat" role="main"></div>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               username: 'Web Chat User',
               locale: 'en-US',
               botAvatarInitials: 'WC',
               userAvatarInitials: 'WW'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

Integrating with React

  1. To install the production build from NPM, run npm install botframework-webchat
  2. Then you can use the React component:
import React, { useMemo } from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';

export default () => {
   const directLine = useMemo(() => createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }), []);

   return <ReactWebChat directLine={directLine} userID="YOUR_USER_ID" />;
};