DAY29 linebot message api-Template 介绍-2

Buttons template

message = {
  "type": "template",
  "altText": "在不支援显示样板的地方显示的文字",
  "template": {
    "type": "buttons",
    "text": "标题文字",
    "actions": [
      {
        "type": "message",
        "label": "第一个按钮",
        "text": "1"
      },
      {
        "type": "message",
        "label": "第二个按钮",
        "text": "2"
      },
      {
        "type": "message",
        "label": "第三个按钮",
        "text": "3"
      },
      {
        "type": "message",
        "label": "第四个按钮",
        "text": "4"
      }
    ]
  }
}

跟 Confirm 不同的地方在於，Button 最少可以只放一个按钮。

在这边有几个比较特别的 type 分别是 postback、message 与 uri

以下的 postback 在使用者按下的时候可以用 event postback 接收这个资讯来做後续处理

{
   "type":"postback",
   "label":"Buy",
   "data":"action=buy&itemid=111",
   "text":"Buy"
}

以下的 message 代表使用者按下去会自动变成输入文字模式，而 label 通常与 text 设定一样就可以了

{
  type: 'message',
  label: 'HOWHOW铁人赛',
  text: 'HOWHOW铁人赛',
}

以下的 uri 代表使用者按下後会导入 webview

{
   "type": "action",
   "action": {
         "type": "uri",
         "label": "Menu",
         "uri": "https://example.com/menu"
   }
}

Carousel template

Carousel template可用的型态和Buttons Template一样
Carousel template就像很多个Buttons Template，一次最多可以有10则

message = {
  "type": "template",
  "altText": "this is a carousel template",
  "template": {
    "type": "carousel",
    "columns": [
      {
        "text": "标题 1",
        "actions": [
          {
            "type": "message",
            "label": "buttom 1",
            "text": "1"
          }
        ]
      },
      {
        "text": "标题 2",
        "actions": [
          {
            "type": "message",
            "label": "buttom 2",
            "text": "2"
          }
        ]
      }
    ]
  }
}

columns
其实跟 Buttons 差不多，把部分内容搬移到 columns 然後多放几个，就可以作出 Carousel 了。
最多可以放 10 个 column，也可以只放一个 column，只放一个就跟 Buttons 几乎一样了，唯一不同的地方是 Carousel 的按钮最多只能放 3 个。

Image carousel template

message = {

  "type": "template",
  "altText": "this is a image carousel template",
  "template": {
    "type": "image_carousel",
    "columns": [
      {
        "imageUrl": "图片网址",
        "action": {
          "type": "message",
          "label": "第一张图",
          "text": "1"
        }
      },
      {
        "imageUrl": "图片网址",
        "action": {
          "type": "message",
          "label": "第二张图",
          "text": "2"
        }
      }
    ]
  }
}

跟 Carousel 比起来，这个其实还蛮单纯的，他的图片只能是正方形。不过他的 action label 是选填的，不填就不会显示文字在图片上。