Home / Website Bots / How to integrate Dialogflow into your WordPress website for free
Website Bots

How to integrate Dialogflow into your WordPress website for free

Check out my courses Learn Dialogflow ES and Learn Dialogflow CX if you would like to learn Dialogflow in depth. 

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.

The BotFlo app gives you many tools which can speed up your Dialogflow bot development

This website contains affiliate links. See the disclosure page for more details. 
"The magic key I needed as a non-programmer"

The custom payload generator was the magic key I needed (as a non-programmer) to build a good demo with rich responses in DialogFlow Messenger. I've only used it for 30 minutes and am thrilled. I've spent hours trying to figure out some of the intricacies of DialogFlow on my own. Over and over, I kept coming back to Aravind's tutorials available on-line. I trust the other functionalities I learn to use in the app will save me additional time and heartburn.

- Kathleen R
Cofounder, gathrHealth
Check out my YouTube courses

Dialogflow CX Beginner Tutorial

Dialogflow ES vs CX using a Decision Tree Bot

Intro to NLU for technical non-programmers

Better Dialogflow ES Bots Using the CTFS Framework

Search the autogenerated transcripts of all my YouTube videos
In this free course, I provide some tips for managing large Dialogflow ES bots without compromising on accuracy.

Similar Posts