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.
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.
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
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.
The Webchat now looks like this
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.