How to Add Dialogflow Bot to WordPress Website

Published in

Chatbots Life

4 min readOct 17, 2023

Chatbots are cropping up and gaining popularity everywhere. It’s also commonplace for chatbots to appear on websites, instead of a user attempting to search your website to find what they need, they can just engage in directions conversation with your chatbot.

In this post, we will learn how to add a Dialogflow bot to WordPress websites with the help of Kommunicate. If you don’t have Kommunicate a/c, please signup here for free.

One needs to follow two steps to add a Dialogflow bot to WordPress websites. We will go through them in detail below. We will use Kommunicate’s chat widget and Dialogflow bot in this article. Both these tools are free to try.

If you don’t have a Dialogflow chatbot, please read this step-by-step guide and build your own chatbot.

Bonus: Want to build your chatbot without any coding?

Stage 1: Integrate Dialogflow bot with Kommunicate

Here is the step-by-step video for integrating Dialogflow bot with Kommunicate. I have also mentioned the steps below.

Login to your Kommunicate and click on the Bot section. If you do not have an account, you can create one here. Locate the Dialogflow section and click on it.

Get your Dialogflow API Credentials

After clicking, a setting popup box will open. You will be asked for Dialogflow credentials. By logging into your Dialogflow console, you can obtain these.

Click on the Settings icon (gear icon on the left panel) and choose V2 API as the preferred API version. Save your settings, and follow the setup instructions.

Open Dialogflow agent settings (gear icon on the left panel)
Click on the Google Cloudlink which is mentioned in the Google Project bar
In Google cloud page navigate to the Credentials section by clicking on API’s & services
Under the Credentials section find the service account and click on edit for Dialogflow integrations
At the bottom of the screen click on ADD key button and create key option, JSON key will be downloaded
Now upload the key file.

Integrate Dialogflow Bot into Kommunicate

Go back to Dialogflow settings screen of Kommunicate, enter your credentials, then click on next to save and progress. You’ll be able to give your bot a name in the user profile section that follows. Your customers will see that name whenever the bot interacts with them.

To integrate Dialogflow CX into Kommunicate follow the same instructions to download the JSON key and mention the Agent Id in the kommunicate dashboard

To get the Agent Id: Go to Dialogflow CX console >> Select the Project >> In the Agent you have created ‘Copy the agent name to the clipboard will be in the format mentioned below, where the Agent Id is 54b0c663-2c01-4a09-a482-277ff39c0b05

Save, and move to the next steps to complete the setup.

You can check your newly created bot here in the Dashboard →Bot Integration → Manage Bots section.

Stage 2: Integrate Kommunicate with WordPress

Log in to your WordPress dashboard and click on Plugins from the left navigation panel. Then click on Add New button.

Search for “Kommunicate Live Chat” plugin. On the search results page, you’ll see many options. Locate the “Kommunicate Live Chat” plug-in and click the Install Now button. Please make sure you Activate the plugin to make use of it.

Once you’ve installed and activated your plugin, you can then navigate to it in the left sidebar menu or through the Plugins page under Kommunicate settings.

Here you need to add your APP_ID to enable chat-based support in your product.

Add the Kommunicate App ID

You will get the same in the Kommunicate dashboard -> Settings -> Install. Insert your App ID > Copy it and paste it in the WordPress plugin > Save the changes.

And that’s it. You have completed the integration. Open the website, check out the chat widget, and play with your bot. You will find it in the bottom-right corner. Now your website visitors can chat effortlessly with you. You can manage the conversations and appearance from the Kommunicate dashboard.