WebChat

The WebChat channel is enabled by default in the Druid Portal. This allows you to quickly deploy your AI Agent to any web page using a pre-configured snippet.

Configure the WebChat Channel

The Druid web chat is comprised of two elements:

  • web chat widget
  • web chat landing page (expanded widget).

The Druid AI Platform provides you with a default web chat configuration you can embed into your website. You can further style the web chat to comply with your brand style guide.

The default webchat configuration is illustrated in the figures below. By default, the web chat displays collapsed on the page hosting the webchat.

Figure: Collapsed web chat

Clicking the collapsed web chat will expand it:

Figure: Expanded web chat

To configure an AI Agent for web integration, follow these steps:

  1. Go to the AI Agent settings.
  2. Click the Channels tab.
  3. In the Channels page, search for WebChat.

  4. Click the WebChat card to open the channel configuration modal.

  5. Within the modal, you can customize the WebChat styling and behavior parameters:
    6. Setting Description
    Avatar image URL The URL for the custom AI Agent profile picture.
    Custom css

    Upload a stylesheet to match your brand's look and feel (for Bot Framework v3).

    Info: The .css file has a maximum file size of 1MB; otherwise, you will get an error message.
    NOTE: If your AI Agent uses bot framework version 4, you can do custom CSS settings by clicking the Customize webchat button in the Webchat Snippet field and customize the webchat UI based on your needs (in the Custom CSS section of the Customize Your Webchat UI editor). For more information, see WebChat Common Styling and Behavior.
    WebChat Snippet The code snippet that you will be embed into your web page. For information on how to configure widget parameters, refer to see WebChat Common Styling and Behavior specific to the bot framework version you're using.
  6. Click Save at the bottom of the modal to apply your channel settings.

The following parameter is available within the conversation context: [[ChatUser]].ChannelId = "directline".

Deploy the WebChat Snippet

Once you have finalized the WebChat configuration, copy the code from the WebChat snippet field and embed it into the HTML of your website hosting the AI Agent. Ensure the script is placed within the appropriate tags of your HTML web page (<head> </head>and <body> </body> tags) to initialize the chat component.

NOTE: Do not change anything in the snippet, otherwise the webchat might not be properly embedded into the hosting page(s).
Info: If you don’t see the changes on your website, you clear the cache or exit the incognito mode (if browsing in incognito mode).

The default snippet contains:

  1. A css file which contains the layout of the webchat widget (under the <head> tag)

  2. A script file which renders the webchat widget (within the <body></body> tags)

  3. A script which initializes the webchat component on document load.

IMPORTANT! If the default snippet does not display the 3 components make sure that you disable Single-line initialization.

Related Topics Link IconRelated Topics