Template

Here is the schema for template messages: at the moment we support Buttons and Carousel templates.

Button Template

Field	required	type	description	Restrictions
type	true	String	buttons
thumbnailImageUrl	false	String	Image URL (Max character limit: 1,000)
imageAspectRatio	false	String	Aspect ratio of the image. One of: rectangle: 1.51:1 square: 1:1 (Default: rectangle)
imageSize	false	String	Size of the image. One of: cover: The image fills the entire image area. Parts of the image that do not fit in the area are not displayed. contain: The entire image is displayed in the image area. A background is displayed in the unused areas to the left and right of vertical images and in the areas above and below horizontal images. (Default: cover)
imageBackgroundColor	false	String	Background color of the image. (Default:`#FFFFFF`)
title	false	String	Title	Max character limit: 40
text	true	String	Message Text	Max character limit: 160 (no image or title) Max character limit: 60 (message with an image or title)
actions	true	Array	The actions linked to the button	Max objects: 4

// Example

{
  "type": "template",
  "template": {
      "type": "buttons",
      "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
      "imageAspectRatio": "rectangle",
      "imageSize": "cover",
      "imageBackgroundColor": "#FFFFFF",
      "title": "Menu",
      "text": "Please select",
      "actions": [
          {
            "type": "postback",
            "label": "Buy",
            "data": "action=buy&itemid=123"
          },
          {
            "type": "postback",
            "label": "Add to cart",
            "data": "action=add&itemid=123"
          },
          {
            "type": "uri",
            "label": "View detail",
            "uri": "http://example.com/page/123"
          }
      ]
  }
}

Carousel Template

Field	required	type	description	Restrictions
type	true	String	carousel
columns	true	Array	Array of columns (see below)	Max objects: 10
imageAspectRatio	false	String	Aspect ratio of the image. One of: rectangle: 1.51:1 square: 1:1. Applies to all columns. (Default: rectangle)
imageSize	false	String	Size of the image. One of: cover: The image fills the entire image area. Parts of the image that do not fit in the area are not displayed. contain: The entire image is displayed in the image area. A background is displayed in the unused areas to the left and right of vertical images and in the areas above and below horizontal images. Applies to all columns. (Default: cover)

Carousel Template - Columns

Field	required	type	description	Restrictions
thumbnailImageUrl	false	String	Image URL (Max character limit: 1,000)
imageBackgroundColor	false	String	Background color of the image. (Default:`#FFFFFF`)
title	false	String	Title	Max character limit: 40
text	true	String	Message Text	Max character limit: 160 (no image or title) Max character limit: 60 (message with an image or title)
actions	true	Array	The actions linked to the button	Max objects: 3

// Example

{
  "type": "template",
  "altText": "this is a carousel template",
  "template": {
      "type": "carousel",
      "columns": [
          {
            "thumbnailImageUrl": "https://example.com/bot/images/item1.jpg",
            "imageBackgroundColor": "#FFFFFF",
            "title": "this is menu",
            "text": "description",
            "defaultAction": {
                "type": "uri",
                "label": "View detail",
                "uri": "http://example.com/page/123"
            },
            "actions": [
                {
                    "type": "postback",
                    "label": "Buy",
                    "data": "action=buy&itemid=111"
                },
                {
                    "type": "postback",
                    "label": "Add to cart",
                    "data": "action=add&itemid=111"
                },
                {
                    "type": "uri",
                    "label": "View detail",
                    "uri": "http://example.com/page/111"
                }
            ]
          },
          {
            "thumbnailImageUrl": "https://example.com/bot/images/item2.jpg",
            "imageBackgroundColor": "#000000",
            "title": "this is menu",
            "text": "description",
            "defaultAction": {
                "type": "uri",
                "label": "View detail",
                "uri": "http://example.com/page/222"
            },
            "actions": [
                {
                    "type": "postback",
                    "label": "Buy",
                    "data": "action=buy&itemid=222"
                },
                {
                    "type": "postback",
                    "label": "Add to cart",
                    "data": "action=add&itemid=222"
                },
                {
                    "type": "uri",
                    "label": "View detail",
                    "uri": "http://example.com/page/222"
                }
            ]
          }
      ],
      "imageAspectRatio": "rectangle",
      "imageSize": "cover"
  }
}

Was this page helpful?