You are currently viewing Dialogflow 10 – Handling a Carousel

Dialogflow 10 – Handling a Carousel


It has been a long time since my last post, but I now have some new ideas/questions that I will solve in this blog.

Recently I have been creating a demo where I needed to create a visual list of options, so the user could choose one to follow the conversation. I think the best way to handle this on Google Assistant is to use a Carousel, one of the supported Rich Responses for the Assistant platform. The lists have a different visual look, with less text, but the behaviour is the same to what I will show here.

The details about rich responses are here. There are two types of carousels, but the browsing carousel is not supported on Smart Displays, as its main usage is to provide external web references, and this is not supported on Smart Displays. So I chose a normal carousel … a list would also make the job. The lists have different visual aspect, with less text, but the same behaviour that we are going to see.

I’m not going to explain how to create a carousel, as it can easily be done using dialogflow’s GUI. You can also make it with code, similarly to what we did in this post. In my case this is the carousel definition:

And this is how it shows in my Smart Display:

The user can scroll sideways and select any of the icons to find more information about any of the topics.

What happens when an icon is pressed is that an event of type actions_intent_OPTION is triggered. Do you remember the events??

To handle this we would need an intent that will be launched with this event. This is how it looks like in my example, and the relevant part is that there are no training phrases, everything is going to be managed from a fulfillment function:

The code for the fulfillment must read a context option that tells it which card was chosen in the carousel, and then react accordingly … in my case it is quite simple:

As you can see it triggers another event associated with the name of the selected card, so we would create an intent for each card/event. Those intents look like this one, and the answer will provide the relevant info:

In this case I have also created an event to handle the exceptions, in case we select a card which doesn’t have a matching intent/event:

A relevant detail is that if you have several carousels (or lists) in your agent, they all will be handled from the same fulfillment function as they all will trigger the same event. You have to consider this when thinking on how to create the answers.




I work for Google Cloud, but this post are personal ideas and opinions

Leave a Reply