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. From the left menu, select the desired AI Agent. The AI Agent Designer displays by default on the Details tab.
  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
    Theme

    The AI Agent theme. Select from predefined visual themes.

    Example: Theme blue 3 selected:
    Logo 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).

    HINT: The .css file has a maximum file size of 1MB; otherwise, you will get an error message.
    NOTE: Uploading a custom CSS on a bot framework version 4 will have no effect. 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.

For the WebChat channel, [[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).
HINT: 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