Getting Started

My Chatbot is a free WordPress plugin which adds a chatbot on your website. It integrates with Google Dialogflow to manage the conversations. This includes natural language processing, detecting intent and returning response messages.

Create a Dialogflow Agent

If you have not done so already, create a new Dialogflow agent from within the Dialogflow ES Console. You’ll need to add a new google project.

Intents and Responses

Now add your conversation intents and response messages. Enable small talk or import a prebuilt agent to get started quickly.

Response Messages

To add Card, Image and Quick Reply responses, you must configure the My Chatbot plugin to assume the appearance of a messaging platform such as Facebook.

Text Response

Hyperlinks in text responses must be added as HTML.

Card

Image

Quick Reply

My Chatbot Plugin

Install & Activate

From the WordPress Admin Add Plugin page, install and activate the Mu Chatbot plugin. Upload the plugin ZIP file if you have downloaded it locally.

General Settings

Chatbot conversation appearance settings and Google Dialogflow integration setup.

Option NameDescriptionImage
Key FileSetup Google Dialogflow integration with a service account key file to use. Follow instructions here.
Input TextPlaceholder text shown in the input field. Defaut “Ask something…”
Enable Welcome EventWhen enabled, a welcome fallback intent will be shown when the chatbot is opens for the first time. Default true.
LanguageChoose the default language for the chatbot. The language is sent to Google Dialogflow. Default English.
Messaging PlatformGoogle Dialogflow supports rich messages out-of-the-box for several messaging platform such as Facebook. You need to assume the appearance of a messaging platform such as Facebook in order to show Card, Image and Quick Reply messages in your chatbot. Default None.
Show TimeWhether or not you want the current system date/time to appear underneath conversation messages. Default true.
Keep Conversation HistoryWhether of not you want to persist conversation history across your website. Default true.
Show LoadingWhether or not you want loading dots to appear while waiting for a response message. Default true.
Response DelayAdd a delay before response messages are returned. In milliseconds. This mimics a small wait when someone is typing a response.
Request Background ColorColor picker for the request message conversation bubble background
Request Font ColorColor picker for the request message text.
Response Background ColorColor picker for the response message conversation bubble background
Response Font ColorColor picker for the response message text.
Non Current OpacityBackground color opacity for non current conversation bubbles. This effect makes older messages lighter in color. Default 0.8
Request Bubble AlignmentLeft or right. Default left.
Response Bubble AlignmentLeft or right. Default right.
Disable CSS StylesDisables all CSS generated by the plugin. Default false.

The following General settings are also included in the Pro plan:

Option NameDescriptionImage
Chatbot AvatarUpload a system chatbot avatar to display alongside response messages. Choose a circle or box border.

Overlay Settings

Settings to overlay a chatbot on the bottom right of each page which can toggle up and down.

Option NameDescriptionImage
Enable OverlayA global setting to enable the overlay
Disable MobilesWhether you want to disable the overlay from appearing on mobile devices.

Based on whether HTTP user agent matches regex /(android|mobile|silk|ipad|iphone|ipod)i
Allowed Page TypesThe following options page types can be allowed: Front, Page, Home, Attachment, Single, Category, Tag, Taxonomy, Archive, Author,  Search and Not Found.
For example, if you do not want the overlay to appear on the Home page, uncheck the Home page type.
Allowed Post TypesE.g. Post, Page and Media
Header Background ColorSet the header background color
Header Font ColorSet the header color
Default OpenDo you want to open the chatbot on page load for the first time?
Header TextCustomize the header text. Default “My Chatbot”
Powered By TextCustomize the powered by (or secondary header) text.

The following overlay settings are also included in the Pro plan:

Option NameDescriptionImage
ThemeChange the look & feel of the overlay. Choose from Toggle Up (included in free plugin) or Icon Popup (Pro plan only).

Menu LabelAdd a menu button at the bottom of the chatbot. This will send a custom event to Google Dialogflow. A common use case is to return a Quick Reply rich message with menu options.
Menu EventThe custom event to send to Dialogflow when the menu button is clicked
Active ScheduleSet a daily schedule when the overlay is enabled. For example, only enable the overlay outside business hours.

Google Integration

You will need to create a key file in order to integrate with Google Dialogflow services.

Login to Google Cloud Platform

Whether you already have a Google Cloud Platform (GCP) account or not, you can sign in or sign up from the Console home page.

Create Service Account Key File

Once you have logged into the console, you will need to create a new Service Account Key and save its file.

Navigate to the Credentials section of the APIs & Services page in the GCP Console for your selected project, click the Create credentials button and select Service account key.

From the Service account drop down select New service account.

Now enter a name for the account and then select the “DialogFlow API Client” role.

Now create a key for your newly created service account. Navigate to Keys and click Add Key then Create New Key. Leave the default key type as JSON. Click the create button and download the key file.

Add Key File To Website

Now that you have downloaded the key file, you need to add it to your site website for the My Chatbot plugin to use. You have 2 options:

  1. Define key file content in wp-config.php
    Copy the following snippet near the top of your wp-config.php file and replace <Add key file JSON content here> with the contents of your key file:
    define( 'MYC_KEY_FILE_CONTENT', '<Add key file JSON content here>' );
  1. Alternatively, you can enter the contents of your key file in the plugin settings directly.

Dialogflow API

In addition, make sure the Dialogflow API has been enabled.

Enabling Overlay for Specific Posts

You can override the gloal settings to enable / disable the overlay on specific posts. When editing a post, the Classic Editor has a post meta box and the Gutenberg editor has the following option.

Shortode

You can add the chatbot to you post content using the [my_chatbot] shortcode. Here’s an example. A vertical scrollbar is added once the chatbot becomes a certain height.

Widget

The chatbot can also be added to a widgetized area.

My Chatbot
Powered by My Amazing Plugin!