Carousel

Carousel is the message template for a horizontally scrolling list of cards.

Basic usage

Carousel renders as a horizontally scrolling container of cards, each with an image, a title, descriptive text and action buttons. The user swipes sideways to browse the options.

Template structure

JSON

{
  "type": "CAROUSEL",
  "columns": [
    {
      "title": "Product A",
      "text": "Well made and dependable.",
      "buttons": [
        {
          "label": "See the details",
          "action": {
            "type": "uri",
            "uri": "https://example.com/product-a"
          }
        }
      ]
    },
    {
      "title": "Product B",
      "text": "Fresh design, a better experience.",
      "buttons": [
        {
          "label": "Buy now",
          "action": {
            "type": "uri",
            "uri": "https://example.com/product-b"
          }
        }
      ]
    }
  ]
}

Properties

type (required)

The message template's type, always "CAROUSEL".

columns (required)

The array of cards; each element is one card.

Property	Type	Required	Description
thumbnailImageUrl	String	No	The URL of the card's image
imageAspectRatio	String	No	The image's aspect ratio • "rectangle": 1.51:1 • "square": 1:1
imageSize	String	No	How the image is scaled • "cover": fills the area, possibly cropping • "contain": shows the whole image, possibly with blank margins
imageBackgroundColor	String	No	The image's background colour, as a hex code such as "#FFFFFF"
title	String	Yes	The card's heading
text	String	Yes	The card's descriptive text
buttons	Array	No	The action buttons, each with a label and an action
defaultAction	Object	No	The action taken when the card's body is tapped

quickReplies (optional)

An array of quick reply buttons, shown beneath the whole carousel. See Quick Replies.

Examples

To send a carousel from Push Message:

1. Choose Expression in the Template field's dropdown.
2. Enter the following JavaScript in the editor.

Recommending products

(() => {
  return {
    type: 'CAROUSEL',
    columns: [
      {
        title: 'High-performance laptop',
        text: 'Intel i7 processor, 16GB memory',
        buttons: [
          {
            label: 'See the details',
            action: {
              type: 'uri',
              uri: 'https://shop.example.com/laptop',
            },
          },
        ],
      },
      {
        title: 'Smartphone',
        text: '6.1-inch screen, 128GB storage',
        buttons: [
          {
            label: 'See the details',
            action: {
              type: 'uri',
              uri: 'https://shop.example.com/phone',
            },
          },
        ],
      },
    ],
  };
})()

Comparing plans

(() => {
  return {
    type: 'CAROUSEL',
    columns: [
      {
        title: 'Basic',
        text: 'For individuals\nCore features\n5GB storage',
        buttons: [
          {
            label: 'NT$ 99/month',
            action: {
              type: 'MESSAGE',
              text: 'I choose the Basic plan',
            },
          },
        ],
      },
      {
        title: 'Professional',
        text: 'For small teams\nAdvanced features\n50GB storage',
        buttons: [
          {
            label: 'NT$ 299/month',
            action: {
              type: 'MESSAGE',
              text: 'I choose the Professional plan',
            },
          },
        ],
      },
    ],
  };
})()