Overview
The Carousel template is a horizontally scrollable carousel of generic or button templates.
The carousel includes a list of up to 10 generic or button cards that each can include:
- text title
- text subtitle
- image
- Up to 3 buttons (Facebook limitation) with either link, publish text or navigation button actions
Carousel example with all button actions, including a link button and navigation button tap view:
Template Properties
| Property Name | Description | Type | Required |
|---|---|---|---|
| type | Types of basic elements supported by Structured Content framework. Can be "text", “image” or “button”. If using Carousel, type of header element will always be “carousel” | Enum | Y |
| tag | Tag of template view, must be “generic”, “button” or “list” for Facebook templates. Within basic elements objects, will be “title”/”subtitle”, which will indicate what text should rendered in each of those elements (the title and subtitle have default style in Facebook) | Enum | Y |
| elements | Array of elements/templates. By using elements in your structured content template, you can send basic elements, such as simple text, images or buttons | Elements/Templates | Y |
| text | The message text in a “text” type element | String | Y |
| tooltip | Element tooltip. Used also for aira | String | N |
| url | Image URL in a “image” type element | String | Y |
| style | Basic structured content elements style object | Style elements | N |
| bold | Defines if text will be bold or not. Will always be set to ‘true’ in Facebook generic and button. | Boolean | N |
| size | Defines the element size. Will always be set to ‘large’ in Facebook generic and button. | Enum — small/medium/large | N |
| button | Buttons contains click and actions properties that define the type of action set on user click operation | Object | Y |
| click | Click object contains the action type set on the click operation for each button | Object | Y |
| action | Actions are a list of applicative user actions on buttons, that will run on the consumer side and will help them to achieve their operation. Button action for Facebook generic or button can be set to Publish text, Link or Navigate | Enum - “publishText”, “link”, “navigate” | Y |
Example Template
{
"type": "carousel",
"padding": 10,
"elements": [{
"type": "vertical",
"tag": "generic",
"elements": [{
"type": "vertical",
"elements": [{
"type": "image",
"url": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ_w8UO-QDbk2S2ZLuiuePHB7j6Qb86DLsjwddhp_yq4WaL_LL",
"tooltip": "Flowers"
}, {
"type": "text",
"tag": "title",
"text": "Title",
"tooltip": "Title"
}, {
"type": "text",
"tag": "subtitle",
"text": "subtitle",
"tooltip": "subtitle"
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "publishText",
"text": "Add to cart pressed"
}]
}
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "link",
"name": "Flowers",
"uri": "https://www.pinterest.com/lyndawhite/beautiful-flowers/"
}]
}
}]
}]
},
{
"type": "vertical",
"tag": "generic",
"elements": [{
"type": "vertical",
"elements": [{
"type": "image",
"url": "https://i.pinimg.com/736x/cf/05/dc/cf05dc6becf9d387707597a788250a1c--blue-bridal-bouquets-bridal-flowers.jpg",
"tooltip": "Flowers"
}, {
"type": "text",
"tag": "title",
"text": "Title",
"tooltip": "Title"
}, {
"type": "text",
"tag": "subtitle",
"text": "subtitle",
"tooltip": "subtitle"
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "publishText",
"text": "Add to cart pressed"
}]
}
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "link",
"name": "Flowers",
"uri": "https://www.pinterest.com/lyndawhite/beautiful-flowers/"
}]
}
}]
}]
},
{
"type": "vertical",
"tag": "generic",
"elements": [{
"type": "vertical",
"elements": [{
"type": "image",
"url": "https://i.pinimg.com/736x/27/9a/d7/279ad7bfd3fe7ee87638a5ce064d25a5---year-old-girl-cut-flowers.jpg",
"tooltip": "Flowers"
}, {
"type": "text",
"tag": "title",
"text": "Title",
"tooltip": "Title"
}, {
"type": "text",
"tag": "subtitle",
"text": "subtitle",
"tooltip": "subtitle"
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "publishText",
"text": "Add to cart pressed"
}]
}
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "link",
"name": "Flowers",
"uri": "https://www.pinterest.com/lyndawhite/beautiful-flowers/"
}]
}
}]
}]
},
{
"type": "vertical",
"tag": "generic",
"elements": [{
"type": "vertical",
"elements": [{
"type": "image",
"url": "https://i.pinimg.com/736x/06/dc/b3/06dcb32c02c30a035b189ad267674f1c--pink-bouquet-floral-bouquets.jpg",
"tooltip": "Flowers"
}, {
"type": "text",
"tag": "title",
"text": "Title",
"tooltip": "Title"
}, {
"type": "text",
"tag": "subtitle",
"text": "subtitle",
"tooltip": "subtitle"
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "publishText",
"text": "Add to cart pressed"
}]
}
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "link",
"name": "Flowers",
"uri": "https://www.pinterest.com/lyndawhite/beautiful-flowers/"
}]
}
}]
}]
},
{
"type": "vertical",
"tag": "generic",
"elements": [{
"type": "vertical",
"elements": [{
"type": "image",
"url": "https://i.pinimg.com/736x/a8/28/26/a8282621d4fe30717de5fab28975b7a3--pink-peonies-pink-flowers.jpg",
"tooltip": "Flowers"
}, {
"type": "text",
"tag": "title",
"text": "Title",
"tooltip": "Title"
}, {
"type": "text",
"tag": "subtitle",
"text": "subtitle",
"tooltip": "subtitle"
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "publishText",
"text": "Add to cart pressed"
}]
}
}, {
"type": "button",
"tooltip": "Add to cart",
"title": "Add to cart",
"click": {
"actions": [{
"type": "link",
"name": "Flowers",
"uri": "https://www.pinterest.com/lyndawhite/beautiful-flowers/"
}]
}
}]
}]
}
]
}