How do I create carousels for my chatbot? How do I create a gallery of cards?
The Carousel Step lets you display a selection or gallery of cards to your end users via a carousel or list.
Cards support multiple modalities and can be configured with any combination of image, title, description and buttons. You can access the Carousel Step under the ‘Talk’ bucket in all custom Chat assistants.
Configuring a Card
Once you’ve added a Carousel Step, add the elements you want displayed in your card. This process is similar to the Card step.
For Visuals, you can upload or link an image or GIF. Upon upload, a preview of your file will show in the editor and canvas. Variables can be added to the Title and Description for personalization. And similar to Text steps, descriptions support markup styling.
You can configure & add paths/call-to-actions to your Cards and present the end-user with Buttons. You can click the (+) by the Buttons section to add Buttons and configure the Button label (with text or variables).
Cards support an unlimited number of buttons (though we recommend max 3-5). For now, card buttons can only be connected to conversation paths.
Unlike the Button Step, Carousel buttons persist after the user’s initial interaction. This means they will remain active, and the user may return to the Carousel during their session and make another selection.
Tip: You can use persistent Carousel buttons to ensure important information like disclaimers or privacy policies is always accessible to your users.
Adding Multiple Cards
To add more cards and to provide a gallery/carousel view to your end users, hit ‘Add Card’. You’ll see a new template under your current card.
Cards can be displayed as horizontal carousels (default) or vertical lists. To change the orientation, open the step’s settings menu. Under ‘Buttons layout’, choose your desired option: Carousel or List.
Note: Choosing ‘Set as Default’ will apply your selected option to net new Carousel Steps you add to canvas.
No Match/No Reply
You can also configure No Match or No Reply to handle scenarios where your user does not behave with your carousel as expected. To do so, open the step’s settings menu and select your desired No Match and/or No Reply.
Tip: You can configure the No Match/No Reply variant responses and/or add an error handling path.
A video breakdown of Carousels can be found below: