Custom Payload : Add a Rich Message Button Response to Dialogflow

Updated on October 21, 2024

Rich messaging boosts customer conversations. The benefit of rich messaging is that it provides users with an easy, convenient and quick way to interact with your business. As a result, it plays a major role in bot-based conversations where bots are still learning to understand the Natural Language.

If your bot is handling a conversation and asks a question to a user, then the user might input anything. It can be a long sentence, it can be a spelling mistake or something which your bot doesn’t yet understand. All these things impact user experience as it makes things really difficult for the bot platforms to understand it accurately.

Using rich messaging, you can solve these problems and provide your users with a specific set of options to select. This way, it is more convenient for the user to click on the available options and the bot platform will have a defined query to answer with accuracy.

How to Add Rich Message Buttons?

Prerequisites

1. Dialogflow ES or Dialogflow CX account
2. Kommunicate account for adding rich messages from Dialogflow chatbot to your websites and mobile apps. If you don’t have an account, please signup here for free.

Buttons are the most widely used rich message and are used for providing a set of options, surveys, appointment booking, etc.

Rich message buttons can be added to the Dialogflow based bots and Dialogflow supports all types of rich messages from buttons, links, images to card carousel.

Dialogflow provides 2 ways to set the response:

1. Text Response: Used for text-based messages and works on all platforms
2. Custom Payload: Custom payload in JSON format for rich messages

Different platforms such as Facebook messenger, Google Actions, Kik, etc support their own custom payload.

Google Assistant supports the following rich messages:

• Simple Response
• Basic Card
• List
• Suggestion Chips
• Carousel Card
• Browser Carousel Card
• Link Out Suggestion
• Media Content
• Custom Payload
• Table Card

Benefits of Rich Message Buttons

• Higher response rate
• More interactive
• Improved result accuracy for NLP based bot

In this video, let’s take a look at how to add a rich message button response to the Dialogflow chatbot.

In case, you want to learn more about Dialogflow bot development, check out the beginner’s guide to Dialogflow here.

We will be using the Google Assistant format for this tutorial.

Suggestion Chips and Quick Replies

Button type rich message is referred to as “Suggestion Chips” by Google Assistant and “Quick Replies” by Facebook messenger.

Go to Dialogflow console, select the intent and scroll down to Responses. Click on “Google Assistant” to see the list of support rich messages.

Select “Suggestion Chips” and click on “Add Item” to list down the buttons.

Using Custom Payload Dialogflow Add Rich Message

The above screenshot shows a sample of how to create a response with rich messages using a custom payload in Dialogflow.

Add Rich Messages Button to the Website and Mobile Apps

You can add the clickable buttons also known as suggestion chips and quick replies to your website and mobile app by creating your own custom payload in JSON format, parsing the response in your website and mobile apps codebase and rendering it on the UI.

If you need a codeless rich message integration, check out Kommunicate.io. Kommunicate makes it easy to add rich messages including buttons, images, cards, lists, carousels, etc on your website and mobile apps. Also, you need not worry about creating any Dialogflow custom payload and writing code.

Visit the Dialogflow bot web demo for rich messages here and type “show button” to see it live. Below is the screenshot of how it looks on the website.

---

Suggested read: Step by step tutorial to add rich response button using dialogflow fulfillment.

Rich Messages in Dialogflow CX and Dialogflow ES

Dialogflow has recently released Dialogflow CX and renamed the existing version to Dialogflow ES. Rich messages including the buttons are supported in both. Read about differences in Dialogflow CX and ES here.

Rich Messages in Dialogflow Messenger

Dialogflow Messenger widget has support for rich messages including buttons.

To sum up, rich message buttons not just make the interface book pretty and drive more actions from your users. They also provide a better overall conversational experience.

Hence, if you are still using plain text responses in your bots, you might want to reconsider using more interactive rich messaging elements.

---

At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.