Taxonomy Icon

Artificial Intelligence

WordPress is a popular blogging and content management system. Watson Assistant is IBM’s answer to the chatbot question. Let’s learn how to integrate the two! IBM has created a WordPress plugin that greatly simplifies the deployment process for you. Install the plugin, specify your credentials and desired workspace – that’s it! We actually use this plugin on Cognitive Class.ai.

Learning objectives

The goal of this tutorial is to have the Watson™ Assistant plugin installed on a local WordPress server where we can test the conversation dialog.

Prerequisites

  • Watson Assistant provisioned on IBM Cloud. For this example the authors used a lite (free) tier plan.
  • Sample conversation dialog. The Watson Assistant service comes with a great sample we can use, or find one on IBM’s Box Asset Exchange.
  • Docker Compose. ‘Nuff said. For this example, the authors used Docker Compose on MacOS.

Estimated time

  • Walking through this tutorial should take about 30 minutes.

Steps

This tutorial is split into three parts:

1. Using Docker Compose to run WordPress

For this section, inspiriation and credit goes to the author of How to Install WordPress on Docker (Windows, MacOS and Linux) on Hostringer Tutorials.

  1. Create an empty project directory and go into it. You can name the directory whatever you like. The point is that this directory should only contain resources to build our Docker image.

     cd ~
     mkdir assistant-wordpress
     cd assistant-wordpress
    
  2. Create a docker-compose.yml file that starts your WordPress blog and a separate MySQL instance with a volume mount for data persistence:

     version: '3'
    
     services:
        db:
          image: mysql:5.7
          volumes:
            - db_data:/var/lib/mysql
          restart: always
          environment:
            MYSQL_ROOT_PASSWORD: somewordpress
            MYSQL_DATABASE: wordpress
            MYSQL_USER: wordpress
            MYSQL_PASSWORD: wordpress
    
        wordpress:
          depends_on:
            - db
          image: wordpress:latest
          ports:
            - "8000:80"
          restart: always
          environment:
            WORDPRESS_DB_HOST: db:3306
            WORDPRESS_DB_USER: wordpress
            WORDPRESS_DB_PASSWORD: wordpress
     volumes:
         db_data:
    
  3. Run Docker Compose to pull the necessary images and start the WordPress and database containers:

     $ docker-compose up -d
     Creating network "assistant-wordpress_default" with the default driver
     Creating volume "assistant-wordpress_db_data" with default driver
     Pulling db (mysql:5.7)...
     5.7: Pulling from library/mysql
     802b00ed6f79: Pull complete
     30f19a05b898: Pull complete
     3e43303be5e9: Pull complete
     94b281824ae2: Pull complete
     51eb397095b1: Pull complete
     54567da6fdf0: Pull complete
     bc57ddb85cce: Pull complete
     c7c0a9c25d8a: Pull complete
     cce6c47ac3fc: Pull complete
     499b9c7376c8: Pull complete
     6c5e08e005ea: Pull complete
     Digest: sha256:1d8f471c7e2929ee1e2bfbc1d16fc8afccd2e070afed24805487e726ce601a6d
     Status: Downloaded newer image for mysql:5.7
     Creating assistant-wordpress_db_1 ... done
     Creating assistant-wordpress_wordpress_1 ... done
    

    If at any point you decide to stop this tutorial, run docker-compose down to gracefully stop the containers.

  4. Bring up WordPress in a browser:

    WordPress should now be running on port 8000, where you can complete the installation as a WordPress administrator; just navigate to http://localhost:8000 in a web browser.

    wordpress_install

    Give your site a name and provide a username for the administrator, then click Install WordPress. You’ll be brought to your WordPress console.

    wordpress_console

2. Installing and configuring the Watson Assistant plugin

The next major step is to install the Watson Assistant WordPress plugin. This plugin will enable us to deploy and configure our chatbot on a WordPress site.

  1. From the admin console, click Plugins on the sidebar.

  2. Click on the Add New button, search for “Watson Assistant,” and click Install Now.

    assistant_plugin_install

  3. Once the plugin is installed, click the Activate button.

  4. When brought back to the plugin overview section, a message will appear below the Watson Assistant plugin, suggesting that you configure the plugin. Click that message to begin configuring your chatbot.

    plugin_config_now

  5. The first tab provides a short overview you can read if you desire, but let’s skip to the second tab: Plugin Setup. It’s here that we are presented with two options to configure out chatbot: username and password, or API key. This entirely depends on the region into which your Watson Assistant service was deployed. The easiest way to find this information is from the Deploy section of your Watson Assistant workspace.

    In the example below, because we deployed in the US East region, we were given an API key.

    watson_creds

    Configure the plugin with the values from Watson Assistant and click Save Changes.

    config_api_key

  6. Optionally, check out the Customize Plugin section. This section allows us to customize how and where we want the chatbot to appear, how large, which fonts to use, and a whole bunch of other options.

    customize

  7. Optionally, check out the Advanced Features section. This has details on how you can limit API requests should you be concerned about billing on a production Watson Assistant service.

    advanced

3. Testing it all out

Now for the fun part – let’s see our chatbot in action. Go to http://localhost:8000/, see if your chatbot appears, and start chatting!

chatbot

Summary

Hope you enjoyed reading this tutorial as much as we enjoyed writing it. Happy hacking and good luck on creating your next chatbot with Watson Assistant.