iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

4

今天要介紹的是 Quick Reply 快速回覆功能。

圖中下方紅框部分就是快速回覆功能,可用在 群組聊天室一般好友,最多支援 13 個按鈕,可橫向滑動。

https://ithelp.ithome.com.tw/upload/images/20200109/20106865i2M85uI9Al.jpg

Quick Reply 用途

  • 用於新手導覽,例如: 常見問題、常用功能。

  • 用於題目選項,例如: 問卷選項、表單選項。

Quick Reply 何時消失

  • 使用者 「點擊按鈕」「回覆訊息」 後,快速回覆選項消失。

  • 如果是在群組或聊天室,則 「第一個人回覆」 後,快速回覆選項消失。

  • 刪除自己或其他人的訊息,可以恢復選項,收回則不行。

  • 如果選項動作是照相機或位置,在沒有完成操作前,選項不會消失。

Quick Reply 結構

快速回覆功能可以依附在所有的訊息格式後面,例如: 文字、圖片、位置、FlexMessage、等等...。

每個選項由 「imageUrl 圖標」「action 動作」 組成,

label 為按鈕上顯示的文字,text 為出現在聊天視窗中的文字。

JSON 結構:

{
  "type": "text",
  "text": "你居住在台灣的哪個縣市?",
  "quickReply": {
    "items": [
      {
        "type": "action",
        "imageUrl": "https://xxx/image1.png",
        "action": {
          "type": "message",
          "label": "A.台北",
          "text": "台北"
        }
      },
      {
        "type": "action",
        "imageUrl": "https://xxx/image2.png",
        "action": {
          "type": "message",
          "label": "B.台中",
          "text": "台中"
        }
      },
      {
        "type": "action",
        "action": {
          "type": "location",
          "label": "選擇地點"
        }
      }
    ]
  }
}

參數說明:

  • items: #快速回覆選項 陣列,最多可以包含 13 個項目。

#快速回覆選項

  • type: 類型,action

  • imageUrl: 按鈕的圖標網址。
    需 httpsPNG長寬比 1:1最大 1MB
    ※ 如果未設定 imageUrl,且 actioncameracamera rolllocation 其中之一,則會顯示預設圖標。

  • action: 動作,詳細說明可以參考 action-objects

    • Postback action
    • Message action
    • Datetime picker action
    • Camera action
    • Camera roll action
    • Location action

來源官方文件: #quick-reply


程式部分

完整程式可以參考第二篇內容。
[Day02] 使用 C# 建立 LINE Bot 聊天機器人 - LineMessagingApi

程式碼:

var message = new TextMessage("你居住在台灣的哪個縣市?");
message.QuickReply = new QuickReply
{
    Items = new List<QuickReplyButtonObject>
    {
        new QuickReplyButtonObject(
            new MessageTemplateAction("A.台北", "台北"),
            imageUrl: "https://xxx/image1.png"),
        new QuickReplyButtonObject(
            new MessageTemplateAction("B.台中", "台中"),
            imageUrl: "https://xxx/image2.png"),
        new QuickReplyButtonObject(
            new LocationTemplateAction("選擇地點"))
    }
};
await _messagingClient.ReplyMessageAsync(ev.ReplyToken, 
    new List<ISendMessage> { message });

結果

https://ithelp.ithome.com.tw/upload/images/20200109/20106865CvgQP9fIjS.jpg

也可以放在 Flex Message 後面。

https://ithelp.ithome.com.tw/upload/images/20200109/20106865nmA7aIIoOT.jpg

結語

Quick Reply 對使用者體驗蠻加分的,有一些選項可以選,使用者比較不會不知所措,不知道下一步該怎麼做。現在快速回覆 「不支援電腦版」,不知道未來會如何,期待電腦版支援的那一天趕快到來。

今天就到這裡,感謝大家觀看。 (´・ω・`)


上一篇
[Day11] 使用 Flex Message 重製模板訊息 - Template Message
下一篇
[Day13] LINE Bot 的訊息格式 - Message Types
系列文
Line Bot 心得分享 LineMessagingApi + LUIS + BotFramework27

尚未有邦友留言

立即登入留言