Carousel

All examples below must be sent within the body field of a message as shown below

{
 "receiver": {
   "contacts": [
     {
       "identifierValue": "[phone]"
     }
   ]
 },
 "body": {...}
}

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

{
  "type": "carousel",
  "carousel": {
    "items":  [ 
        {
            "title": "Card 1",
            "description": "First card"
        }
  ]
  }
}

Google RCS

Facebook

Instagram

Single card with title, description and actions

Body

{
  "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

Facebook

Instagram

Line

Single card with image, title, description and actions

Body

{
  "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

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

{
  "type": "carousel",
  "carousel": {
    "items":  [ 
        {
            "title": "Card 1",
            "description": "First card"
        },
        {
            "title": "Card 2",
            "description": "Second card"
        },
        {
            "title": "Card 3",
            "description": "Third card"
        }
  ]
  }
}

Google RCS

Facebook

Instagram

Multiple cards with title, description and actions

Body

{
  "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

Facebook

Instagram

Line

Multiple cards with image title, description and actions

Body

{
  "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

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

{
  "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"
            }
          }
        ]
      }
    ]
  }
}

WhatsApp