How to integrate Dialogflow into your WordPress website for free

Byaravindmc

I recently saw a question on StackOverflow.

Given that there are now two versions of Dialogflow, and multiple different ways to integrate the chatbot into your WordPress website in 2021, this topic is worth a revisit.

In this article, I talk about the FREE options for integrating a Dialogflow bot into your WordPress website.

Dialogflow ES

If you are building a Dialogflow ES bot, you have two different options for doing this – the Integrated Web Demo and Dialogflow Messenger.

Web Demo

The integrated web demo is a very limited integration and it allows you to embed the bot into your page directly. This means it will only show up on the specific page where you embed the bot.

Here is what the Integrated Web Demo looks like (it can do chitchat using the Prebuilt Smalltalk agent)

How to add the Web Demo into your WordPress site

Adding the Integrated Web Demo is quite straightforward.

1 Click into the Web Demo box from inside your Dialogflow integrations
3 Copy the embed code

You will see a page which looks like below.

Copy the embed code from that page.

4 Create a new HTML block inside the WordPress Gutenberg editor
5 Paste the embed code into the HTML block

You can change the width and height parameters according to your requirements.

The Web Demo integration has a LOT of limitations – it cannot support clickable hyperlinks, doesn’t allow for much customization etc. If you need those features, you should use the Dialogflow Messenger integration.

Dialogflow Messenger

It is quite likely you will need the Dialogflow Messenger integration, which allows rich responses and is also much more customizable.

You can check out the Dialogflow Messenger tutorial to see an example of this integration.

Dialogflow CX

Dialogflow CX is the advanced and more recent version of Dialogflow.

In addition to being more powerful, it is also a little harder to learn and to use.

Dialogflow Messenger

If you want to add the Dialogflow CX chatbot to your website for free, you can use the Dialogflow Messenger integration.

Please note that while the integration itself is free, you will still pay for the Dialogflow CX usage (there is a free trial though).

You can use the Dialogflow Messenger integration in Dialogflow CX

To see an example of Dialogflow CX + Dialogflow Messenger integration, check out the Dialogflow onboarding bot.

Note: the Dialogflow Messenger integration for Dialogflow CX does NOT support the prompt message, while the Dialogflow Messenger integration for Dialogflow ES does. 

Note: This is my old website and is in maintenance mode. I am publishing new articles only on my new website. 

If you are not sure where to start on my new website, I recommend the following article:

Is Dialogflow still relevant in the era of Large Language Models?

Leave a Reply