Dialogflow fulfillment is a service that is deployed to exchange data for implementing your business logic. You can also use it to add rich responses to your bot. Dialogflow fulfillment supports rich responses including buttons, links, images, cards, etc. In this post, we’ll learn how to add a rich response button using Dialogflow fulfillment.
There are multiple ways to set the rich response button from Dialogflow:
- Dialogflow Intent Interface: Dialogflow provides an easy way to add rich responses using the interface itself. For step by step guide on using the interface, check here.
- Dialogflow fulfillment: You can add rich responses using fulfillment code. And this is the main scope of this article.
Let’s take a look at how to add Suggestion Chips (also known as Quick Replies) through the Dialogflow fulfillment code.
Here is the sample code to add suggestion chips:
agent.add(new Suggestion("Quick Reply"));
agent.add(new Suggestion("Suggestion"));
First, go to Dialogflow and select your agent. Go to ‘Intents’ and create one intent “richmessage”.
Next, we need to enable the webhook call for this intent. Scroll to the bottom to find “Enable webhook call for this intent”.
Next, select fulfillment from the left-hand side menu and enable the in-line editor.
Paste the following code in index.js:
Here, we are registering the intent ‘richmessage’ and then adding the response handler for it.
As you can see on the right-hand side in the above image, 2 buttons are rendering — “Quick Reply”, “Suggestion”. These are coming through the fulfillment code.
Add chatbot rich responses to your website and mobile apps
For this, you need to write your own code on the client-side to parse the JSON and render the UI.
Alternatively, you can use solutions such as Kommunicate to embed chatbots with rich responses to your product.
Below is how the Suggestion Chips look in Kommunicate.
