Quick BOT with Watson Assistant Webchat

Integrate an IBM Watson Assistant chatbot into your UI within no time

Watson Assistant(WA) in its initial versions (including Watson Conversation) required some complex UI to be built around it while integrating it with one’s website. Code patterns provided on IBM’s developer website gave a jumpstart to developers. However, it was not very trivial and required a web developer with advanced skills to tackle this. Picture this, you needed a UI that would

1. Pop up a chat window on clicking the chat icon.
2. Show a title bar.
3. Allow user’s to type into a textbox.
4. Pass the user’s message along with required context onto WA.
5. Show the response from WA on the chat window in a different colours and probably with a different icon next to it.
6. Scroll the chat window when required.

With the introduction of the Web Chat in Watson Assistant, all of the above are replaced with one simple step. Whats more, this can be done by someone with very little or no coding skills! All one has to do is to pick the embed code(a small code snippet) provided along with the Web Chat integration and place it in one’s html. That is all!!

Checkout IBM’s documentation for more details . However let me help you through the important steps here.

I am assuming that you have already created a WA skill, trained it and included it in an Assistant.

Step 1: Click on the Integrate web chat link

Web Chat integration — Step 1

Step 2: Enter an appropriate name and create it

Web Chat integration — Step 2

Step 3: Do the necessary customizations or leave the defaults if you want to do a quick trial.

Web Chat integration — Step 3

Step 4: Click on Embed tab and copy the embed code

Web Chat integration — Step 4

Step 5: Save and Exit. Place the copied code in your html.

Web Chat integration — Step 5

Bring up the html file on a browser and you are done

Chatbot integrated into page

So in essense it is just one step — copy the embed code, paste it onto your html.

The UI is based on IBM’s Carbon Design System. It is very elegant and provides several customizations. The widget is hosted and maintained on IBM Cloud, leaving you to focus on your BOT details rather than all the UI related mess.

Additional parameters are provided for customizations. We’ll take a look at it in my next post.