Home / Dialogflow Messenger Tutorial / Dialogflow Messenger Rich Responses (buttons, hyperlinks etc)
Dialogflow Messenger Tutorial

Dialogflow Messenger Rich Responses (buttons, hyperlinks etc)

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! 🙂

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

Rich Responses


Description type ✅

Info Type ✅

Button Type ✅

Image Type ✅

Suggestion Chip Type ✅

List Type ✅

Accordion Type ✅

Agent ZIP file ✅

<— 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