Overview
Carousels allow you to display multiple rich cards in a swipeable horizontal list. This format is ideal for showcasing multiple products, options, or articles in a single message. Each card in a carousel functions as a standalone vertical rich card.
Carousel example image:
JSON Template Properties
| Property Name | Description | Type | Required |
|---|---|---|---|
| type | Must be set to "carousel". |
String | Y |
| style.size | Determines the width of the cards in the carousel. Can be small or medium. |
String | N |
| elements | An array of vertical container elements. Each element in this array represents a separate rich card within the carousel. | Array | Y |
| elements[i].type | Must be set to "vertical". |
String | Y |
| elements[i].tag | Must be set to "generic". |
String | Y |
| elements[i].elements | An array containing the components of the individual rich card: image, text (title/subtitle), and button. For supported click actions (e.g., publishText, link, navigate) in buttons, refer to the Suggested Actions Template and Quick Replies Template. |
Array | Y |
Carousel Template Code Example
{
"type": "carousel",
"style": {
"size": "medium"
},
"elements": [
{
"type": "vertical",
"tag": "generic",
"elements": [
{
"type": "image",
"url": "https://i.pinimg.com/736x/a0/67/5e/a0675e5161d7ae5be2550987f397a641--flower-shops-paper-flowers.jpg",
"tooltip": "Resturant image",
"style": {
"size": "medium"
}
},
{
"type": "text",
"tag": "title",
"text": "Your reservation at The French Laundry",
"tooltip": "Title"
},
{
"type": "text",
"tag": "subtitle",
"text": "We're springing for joy that you'll be dining with us on Saturday, June 18th at 7:30pm. Please let us know if you have any dietary restrictions.",
"tooltip": "subtitle"
},
{
"type": "button",
"tooltip": "Publish text example",
"title": "Publish text example",
"click": {
"actions": [
{
"type": "publishText",
"text": "Published text button tap"
}
]
}
},
{
"type": "button",
"tooltip": "Our Menu",
"title": "Our Menu",
"click": {
"actions": [
{
"type": "link",
"uri": "https://www.liveperson.com",
"target": "blank"
}
]
}
},
{
"type": "button",
"tooltip": "Open this link",
"title": "French laundry Location",
"click": {
"actions": [
{
"type": "navigate",
"la": 51.503399,
"lo": -0.119519
}
]
}
},
{
"type": "button",
"tooltip": "Call us",
"title": "Call us",
"click": {
"actions": [
{
"type": "link",
"uri": "tel:+13125551234"
}
]
}
}
]
},
{
"type": "vertical",
"tag": "generic",
"elements": [
{
"type": "image",
"url": "https://i.pinimg.com/736x/a0/67/5e/a0675e5161d7ae5be2550987f397a641--flower-shops-paper-flowers.jpg",
"tooltip": "Resturant image",
"style": {
"size": "medium"
}
},
{
"type": "text",
"tag": "title",
"text": "Your reservation at The French Laundry",
"tooltip": "Title"
},
{
"type": "text",
"tag": "subtitle",
"text": "We're springing for joy that you'll be dining with us on Saturday, June 18th at 7:30pm. Please let us know if you have any dietary restrictions.",
"tooltip": "subtitle"
},
{
"type": "button",
"tooltip": "Publish text example",
"title": "Publish text example",
"click": {
"actions": [
{
"type": "publishText",
"text": "Published text button tap"
}
]
}
}
]
}
]
}
Limitations
- A carousel must contain a minimum of 2 cards and a maximum of 10 cards.
- All cards within the carousel share the same limitations as standard rich cards:
- Title text can contain up to 200 characters.
- Subtitle (description) text can contain up to 2000 characters.
- Button title text can contain up to 25 characters.
- A maximum of 4 buttons/suggestions can be added per card.