Carousel
All examples below must be sent within the body field of a message as shown below
Przykład kodu
{
"receiver": {
"contacts": [
{
"identifierValue": "+31612345678"
}
]
},
"body": {...}
}Single cards
A carousel can contain between 1-10 cards. Each card must contain:
- A title
- One of description, mediaUrl, actions
- mediaURL must be a supported image type
- 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
Przykład kodu
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card"
}
]
}
}Google RCS
Single card with title, description and actions
Body
Przykład kodu
{
"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"
}
}
]
}
]
}
}Google RCS
Line
Single card with image, title, description and actions
Body
Przykład kodu
{
"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"
}
}
]
}
]
}
}Google RCS
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
Przykład kodu
{
"type": "carousel",
"carousel": {
"items": [
{
"title": "Card 1",
"description": "First card"
},
{
"title": "Card 2",
"description": "Second card"
},
{
"title": "Card 3",
"description": "Third card"
}
]
}
}Google RCS
Multiple cards with title, description and actions
Body
Przykład kodu
{
"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"
}
}
]
}
]
}
}Google RCS
Line
Multiple cards with image title, description and actions
Body
Przykład kodu
{
"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"
}
}
]
}
]
}
}Google RCS
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.
- mediaUrl where media type is either all image or all video
- Image types - image/jpeg, image/png
- Video types - video/mp4, video/3gpp
- Card title
- One link action button
- mediaUrl where media type is either all image or all video
Przykład kodu
{
"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"
}
}
]
}
]
}
}