Home / Dialogflow Messenger Tutorial / Getting started with Dialogflow Messenger
Dialogflow Messenger Tutorial

Getting started with Dialogflow Messenger

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

What we will be building

The video below shows what we will be building in this tutorial.

Embed the chat widget into your website

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

Create your Dialogflow agent

Create a new Dialogflow agent, and remove the Welcome event from the Default Welcome Intent.

Add a new intent into your agent with the following information (note that it includes the Welcome event).

Welcome Intent

Add the script to your web page

Once you create your welcome intent, 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 widget at the bottom right of your web page.

Now click on the welcome message, and you should see the below.

This is a sample chapter from the Dialogflow Messenger Example Bots course

Embed Dialogflow Messenger into your website

Embed chat widget into your website ✅

Have your bot initiate conversation ✅

Multiple messages per conversation turn ✅

<— End of article —>

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
"Much clearer than the official documentation to be honest"

Thanks a lot for the advice (of buying and following your videos)! They helped a lot indeed. Everything is very clear when you explain, much clearer than the official documentation to be honest 🙂

Neuraz T
Review for Learn Dialogflow CX
"I will strongly recommend this course because even I can learn how to design chatbot (no programming background)"

I think Aravind really did a great job to introduce dialogflow to people like me, without programming background. He organizes his course in very clear manner since I have been a college professor for 20 years. It is very easy for me to recognize how great Aravind’s course is! Very use-friend and very easy to follow. He doesn’t have any strong accent when he gives the lectures. It is so easy for me to understand. Really appreciate it.

Yes, I will strongly recommend this course because even I can learn how to design chatbot (no programming background) after studying Avarind’s course, you definitely can!

Ann Cai
Review for Learn Dialogflow ES

Similar Posts

    • I haven’t used Google Sites till now. And to be quite honest, I don’t think it is such a great choice for hosting your website these days in any case. Have you considered using something like GitHub Pages, which is also free?

  • Hi,

    I followed the exact same steps mentioned above however unable to generate rich response. Is it because my json in fulfillment is incorrect?