JSON format for cards

Converse has a Card interaction that can contain a carousal up to 10 cards. Each card in the interaction can have a maximum of three buttons. The title property is required along with one other property (you choose which property to use).

Note: The following JSON format also applies to cards intended to be used as list pickers in Live Takeover or on the Apple Business Chat channel.

The JSON format of a card is as follows:

{
	"title": "required, string",
	"subtitle": "string",
        "item_url": "URL string",
	"image_url": "Image URL",
	"default_action": {},
	"buttons": [ "array of 1-3 buttons" ]
}

Where:

title Required. The main text on the card. 80 characters maximum.
subtitle Optional. Additional text. 80 characters maximum.
item_url Optional. URL that when clicked takes the user to that location.
image_url Optional. URL to retrieve an image to show on the card:
  • For Facebook Messenger the image should have 1.91:1 ratio. Any images that are not this ratio will be scaled accordingly.
  • For Apple Business Chat, refer to the Apple Developer documentation for details of the required image sizes.
default_action Optional. Defines a generic template for use with bots intended for Facebook Messenger. When tapped, the URL is opened in the Facebook Messenger webview. The object accepts all the Facebook properties for generic templates apart from title.

For more information, see the Facebook Developer documentation.

buttons Required. Array of up to 3 postback buttons. Use an empty array if you do not require any buttons on the card.

Example 1

This card example has three postback buttons:

It's defined like this:
context.upgradeList = 
[
  { 
     "title": "You are eligible for an upgrade to the latest iPhone.", 
     "item_url": "http://zipzapme.com/special-offers", 
     "image_url": "http://zipzapme.com/wp-content/uploads/2016/11/demo-promo-iphone-700x300.jpg", 
     "subtitle": "Would you like to hear more?", 
     "buttons": [ 
		{"title":"Yes, Learn More","payload":"learnMore"}, 
		{"title":"Remind Me Later","payload":"later"}, 
		{"title":"No Thanks","payload":"noThanks"} 
	 ] 
    }
]

Example 2

When tapped, this card's default action takes the user to Facebook:

It's defined like this:

context.upgradeList = 
[
  { 
     "title": "You are eligible for an upgrade to the latest iPhone.", 
     "image_url": "http://zipzapme.com/wp-content/uploads/2016/11/demo-promo-iphone-700x300.jpg", 
     "subtitle": "Tap to learn more", 
     "buttons": [],
     "default_action": {
            "type": "web_url",
            "url": "http://zipzapme.com/special-offers",
            "webview_height_ratio": "tall"
        } 
    }
]