# 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                                                                                                                                                                                                                                                                                                                                                                    | <ul><li>Max character limit: 40</li></ul>                                                                                        |
| text                 | true     | String | Message Text                                                                                                                                                                                                                                                                                                                                                             | <ul><li>Max character limit: 160 (no image or title) </li><li>Max character limit: 60 (message with an image or title)</li></ul> |
| actions              | true     | Array  | The actions linked to the button                                                                                                                                                                                                                                                                                                                                         | <ul><li>Max objects: 4</li></ul>                                                                                                 |

```
// 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)                                                                                                                                                                                                                                                                                                                                                                 | <ul><li>Max objects: 10</li></ul> |
| 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                                              | <ul><li>Max character limit: 40</li></ul>                                                                                        |
| text                 | true     | String | Message Text                                       | <ul><li>Max character limit: 160 (no image or title) </li><li>Max character limit: 60 (message with an image or title)</li></ul> |
| actions              | true     | Array  | The actions linked to the button                   | <ul><li>Max objects: 3</li></ul>                                                                                                 |

```
// 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"
  }
}
```