# Carousel
{% hint style="info" %}
All examples below must be sent within the **body** field of a message as shown below
{% endhint %}
{% code lineNumbers="true" %}
```json
{
"receiver": {
"contacts": [
{
"identifierValue": "+31612345678"
}
]
},
"body": {...}
}
```
{% endcode %}
## Single cards
A carousel can contain between 1-10 cards. Each card must contain:
1. A title
2. One of description, mediaUrl, actions
1. mediaURL must be a supported image type
3. A card supports up between 1-3 actions and can be a mix of reply, postback and url buttons
### Single card with title and description
#### Body
{% code lineNumbers="true" %}
```json
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card"
}
]
}
}
```
{% endcode %}
#### Google RCS
#### Facebook
#### Instagram
### Single card with title, description and actions
#### Body
{% code overflow="wrap" lineNumbers="true" expandable="true" %}
```json
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card",
"actions": [
{
"type": "reply",
"reply": {
"text": "reply"
}
},
{
"type": "postback",
"postback": {
"text": "postback",
"payload": "postback"
}
},
{
"type": "link",
"link": {
"url": "https://www.messagebird.com",
"text": "Visit MessageBird"
}
}
]
}
]
}
}
```
{% endcode %}
#### Google RCS
#### Facebook
#### Instagram
#### Line
### Single card with image, title, description and actions
#### Body
{% code overflow="wrap" lineNumbers="true" expandable="true" %}
```json
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card",
"mediaUrl": "https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnJZeZvhOMhDQA8SpjQM%2Fuploads%2FRPPgQAGyZE7rvIh3WM2Z%2Fimage2.avif?alt=media",
"actions": [
{
"type": "reply",
"reply": {
"text": "reply"
}
},
{
"type": "postback",
"postback": {
"text": "postback",
"payload": "postback"
}
},
{
"type": "link",
"link": {
"url": "https://www.messagebird.com",
"text": "Visit MessageBird"
}
}
]
}
]
}
}
```
{% endcode %}
#### Google RCS
#### Facebook
#### Instagram
#### Line
## Multiple cards
A carousel can contain up to 10 cards.
The format of each card can either be the same or mixed e.g. one card with title and description and one card with title, description and actions. Generally for display purposes it is recommend to keep the format of cards similar.
### Multiple cards with title and description
#### Body
{% code overflow="wrap" lineNumbers="true" expandable="true" %}
```json
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card"
},
{
"title": "Card 2",
"description": "Second card"
},
{
"title": "Card 3",
"description": "Third card"
}
]
}
}
```
{% endcode %}
#### Google RCS
#### Facebook
#### Instagram
### Multiple cards with title, description and actions
#### Body
{% code overflow="wrap" lineNumbers="true" expandable="true" %}
```json
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card",
"actions": [
{
"type": "reply",
"reply": {
"text": "reply"
}
},
{
"type": "postback",
"postback": {
"text": "postback",
"payload": "postback"
}
},
{
"type": "link",
"link": {
"url": "https://www.messagebird.com",
"text": "Visit MessageBird"
}
}
]
},
{
"title": "Card 2",
"description": "Second card",
"actions": [
{
"type": "reply",
"reply": {
"text": "reply"
}
},
{
"type": "postback",
"postback": {
"text": "postback",
"payload": "postback"
}
},
{
"type": "link",
"link": {
"url": "https://www.messagebird.com",
"text": "Visit MessageBird"
}
}
]
},
{
"title": "Card 3",
"description": "Third card",
"actions": [
{
"type": "reply",
"reply": {
"text": "reply"
}
},
{
"type": "postback",
"postback": {
"text": "postback",
"payload": "postback"
}
},
{
"type": "link",
"link": {
"url": "https://www.messagebird.com",
"text": "Visit MessageBird"
}
}
]
}
]
}
}
```
{% endcode %}
#### Google RCS
#### Facebook
#### Instagram
#### Line
### Multiple cards with image title, description and actions
#### Body
{% code overflow="wrap" lineNumbers="true" expandable="true" %}
```json
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card",
"mediaUrl": "https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnJZeZvhOMhDQA8SpjQM%2Fuploads%2FrEM9zztd8SEiJS6RQuR3%2Fimage.png?alt=media",
"actions": [
{
"type": "reply",
"reply": {
"text": "reply"
}
},
{
"type": "postback",
"postback": {
"text": "postback",
"payload": "postback"
}
},
{
"type": "link",
"link": {
"url": "https://www.messagebird.com",
"text": "Visit MessageBird"
}
}
]
},
{
"title": "Card 2",
"description": "Second card",
"mediaUrl": "https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnJZeZvhOMhDQA8SpjQM%2Fuploads%2FRPPgQAGyZE7rvIh3WM2Z%2Fimage2.avif?alt=media",
"actions": [
{
"type": "reply",
"reply": {
"text": "reply"
}
},
{
"type": "postback",
"postback": {
"text": "postback",
"payload": "postback"
}
},
{
"type": "link",
"link": {
"url": "https://www.messagebird.com",
"text": "Visit MessageBird"
}
}
]
}
]
}
}
```
{% endcode %}
#### Google RCS
#### Facebook
#### Instagram
#### Line
### Multiple cards with body text, media url, title, and link action
This carousel format must have the following:
* `body.carousel.text` - this contains the text for the bubble before the carousel
* Between 2-10 cards.
1. `mediaUrl` where media type is either all image or all video
1. Image types - `image/jpeg`, `image/png`
2. Video types - `video/mp4`, `video/3gpp`
2. Card `title`
3. One link action button
{% code overflow="wrap" lineNumbers="true" expandable="true" %}
```json
{
"type": "carousel",
"carousel": {
"text": "Here is a media carousel with link actions",
"items": [
{
"title": "Card 1",
"mediaUrl": "https://bird.com/images/image1.jpg",
"actions": [
{
"type": "link",
"link": {
"text": "Visit Bird",
"url": "https://www.bird.com"
}
}
]
},
{
"title": "Card 2",
"mediaUrl": "https://bird.com/images/image2.jpg",
"actions": [
{
"type": "link",
"link": {
"text": "Visit Bird",
"url": "https://www.bird.com"
}
}
]
}
]
}
}
```
{% endcode %}
#### WhatsApp
