Photo by Steve Gale on Unsplash

IBM Watson Assistant Integration With Web Chat

Extending Your Chatbot To Different Mediums Is Becoming Easier

Cobus Greyling

--

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.

Integration Options Available on IBM Watson Assistant

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…

Design Elements Are Automatically Available via the Web Interface
  • 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.

Setup of Preview Link

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.

Web Chat Integration Setup

And then click on Create.

Live Agent Transfers & Security

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.

Customize Your Chat UI

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.

Color Setup with Immediate Translation in the Test Window

Again, as you test your chatbot in the configuration environment, media elements are available. This allows for a true user experience prior to deployment.

Customizing & Testing the Chat Window

Once you are happy with the look and feel of your chat window, scroll down and copy the JavaScript snippet from the configuration window.

Copy the JavaScript Snippet

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.

Example of Live Implementation

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.

Web Launch Button

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.

--

--