Home / DialogFlow ES / Dialogflow Messenger tutorial
DialogFlow ES | Website Bots

Dialogflow Messenger tutorial

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

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.

HTML and CSS customizations

The big advantage of using the Dialogflow Messenger integration (instead of the 1-click web demo) is that it is possible to customize the behavior of the chat widget using HTML and CSS customizations. You can check out the different customizations available in the documentation, and I also go over them in more detail in the Dialogflow Messenger Bots course.

For example, change the chat-title in your script within the df-messenger tag to “Dialogflow Messenger Bot”.

When you open the page, you will see the new title in your chat window. If you don’t provide any value for the chat-title attribute, the name of the Dialogflow agent will be used as default.

Rich responses

By far, the biggest feature of the Dialogflow Messenger integration is its support for rich responses such as links and images and buttons.

Let us go over these rich responses one by one.

You can edit, preview and and then download sample JSON files for free from my BotFlo app.

Description type

The description type allows you to add multiple lines of text under a heading.

Create an intent called show.description.type as below: To see the result, type the appropriate phrase into the chat widget.

Intent to display description type in Dialogflow Messenger

Info Response type

The info type is similar to the card in the Google Assistant rich response, and it supports an image, a title and some text below the title.

Create a new intent in your Dialogflow agent called show.info.type. The image URL points to an image on my website. Now check the result in the chat widget. You should be able to click anywhere inside the Info response type and a new browser tab will open and navigate to Google.com

Intent which displays the Info response type in Dialogflow Messenger

Image type

You can also display images inside the web chat window in the Dialogflow Messenger. However, the image auto-resizes to fit the width of the window, so small images get expanded and look distorted. Larger images generally look better.

Photo credit: Unsplash

Add a new intent called show.image.type in your Dialogflow agent as below. Now test the response in the chat widget.

Intent which displays image in Dialogflow Messenger

Button type

Buttons are a good way to add a link to some page on your website. I don’t recommend using the “event” parameter in the button type, and I explain why in the Dialogflow Messenger Bots course.

Create an intent called show.button.type as below.

Intent which displays a button in Dialogflow Messenger

Now test it in your chat widget.

Suggestion Chips

Suggestion chips are good choices for representing buttons in your Dialogflow chat widget. I don’t recommend using it for links, though, and I explain why in the Dialogflow Messenger Bots course.

Create an intent called show.suggestion.chip.type as below. Now test it inside your chat widget.

Intent which displays suggestion chips

Note: the custom payload which is generated by the tool is exactly what you need for the suggestion chips to behave like buttons, as described here.

That is, it doesn’t support all the fields used in the suggestion chips, precisely because we need the functionality (of being able to click on the suggestion and have it submit as text inside the chat window).

List Response Type

The list response type is an interesting one.

Compared to the other rich responses, it is more complex to implement. But it also provides some benefits you don’t have in other rich responses. Specifically, if you need a “listbox” style input – where the presented value has to be different from the underlying key – it is your only choice.

You need to add a second intent into your agent with the event PARALLEL as below.

Intent which responds to clicking on the list type

Remember that you already have an intent called df-messenger-welcome with another event – the Welcome event.

Now add another intent in your agent as below:

Intent which displays the list type

Now you can test it in your chat widget. When you click on the second list item, it will trigger the parallel universe intent.

Accordion Type

The accordion type displays collapsible information.

Add another intent to your Dialogflow agent as below.

Intent which displays the acordion rich response

Now test it in your chat widget.

Do you notice something unusual?

Yes, the Accordion supports HTML content! 🙂

Tools to speed up your Dialogflow Messenger bot development

I have created some tools to speed up your Dialogflow Messenger bot development.

Download sample JSON for Dialogflow Messenger rich responses

You can use my BotFlo app to edit, preview and download (copy) sample JSON objects for these rich response.

Time stamps:

[00:00] About this tool

[00:58] Description type

[03:34] Info card type

[04:42] Image Type

[05:32] Button type (for generating clickable hyperlinks)

[07:40] List type

[09:26] Suggestion chips type (for generating buttons)

[10:47] Accordion type

[12:51] Full Demo

Visual editor for creating Dialogflow Messenger rich responses

I have also created some visual editors to generate some of the Dialogflow Messenger rich responses. For example you can use this visual editor to generate suggestion chips.

Quickly browse all the custom payloads in your Dialogflow Messenger bot

You can quickly browse all the custom payloads in your Dialogflow Messenger bot using the Quick Browse tool.

Generate a Dialogflow Messenger FAQ bot with a single click

You can type all the custom payload JSON into a spreadsheet, export to CSV file and use my Rich FAQ bot generator to convert it into a Dialogflow Messenger chatbot.

"Can I do this in Dialogflow Messenger?"

I am often asked about these things, which you cannot do in Dialogflow Messenger, or at least not without significant programming cost
- add bot typing delay
- allow the visitor to maintain the conversation session across multiple pages
- reprompt the user automatically after some period of inactivity
- automatically end the conversation after prolonged user inactivity
- transfer chat to live agent
- automatically get email notification when chat completed
- automatically save user information to a database

If you need any of these things, I recommend a low cost alternative called Zoho SalesIQ. See how SalesIQ compares with Dialogflow Messenger. You can integrate SalesIQ with Dialogflow ES with the click of a button. 

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

4 Comments

    1. 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?

  1. Hi,

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