How to add buttons to your Dialogflow website chatbot

The existing web demo integration of Dialogflow cannot display rich controls like buttons. However, you often want your user to provide specific answers (e.g. Yes/No) while they are interacting with your chatbot. In this post, I will briefly explain how you can add buttons to your Dialogflow website chabot.

Prerequisite

You need to understand and implement the system explained in the Rich Webchat article.

Buttons

To implement buttons, you should use the Suggestion Chips message type within the Google Assistant tab in your Dialogflow console.

When you call the REST API, you will receive the following JSON corresponding to these suggestion chips:

You can then parse this JSON and render it in your UI as buttons.

When the user clicks on one of the buttons, you will simply take the text on the button and submit it to the /query endpoint to proceed with the conversation.