在上一篇介紹完各種 Actions 之後，今天終於可以正式來說明更有趣的訊息了!
在這裡，你可以學到讓機器人回覆內容大升級的方式
準備好了嗎w

今天要介紹到的內容有

• Template Message
  • Buttons
  • Confirm
  • Carousel
  • Image carousel

Template Message

Template Message 是一種已經事先模板化的訊息
我們可以透過調整各項參數來製作客製化的訊息
Template Message 有個特性是只能在手機上查看訊息，在電腦版只會看到一串文字

接下來的參數模板基本上都很長一串，我會花多一點時間解釋各個參數的效果
Action 的部分可以參考上一篇所說明的內容

Buttons

官方文檔
練習模板Github連結
Buttons 是一種包含按鈕的訊息，最多只能有4個按鈕

大致上包含以下幾種參數

• altText
  在電腦版查看訊息時會收到的文字內容

• template.type (Required)
  指定選擇的模板訊息

• template.thumbnailImageUrl (Optional)
  在訊息的最上方顯示的圖片

• template.imageAspectRatio (Optional)
  圖片顯示的比例，有兩種選項

  • rectangle 1.51:1 (Default)

    

  • square 1:1

    

• template.imageSize (Optional)
  是否顯示完整圖片，有兩種選項

  • cover (Default)
    只顯示部分圖片區域，但填滿整個圖片空間

    

  • contain
    顯示全部圖片，但不保證填滿圖片空間

    

• template.imageBackgroundColor (Optional)
  圖片的背景顏色，以RGB的16進位表示
  如果圖片沒有覆蓋整個 image area，就會以這裡設定的顏色為背景顏色

• template.title (Optional)
  顯示在文字區域最上方的粗體標題文字

• template.text (Required)
  顯示在文字區域的一般文字

• template.defaultAction (Optional)
  在 圖片/標題/文字 被點擊時產生的 Action

• templates.actions (Required)
  按鈕區域針對每個按鈕設定被點擊所產生的 Action，最多4個

{
  "type": "template",
  "altText": "This is a buttons template",
  "template": {
      "type": "buttons",
      "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
      "imageAspectRatio": "rectangle",
      "imageSize": "cover",
      "imageBackgroundColor": "#FFFFFF",
      "title": "Menu",
      "text": "Please select",
      "defaultAction": {
          "type": "uri",
          "label": "View detail",
          "uri": "http://example.com/page/123"
      },
      "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"
          }
      ]
  }
}

Confirm

官方文檔
練習模板Github連結
簡短提問的訊息模板，包含兩個按鈕選項

大致包含以下幾個參數

• altText
  在電腦版查看訊息時會收到的文字內容
• template.text (Required)
  顯示在最上方的一般文字
• template.actions (Required)
  必須要設定兩個 Action，分別表示兩個按鈕的 Action

{
  "type": "template",
  "altText": "this is a confirm template",
  "template": {
      "type": "confirm",
      "text": "Are you sure?",
      "actions": [
          {
            "type": "message",
            "label": "Yes",
            "text": "yes"
          },
          {
            "type": "message",
            "label": "No",
            "text": "no"
          }
      ]
  }
}

Carousel

官方文檔
練習模板Github連結
包含很多類似 Buttons 模板的訊息，可以最多包含10個

大致包含以下幾個參數

• altText
  在電腦版查看訊息時會收到的文字內容
• template.columns (Required)
  包含類似 Buttons 模板的訊息陣列
• column object
  • thumbnailImageUrl (Optional)
    在訊息的最上方顯示的圖片
  • imageBackgroundColor (Optional)
    圖片的背景顏色，以 RGB 的16進位表示
    如果圖片沒有覆蓋整個 image area，就會以這裡設定的顏色為背景顏色
  • title (Optional)
    顯示在文字區域最上方的粗體標題文字
  • text (Required)
    顯示在文字區域的一般文字
  • defaultAction (Optional)
    在 圖片/標題/文字 被點擊時產生的 Action
  • actions (Required)
    按鈕區域針對每個按鈕設定被點擊所產生的 Action，最多3個

{
  "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"
  }
}

Image carousel

官方文檔
練習模板Github連結
只有圖片的 Carousel 訊息模板w

大概包含以下幾個參數

• altText
  在電腦版查看訊息時會收到的文字內容
• column object
  • imageUrl
    顯示的圖片
  • action
    當圖片被點擊時所產生的 Action

{
  "type": "template",
  "altText": "this is a image carousel template",
  "template": {
      "type": "image_carousel",
      "columns": [
          {
            "imageUrl": "https://example.com/bot/images/item1.jpg",
            "action": {
              "type": "postback",
              "label": "Buy",
              "data": "action=buy&itemid=111"
            }
          },
          {
            "imageUrl": "https://example.com/bot/images/item2.jpg",
            "action": {
              "type": "message",
              "label": "Yes",
              "text": "yes"
            }
          },
          {
            "imageUrl": "https://example.com/bot/images/item3.jpg",
            "action": {
              "type": "uri",
              "label": "View detail",
              "uri": "http://example.com/page/222"
            }
          }
      ]
  }
}

後記

Template Message真的很有趣，包含很多新奇的訊息類別
當初在實作口罩查詢系統，後來也是改採用Carousel輸出各藥局資訊
是個非常實用的訊息類別，而且客製化程度也高

在前一篇提到了很多Actions，現在大家學會Template Message之後就可以實際上來試試看了
也許在嘗試的過程中會發現新大陸喔w

本來打算在這一篇也把Imagemap也一起講，沒想到它是真的麻煩
考慮到篇幅，把Flex和Imagemap都分別拉出去講了
實作也許會晚點開始，但是一定會開始的w
各位客官不用擔心w

下一篇會提到可客製化程度又更高的訊息類別Flex Message
繼續加油囉~