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 Name | Description | Image |
|---|---|---|
| Key File | Setup Google Dialogflow integration with a service account key file to use. Follow instructions here. |  |
| Input Text | Placeholder text shown in the input field. Defaut “Ask something…” |  |
| Enable Welcome Event | When enabled, a welcome fallback intent will be shown when the chatbot is opens for the first time. Default true. |  |
| Language | Choose the default language for the chatbot. The language is sent to Google Dialogflow. Default English. | |
| Messaging Platform | Google 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 Time | Whether or not you want the current system date/time to appear underneath conversation messages. Default true. |  |
| Keep Conversation History | Whether of not you want to persist conversation history across your website. Default true. | |
| Show Loading | Whether or not you want loading dots to appear while waiting for a response message. Default true. |  |
| Response Delay | Add a delay before response messages are returned. In milliseconds. This mimics a small wait when someone is typing a response. | |
| Request Background Color | Color picker for the request message conversation bubble background | |
| Request Font Color | Color picker for the request message text. | |
| Response Background Color | Color picker for the response message conversation bubble background | |
| Response Font Color | Color picker for the response message text. | |
| Non Current Opacity | Background color opacity for non current conversation bubbles. This effect makes older messages lighter in color. Default 0.8 | |
| Request Bubble Alignment | Left or right. Default left. | |
| Response Bubble Alignment | Left or right. Default right. | |
| Disable CSS Styles | Disables all CSS generated by the plugin. Default false. |
The following General settings are also included in the Pro plan:
| Option Name | Description | Image |
|---|---|---|
| Chatbot Avatar | Upload 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 Name | Description | Image |
|---|---|---|
| Enable Overlay | A global setting to enable the overlay | |
| Disable Mobiles | Whether 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 Types | The 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 Types | E.g. Post, Page and Media | |
| Header Background Color | Set the header background color |  |
| Header Font Color | Set the header color |  |
| Default Open | Do you want to open the chatbot on page load for the first time? | |
| Header Text | Customize the header text. Default “My Chatbot” | |
| Powered By Text | Customize the powered by (or secondary header) text. |  |
The following overlay settings are also included in the Pro plan:
| Option Name | Description | Image |
|---|---|---|
| Theme | Change the look & feel of the overlay. Choose from Toggle Up (included in free plugin) or Icon Popup (Pro plan only). |   |
| Menu Label | Add 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 Event | The custom event to send to Dialogflow when the menu button is clicked | |
| Active Schedule | Set 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:
- 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>' );
- 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.
