How to Create & Configure Carousels Component in Studio

Carousels in Studio allow you to display multiple cards in a horizontal scrollable format. They help showcase multiple options within a single message.

How to Add a Carousel in Flow?

1. Navigate to the desired block in the conversation flow.

2. Click "Add Message" in the top toolbar.

3. Select "CAROUSEL" from the message types.

4. Enter a Message Text that introduces the carousel.

5. Choose the Action Handle Type:

   • URL – Opens a link when a button is clicked.

   • Path – Routes users within the chatbot flow

6. Configure the carousel items as either Static or Dynamic.

How to Add Static Carousels?

Static carousels have predefined content for each card.

1. In the Carousel Content section, select Static.

2. Add details for each card:

   • Title – Appears at the top of the card.

   • Description – Provides additional information.

   • Image URL – Displays an image.

3. Click Drag/Click to Upload Image to add an image manually.

4. Define Button Label and Button URL for user actions.

5. Click Add Card to insert more cards into the carousel.

How to Add Static Carousels in Flow?

Static carousels display pre-defined content with fixed details.

1. In the right panel, locate the "Carousel content" section.

2. Add multiple cards by defining:

   • Title – Appears at the top of each card.

   • Description – Provides details for each card.

   • Image URL – Adds an image to each card.

3. Under Action Handle Type, select Static.

4. Add action buttons with Label and Value pairs.

5. Click "Add Card" to insert more cards into the carousel.

How to Add Dynamic Carousels in Flow?

Dynamic carousels generate cards automatically from a data source, allowing flexible and real-time content updates.

1. In the Carousel Content section, select Dynamic under Cards Items.

2. Choose a Source Data Variable that contains the list of items for the carousel.

3. Configure the fields using dynamic expressions:

   • Title → {{title.path}}

   • Description → {{description.path}}

   • Image URL → {{image.path}}

   • Button Label → {{label.path}}

   • Button Value → {{value.path}}

Example Setup

If your data source contains the following JSON structure:

[
  {
    "title": "Product A",
    "description": "Best product for your needs",
    "image": "https://example.com/imageA.png",
    "label": "Buy Now",
    "value": "https://example.com/productA"
  },
  {
    "title": "Product B",
    "description": "High-quality and affordable",
    "image": "https://example.com/imageB.png",
    "label": "View Details",
    "value": "https://example.com/productB"
  }
]

• Set Source Data Variable to your JSON list.

• Map {{title}}, {{description}}, {{image}}, {{label}}, and {{value}} accordingly.

• The carousel will generate multiple cards dynamically.

Ensure the data structure is correctly formatted before configuring dynamic carousels.

This setup enables real-time updates, making dynamic carousels useful for personalized recommendations, product listings, and live data displays.