I got this comment recently on my YouTube channel:
So how do you render a user message when the user clicks a suggestion chip?
And how to respond to the message from your bot?
In other words, how can we make the selection of a suggestion chip in the Dialogflow Messenger move the conversation forward to the next intent?
You might recall my earlier tutorial on getting started with the Dialogflow Messenger.
I am going to be extending the same agent to explain this topic.
What we are building
Here is a demo which shows what we will be building in this tutorial.
You can interact with the bot here.
The Basic idea
When user clicks on a suggestion chip in the Dialogflow Messenger, you need to make sure that the suggestion chip does not use a link.
A second thing to notice is that once you omit the link, the behavior of the suggestion chip changes. Now when you click on the suggestion chip, the suggestions disappear from the screen. In addition, the text on whichever chip was clicked on will be rendered into the chat window.
A third thing to notice is that when this suggestion chip's text is rendered into the chat window, at the same time that text is sent to your Dialogflow agent as if the user had typed those words. Obviously, that is a crucial point, because it allows us to anticipate and construct our Dialogflow agent accordingly.
I will take the agent we created for the previous tutorial and make suitable modifications so that it can be used for this example.
Modify the welcome intent with the following information.
Note the following:
- It includes the Welcome event, so this intent will fire when chat window loads
- There are two text responses followed by a custom payload
- And it includes a bunch of suggestion chips inside the custom payload JSON
- All the suggestion chip text corresponds to the user messages I had used for the different rich responses from my previous tutorial
Now modify the show.description.type intent to add a single suggestion chip as the custom payload. The suggestion chip should simply say "Start Over". Notice that we have already included "Start Over" as a training phrase in the df-messenger-welcome intent.
Modify the show.info.type intent with a similar custom payload at the end.
Now do the same for the other intents which display rich responses in the previous agent.
Default Fallback Intent
Finally, add the suggestion chip to Start Over to the Default Fallback intent also.
(Question for the reader: Can you explain why we are adding it?)
That's it. Now you should be able to see the bot in action.
Download agent ZIP file
You can get the agent ZIP file from my Dialogflow Messenger Quickstart course.
- Dialogflow Messenger Quiz Bot
- Dialogflow Zobot: Selection Triggers the next intent
- Integrating Dialogflow with Zoho live chat
- 5 things you cannot do using the Dialogflow Messenger integration
- Dialogflow Architecture
- Dialogflow Python webhook tutorial
- Dialogflow training
- Dialogflow vs Lex vs LUIS vs Watson vs Chatfuel
- Convert your WordPress website into a Dialogflow FAQ chatbot
- Dialogflow Messenger Interactive Learning Bot