Getting started with Dialogflow Messenger

Dialogflow ES Messenger for Non-Programmers Getting started with Dialogflow Messenger

In this tutorial, I explain how to add a chatbot to your website using the Dialogflow Messenger integration.

Create the Dialogflow intents

First, create a new Dialogflow agent and add all your intents.

If you are not familiar with Dialogflow ES, check out my step-by-step guide which also includes the agent ZIP files for each lesson.

These agent ZIP files are like “templates” which you can import into your own Dialogflow account.

Embed the chat widget into your website

Once you have created all your intents, you can add it into your website.

Embedding the chat widget into your website is straight-forward.

Add the script to your web page

Once you create your Dialogflow ES agent, go to the Integrations pane, and select the Dialogflow Messenger integration.

Select the Dialogflow Messenger integration

Now copy the script into your clipboard.

Copy the script to the clipboard

Paste the script you copied into the <head> tag of your HTML page.

Paste the script into your <head> tag

If you have a WordPress website, you cannot add JavaScript like this directly into your webpage.

In that case, use a plugin like Insert Headers and Footers and add the script into the “Scripts in Header” section.

Using the Insert Headers and Footers plugin to add the script

WordPress Gutenberg Update

With the release of Gutenberg, you can now simply add HTML code blocks directly into a page. So add a HTML block in Gutenberg and paste the script you copied from the Dialogflow console directly into the editor.

You can use the custom HTML block in WordPress Gutenberg and paste your script directly into the page

Test the integration

When you open the page in your browser, you will now see the chat prompt at the bottom right of your web page.

Now click on the chat prompt message, and you should see something like this. 

About this website

BotFlo1 was created by Aravind Mohanoor as a website which provided training and tools for non-programmers who were2 building Dialogflow chatbots.

This website has now expanded into other topics in Natural Language Processing, including the recent Large Language Models (GPT etc.) with a special focus on helping non-programmers identify and use the right tool for their specific NLP task. 

For example, when not to use GPT

1 BotFlo was previously called MiningBusinessData. That is why you see that name in many videos

2 And still are building Dialogflow chatbots. Dialogflow ES first evolved into Dialogflow CX, and Dialogflow CX itself evolved to add Generative AI features in mid-2023

Back to Course
Next Lesson