IBM Watson Assistant integration to WordPress

Add a chatbot to your WordPress site!

WordPress has become a global phenomenon since its launch in 2003. It is said that 27% of the Internet is powered by WordPress, meaning 75,000,000 websites are using WordPress.

Of all self-hosted websites, 20% uses WordPress.

The growth of WordPress does not seem to be relenting due to a robust community, among a slew of other factors. WordPress is available in over 50 languages, while content is published in over 120 different languages, constituting 14% of the top 100 websites. Getting 175 million page view per month.

Image for post
Image for post
Example of a default site with an automated chat window

The WordPress plugin for IBM Watson Assistant allows you to in literally a few moments access your digital assistant. You can train Watson Assistant to answer questions, provide useful information and help with general navigation of your website. And if they want to talk to a human, the plugin can connect them to a real operator via telephone.

Features I have implemented:

§ Rich responses like images, pauses, and clickable responses (buttons) to your chatbot

§ Easy VOIP calling powered by Twilio for users to contact a real person if they wish, or a voice bot.

§ Choose the pages and posts you want the visitors to see the chat bot on.

§ Customize the appearance of the chat box to your preference; views for mobile or when you resize the browser.

Demo Video of rich conversational content via IBM Watson Assistant

To the left are examples of rich responses you can defined within IBM Watson Assistant. These responses then in turn translates quite brilliantly to the WordPress plugin. Rich responses include chat bubbles for a pause, images, and clickable buttons / options.

Even though we want to keep our interface as conversational and unstructured as possible, there are specific instances where the chatbot would need to present an image, buttons with fixed options and when API calls might take time, a pause/typing bubbles would be required.

Image for post
Image for post
Image 1: Adding the Watson Assistant to WordPress

In the WordPress admin console, in the left-hand dashboard pane, click on Plugins and then Add New (See mage 1). This will take you to the WordPress plugin page where you can search for various plugins to add you your site with no coding required.

Image for post
Image for post
Image 2: Installing IBM Watson Assistant

Once you have clicked new, then search for Watson Assistant. There might pop up a few other chatbot plugins, but make sure you see the IBM Watson Assistant wording and logo. You will see the IBM Watson Assistant log (Image 2), click on Install Now. It only takes a few seconds to install.

The Assistant Details and Service Credentials need to be defined. You will need to Specify the Assistant URL, username and password for your Watson Assistant within the plugin. See Image 3 for the example.

Image for post
Image for post
Image 3: Assistant Details and Service Credentials
Image for post
Image for post
Image 4: Customize your WordPress Plugin; general behavior

Within your WordPress Watson plugin, you can configure the delay before the chat bubble pops up. You might want the user to browser the page for a set period of time prior to you offering a chat instance. There are costs uncured on IBM’s side in terms of chatbot usage; so you might want to allow the user to first find the relevant information on the site, prior to starting a conversation.

Secondly, you can configure if the chatbot appears on all pages, or only on certain pages. The chat button can be positioned, left of the text, right of the text or hide the icon.

Icon size and text size is also configurable. The icon and text size is configurable with a preview.

The chat box can be set to a full screen mode on small devices. Based on on the design and look of your site, you might require to set the position of the chat window, in order not to hide any relevant content. You might want have send button, or only have the user press enter to send text.

Image for post
Image for post
Image 5: Chat window Preview in configuration

The size of the window can also configured based on the content you want to display in the window.

The color of the header and chat bubbles can be matched to your design’s color scheme. This and a host of other options are available.

when checking the display on your website you may need to clear your cache after changing settings or deactivating the plugin. Otherwise, your action may not take effect. Or try to close and open your web browser.

This is where you get to finally connect the Watson Assistant chatbot you created to WordPress. To do this, you need to get the URL and credentials from Watson Assistant. To find these values, navigate to the Assistant you’ve built and activate View API Details link.

  • Go to IBM Cloud Dashboard.
  • Click on your Watson Assistant service name in Services list.
  • Click “Launch tool”. This button sometimes take a while to display.
  • On the tool’s page you will see Home, Skills and Assistants. Go to “Assistants” tab.
  • On the Assistants tab, call the menu of your Assistant by clicking on the “three dots” button on the right and select “View API details” in the menu. Here you should have already linked your Assistant Skill to the Assistant.
  • Copy “Assistant URL”, “Username” and “Password” values.

Enter these values in their corresponding fields below. Once you click “Save Changes”, the plugin will verify if the credentials are valid and notify you of whether or not the configuration was successful.

Image for post
Image for post
IBM Watson Assistant: View API Details
Image for post
Image for post
IBM Watson Assistant Credentials Page

Then lastly, there is an active support form for IBM Watson Assistant on WordPress. Search the topics, you are sure to find solutions to the problem you are experiencing.

Image for post
Image for post
Photo by Juan Gomez on Unsplash

NLP/NLU, Chatbots, Voice, Conversational UI/UX, CX Designer, Developer, Ubiquitous User Interfaces. www.cobusgreyling.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store