IBM Watson Assistant Integration With Web Chat
Extending Your Chatbot To Different Mediums Is Becoming Easier
Introduction
…learn how you can add conversation your website.
Chatbot development environments are becoming more of a configuration environment than a development environment. It use to be tricky integrating your chatbot to different mediums, through which your user will access the conversational interface.
This is also in many instances an ongoing process, as the chatbot needs to be accessible in more conversational environments. Having the points of integration hosted within your chatbot development environment is helpful.
One of the leaders in this field is Microsoft, they have always had a good collection of integration tools and widgets.
Now we are seeing a steady expanding of these integration tools with IBM Watson Assistant.
Introducing Watson Assistant Web Chat
IBM Watson Assistant has a very convenient feature for creating a JavaScript web widget. You have the option to customize the widget to a large degree.
Via the Watson Assistant console, the JavaScript snippet can be copied and pasted into the basic html of your website.
Two key advantages of this are the following…
- Conversational components like buttons, links, images etc are carried through to your web chat interface. Allowing for a richer user experience.
- Secondly any updates and changes to your conversational model within Watson Assistant is automatically propagated to the web interface.
It has to be noted that currently there is a WordPress plugin for Watson Assistant. This plugin is very convenient for web chat integration. However, the ideal would be to use this tool from IBM.
In the following section I will take you through an overview of setting up the web chat functionality.
It has to be said that Watson Assistant has a preview link, which you can use to generate a URL to access the chatbot. This is however only for testing purposes and allowing a preview of the functionality. It cannot be used in any life implementation.
Step-By-Step Process
When you create a Web Chat integration, code is generated that calls a script that is written in JavaScript. This script instantiates a unique instance of your assistant. You can then copy and paste the HTML script element into any page or pages on your website where you want users to be able to ask your assistant for help.
Start by navigating to the integration section in Watson Assistant and selecting Web chat integration. You can give your integration configuration a unique name.
And then click on Create.
There is an option to add live agent transfers to Zendesk and Salesforce.
You can also add encryption for authentication and authorization.
Once you have created the web chat integration, there are options to set the avatar of your chatbot.
The assistant’s name can be added, in this case I left it as Watson Assistant.
There are options to tweak the primary, secondary and accent color of the chat window.
On the right of the customization window is a test chat interface to get an idea of the look and feel of the chat interface prior to launching it.
Again, as you test your chatbot in the configuration environment, media elements are available. This allows for a true user experience prior to deployment.
Once you are happy with the look and feel of your chat window, scroll down and copy the JavaScript snippet from the configuration window.
Head over to your website, access the html code, and find a spot where you can paste the code snippet it.
Paste the code as close to the closing </body> tag as possible to ensure that your page renders faster.
You will have a very convenient floating web launch button, which expands the chat window. The conversation history is visible, until you refresh the page.
The Web Chat launcher icon is displayed at the end of the page. The icon is blue unless you customize the accent color.
You can paste the same script tag in multiple pages on a website. Anywhere you would want the user to be able to reach your assistant. Obviously only add it once to a page.
Conclusion
And there you have it, below is a link to the IBM documentation with more technical information.
