iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
2
自我挑戰組

LINE BOT 新手村30日攻略系列 第 8

Day08 進階訊息傳送2 - Template Messages

在上一篇介紹完各種 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
繼續加油囉~


上一篇
Day07 進階訊息傳送1 - Actions
下一篇
Day09 進階訊息傳送3 - Flex Message
系列文
LINE BOT 新手村30日攻略30

尚未有邦友留言

立即登入留言