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.
If you are building a Dialogflow ES bot, you have two different options for doing this – the Integrated Web Demo and Dialogflow Messenger.
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.
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 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.
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).
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.