JSON format for cards

EngageOne™ Communicate has a Card interaction that can contain a carousel 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).

Example of card

The JSON format of a card is as follows:

{
	"title": "required, string",
	"subtitle": "string",
        "item_url": "URL string",
	"image_url": "Image URL",
	"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.
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:

Card example with three postback buttons

It is 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:

Example of card's default action

It is 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": [],
  }
]