How to create clickable buttons which trigger an intent in Dialogflow Messenger

The terminology that Dialogflow Messenger uses is very confusing, but unfortunately it is probably a bit too late for the Google folks and go and update it now.

So I have created an article which provides a step-by-step explanation on how to do this.

1 Dialogflow Messenger “buttons” do not behave like actual buttons

What Dialogflow Messenger calls buttons do not behave like the buttons you would normally expect. In fact, not only do they NOT look like buttons, you are usually better off using them as clickable hyperlinks.

2 Dialogflow Messenger Suggestion Chips do behave like actual buttons

However, Suggestion Chips do look like buttons. And you can make them behave like buttons by removing the Event information from the payload.

3 When user clicks on a Suggestion Chip, the chat widget removes all the chips

Suggestion Chips are usually presented in a (horizontal) row. When you click on one of these suggestion chips, all the suggestions in that row disappear from the chat window.

And not only that, Dialogflow Messenger behaves as if the user typed the text which was already on the Suggestion Chip

4 You can use the text from the clicked Suggestion Chip to trigger the next intent

That is, you can now pretend that the user typed some text into the chat widget, and use that to trigger the next intentBoth Dialogflow ES and Dialogflow CX have the concept of int... More and proceed with the conversation. I explain how to do this here.

Note: This is my old website and is in maintenance mode. I am publishing new articles only on my new website. 

If you are not sure where to start on my new website, I recommend the following article:

Is Dialogflow still relevant in the era of Large Language Models?