carousel

To display a list of items as a carousel, use the carousel reply type. A carousel is a collection of cards with text descriptions.

caution

The maximum number of cards in one message is 10. Cards added after the tenth one won’t be displayed in the message.

Properties

Property	Type	Required	Description
text	String	Yes	General carousel description that is sent as a separate message.
content	String	Yes	An array of objects with carousel cards.

The content array contains objects with the following properties:

Property	Type	Required	Description
title	String	Yes	Card title.
description	String	No	Card description.
image	String	No	Image URL.
btnText	String	Yes	Button text. The maximum length is 25 characters. Button text over the limit will be trimmed.
url	String	No	Target URL where the user will be redirected to when the button is selected. If the property is not specified, then selecting the button will send a message with the button text to the chat.

Syntax

{
  "type": "carousel",
  "text": "Choose a suitable subscription plan for our service",
  "content": [{
      "title": "Standard plan",
      "description": "Free plan for a small number of users",
      "image": "https://example.com/standard-plan.png",
      "url": "https://example.com",
      "btnText": "Learn more"
  },
  {
      "title": "Business plan",
      "description": "Plan for commercial use and high user traffic",
      "image": "https://example.com/business-plan.png",
      "url": "https://example.com",
      "btnText": "Learn more"
  }]
}

Channel restrictions

carousel is only supported in the following channels:

• Chat API
• Chat widget

How to use

Consider the following example. When a transition is made to the BestLocations state, the bot will display the message Best places to visit. Below the message, two cards will appear describing two travel destinations: Phuket and Bali. The main card will be the one listed first in the content array. In the example above, it is the card about Phuket. The second card will appear to the right of the main one.

state: BestLocations
    script:
        $response.replies = $response.replies || [];
        var reply = {
            "type": "carousel",
            "text": "Best places to visit",
            "content": [
                {
                    "title": "Phuket",
                    "description": "Phuket offers something for everyone, especially budget-minded travelers.",
                    "image": "https://www.asiaqua.com/wp-content/uploads/2018/12/diving-day-trip-phuket-koh-phiphi-asiaqua.jpg",
                    "url": "https://example.com/best-locations/phuket/",
                    "btnText": "Read more"
                },
                {
                    "title": "Bali",
                    "description": "Serene temples and beautiful beaches are the biggest draws to this lush Indonesian paradise.",
                    "image": "https://media.timeout.com/images/105240189/image.jpg",
                    "url": "https://example.com/best-locations/bali/",
                    "btnText": "Read more"
                }
            ]
        };
        $response.replies.push(reply);

Below is an example of the cards in the carousel.