Line Messaging API 串接笔记- Quick Reply

前言

目标：掌握 Line Messaging API，客製自动回覆功能，这次串接是参考 Line Messaging API 串接手册
上一篇大致了解了 Line 接收资讯、发送讯息的模式
这次要来试试一个有趣的功能- Quick Reply
Quick Reply Button 可以在群组或是跟人聊天室使用，最多可以设置 13 个按钮

---

Quick Reply

参数说明typeactionimageUrl按钮前面的 iconaction按钮的种类• Postback action(可自带 query string )• Message action (一般文字)• URI action (超连结)• Datetime picker action (选择日期)• Camera action (照相机)• Camera roll action (相簿)• Location action (定位)

用 quick reply api 搭配 reply message 做一个简单的範例

输入「好想出国」action type: message跳出 「欧洲、美洲、亚洲、非洲」 quick reply button
以 php 为範例

if($text == '好想出国') { // 设定接收的 text$Payload = '{    "replyToken":"接收到的 reply token",    "messages":[        {            "type": "text",            "text": "你想去哪呢",             "quickReply": {              "items": [                {                    "type": "action",                    "imageUrl": "",                    "action": {                    "type": "message",                    "label": "欧洲",                    "text": "欧洲"                    }                },                {                    "type": "action",                    "imageUrl": "",                    "action": {                    "type": "message",                    "label": "美洲",                    "text": "美洲"                    }                },                {                    "type": "action",                    "imageUrl": "",                    "action": {                    "type": "message",                    "label": "亚洲",                    "text": "亚洲"                    }                },                {                    "type": "action",                    "imageUrl": "",                    "action": {                    "type": "message",                    "label": "非洲",                    "text": "非洲"                    }                }                                ]            }        }    ]}';$ChannelAccessToken = "你的 access token...";$ch = curl_init();curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/bot/message/reply');curl_setopt($ch, CURLOPT_POST, true);curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($ch, CURLOPT_POSTFIELDS, $Payload);curl_setopt($ch, CURLOPT_HTTPHEADER, [    'Content-Type: application/json',    'Authorization: Bearer ' . $ChannelAccessToken]);$Result = curl_exec($ch);curl_close($ch);}

结果
下面就会出现设定好的四个按钮

如果想要更活泼一点，可以在 imageUrl 加上图片位置
我是找 flaticon 里面有很多 icon 可以选择
找到喜欢的 icon后，複製 icon 的 url 到 imageUrl

加上 icon 看起来更专业了！
tips: 因为 quick reply button 的底色是深色的， icon 选亮一点的颜色会比较明显

URI action & Datetime picker action
可自订超连结

  {        "type": "action",        "imageUrl": "https://cdn-icons.flaticon.com/png/512/3009/premium/3009487.png?token=exp=1654253578~hmac=8e4bdec0483a5d52cbb57429a0ab90fd",        "action": {          "type": "uri",          "label": "Booking.com",          "uri": "https://www.booking.com/index.zh-tw.html"        }      },      {        "type": "action",        "imageUrl": "https://cdn-icons.flaticon.com/png/512/591/premium/591576.png?token=exp=1654253425~hmac=47473b4d4996518f7152a75af54a84ee",        "action": {          "type":"datetimepicker",          "label":"Select date",          "data":"storeId=12345",          "mode":"datetime",          "initial":"2017-12-25t00:00",          "max":"2018-01-24t23:59",          "min":"2017-12-25t00:00"        }      },

按了 Booking.com之后就会自动跳到 https://www.booking.com/index.zh-tw.html 的页面按了 Select date 就会跳出日期的选单

Camera action & Camera roll action & Location action

 {        "type": "action",        "imageUrl": "https://cdn-icons.flaticon.com/png/512/3687/premium/3687416.png?token=exp=1654253458~hmac=f401c0aa854ecae564eaf9fe93508cbb",        "action": {          "type":"camera",          "label":"Camera"        }      },      {        "type": "action",        "imageUrl": "https://cdn-icons-png.flaticon.com/512/1038/1038100.png",        "action": {          "type": "cameraRoll",          "label":"相簿"        }       },      {        "type": "action",        "imageUrl": "https://cdn-icons.flaticon.com/png/512/186/premium/186250.png?token=exp=1654253531~hmac=93516209eecc1be894ee26a617eef96f",        "action": {          "type":"location",          "label":"地点"        }       }

按了 Camera 就会跳出 Line 的相机按了相簿会跳出相簿按了地点会跳出 Line 地图

---

小小心得

这好像是 Line Messaging API 才有的功能，action 的种类有很多种，显示的名称跟 icon 都可以自行设定，设定很简单也很弹性！

---

参考资料：
Using quick replies
Quick reply
flaticon