Watson Assistant — Webchat Part 2

Jazz up your BOT

In my previous blog, we saw how to whip up a quick web based BOT without much of a sweat. In this one we’ll see how to spruce it up a bit.

Start by clicking on the Web Chat integration of your Assistant.

Start by clicking on the Web Chat integration link

Use the options under the style tab to set the Assistant’s name and set the colous for the chat header, user bubbles and interactive elements. Interactive elements include

  • Chat launcher button that is embedded in your web page
  • Send button associated with the input text field
  • Input text field border when in focus
  • Marker that shows the start of the assistant’s response
  • Border of a button after it is clicked
  • Border of the drop-down list field as the user chooses an option
  • Typing indicator that is shown to repesent a pause response

You can also set an avatar or logo.

Style changes for the assistant

Those are some very basic changes. Now for some more granular control on the styling. The styles in the web chat are based on IBM Carbon Design

First the select the Carbon theme that you would like to use. The default is g10. The theme options are available here. The theme is set under the watsonAssistantChatOptions as shown below

Setting the theme

Now the colour tokens under each theme can be set. Here is a complete list of all the tokens under each theme. Add the updateCSSVariables call with the appropriate token settings under the onLoad function.

Token settings

The Webchat now looks like this

Webchat with changed tokens

I have mentioned the styling options here. Check this link for a complete list of other configuration options.

Lets follow up in my next blog to play around with the content a little more.

If you need a little help around integrating a BOT into your web page. Check my previous blog.

Programmer by blood, heart and soul.