Skip to content

Carousel module

The Carousel module lets your bot present information in a scrollable card layout. Carousels are commonly used to display products, services, or options in a visually engaging way. Each card can include a title, description, image, and buttons.

Manual Mode

  • Add cards one by one inside the editor.

  • Each card can include:

  • Title + Description

  • Image and Image URL (opened after click on image)

  • Multiple Buttons

    • URL buttons – open a link
    • Action buttons – behave like buttons in normal chat messages (continue dialog flow)

carousel-1.jpg

Dynamic Mode

Instead of creating each card manually, it is possible to generate them from a JSON array stored in any $context variable.

  • Each object in the JSON = one card in the carousel.
  • Card components (title, description, image, link) can be mapped to JSON keys.
  • Use template syntax: {{ title }}, {{ description }}, etc.

Example JSON
  1. Store your JSON in a $context variable (e.g. $cwProducts).
  2. In the JSON with carousel data section, choose the $context.
  3. Map JSON keys to carousel components (title, description…) using {{ }} placeholders (e.g., {{ prodName }}).

carousel-2.jpg

Custom HTML Mode

For advanced customization, switch from Basic content to HTML content (contact support if you cannot see this option in your Carousel module). This unlocks a full HTML editor where you can define your own card template.

<a href="{{link}}">{{name}}</a>

<p>{{description}}</p>

<a href="{{link}}">More</a>

This allows you to:

  • Match your brand’s CSS styles
  • Add custom actions (e.g., “Add to cart” button)
  • Build completely unique layouts

custom-carousel.jpg

Best practice

When to use which mode:

  • Manual → Small, fixed sets of cards (like FAQs or top 3 links).
  • Dynamic → Larger, data-driven carousels (e.g. product lists, search results).
  • Custom HTML → When you need full control of style and functionality.