- Website FAQ chatbot vs simple site search
- Website chatbot vs Facebook Messenger Bot
- How to create clickable hyperlinks in Dialogflow website chatbot
- How to add buttons to your Dialogflow website chatbot
- How to display images inside your Dialogflow website chatbot
- How to add line breaks inside your Dialogflow website chatbot
- Dialogflow webhook for website chatbots
- Reader Question: Do you know a good bot for websites I can try out?
- DialogFlow Web chatbox: Some UI design ideas
- How much does it cost to create an FAQ chatbot for my website?
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.
You need to understand the system explained in my free "Rich Webchat using Dialogflow" course.
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.