WebChat

The Druid ChatBot platform offers various integration channels, including chatbots for web. WebChat integration covers many business needs ranging from lead generation to customer support. Installing a chatbot on your company’s website save you time and money and optimize your service.

The Druid ChatBot Portal gives you the freedom to customize the webchat to comply with your needs and your business brand.

WebChat Configuration

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

Configuring your webchat is easy once you understand the web chat settings. The Druid web chat is comprised of two elements: web chat widget and web chat landing page (expanded widget).

The Druid ChatBot 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.

To configure a bot for web integration, from the left menu, select the desired bot. The Bot Designer displays by default on the Details tab.

Click the Channels tab and in the Channels page, click the WebChat section header. The WebChat Channel Info expands.

Setting	Description
Theme	The chatbot theme. You can choose from 16 predefined themes. Example: Theme blue 3 selected:
Logo Avatar image URL	The URL for the custom bot avatar.
Custom css	The .css file used which allows portal authors to customize the style of the web chat. 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).
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.

Click the Save button at the bottom of the page to save the webchat configuration. You can now embed the webchat into your website.

For the WebChat channel, [[ChatUser]].ChannelId = "directline".

Embed Druid web chat within your website

Copy the code from the WebChat Snippet field, add it to the HTML of your website page. Make sure that you properly include the snippet details in the appropriate tags of your HTML web page (<head> </head>and <body> </body> tags).

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:

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

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

A script which initializes the webchat component on document load.

Important! If you're using bot framework version 4, makes sure that you include the new snippet sources into the HTML of your website page hosting the chatbot.