Skip to main content
The Carousel component in your Chat/Bot flow allows you to display a swipeable gallery of cards to customers, each card containing images, text, and interactive buttons. It is ideal for showcasing products, options, or content previews and allows customers to make selections or take actions.It is a visual component that presents multiple cards to the user, either as fixed content or populated dynamically using variables.

​
Topics covered:

  • Name: It is the identifier of the step.
  • Description: It is optional to display internal notes for context.
  • Carousel Type: You can choose between Fixed or Dynamic.
  • Cards: You can add one or more cards with an image, title, description, and buttons.
A Fixed Carousel displays a set number of cards with manually defined content. While setting up an Execution flow, select the Carousel Action.
  • Step Name: Add a unique name for the carousel.
  • Internal Description: (Optional) Add notes for internal use.
  • Carousel Type: Fixed
mceclip1.png You will need to add at least one card:
  • Image: Upload an image or enter a static URL.
  • Title / Description: Text content (you can use variables here).
  • Buttons: Add 1–10 buttons per card.Each button can trigger a different action.
mceclip2.png
  • Use the Add Card button to duplicate or create new cards.
  • Additional Settings:-
    • No Match: This triggers a fallback when the user’s input doesn’t match the button options. Sends reprompts and ends the flow if exhausted.
    • No Reply: This triggers an alternative path when no response is received.
mceclip3.png
  • Click on Save.
  • Configure the Actions for each Button.
image.png Note:
  • You must have at least one card.
  • Buttons stay active even after interaction.
  • Output ports = Number of cards × Number of buttons.
A Dynamic Carousel renders cards using an array or loop-type variable. While setting up an Execution flow, select the Carousel Action.
  • Step Name: Add a unique name for the carousel.
  • Internal Description: (Optional) Add notes for internal use.
  • Carousel Type: Dynamic
  • Variable: You need to provide a loop type of variable or an array type of variable that consists of multiple items or objects to iterate. For example: Record Type of variable with multiple values allowed.
  • Configure the Card Template: You’ll configure only one card, which is repeated based on the items in the variable.
  • Image: You can add the image URL attribute.
  • Title: You can add the title of the card or use attributes for dynamic value.
  • Body: You can add the body of the card or use attributes for dynamic value.
  • Buttons: You can add the button names or use attributes for dynamic value.
mceclip5.png
  • No Match: This triggers a fallback when the user’s input doesn’t match the button options. Sends reprompts and ends the flow if exhausted.
  • No Reply: This triggers an alternative path when no response is received.
  • Click on Save. Configure the Actions for each Button.
image.png Note: Maximum 10 cards and 10 buttons per carousel. All dynamic cards use the same structure and buttons.

​
Practical Use Case

The Carousel can be used to display the top 5 products you offer when an intent is detected. You can show the product images, name, and price with buttons like Purchase or Details. Here is an example of how your execution flow will look: mceclip6.png