Try   HackMD

AI LINE Bot練功坊-L11 Quick Reply

匯入函式庫

from linebot.v3.messaging import (
    QuickReply,
    QuickReplyItem,
    PostbackAction,
    MessageAction,
    DatetimePickerAction,
    CameraAction,
    CameraRollAction,
    LocationAction
)

Quick Reply

什麼是 Quick Reply?

Quick Reply 是 Line Bot 中的一種功能,支援一對一和一對多聊天,可以讓使用者快速回覆訊息,而不必手動輸入文字。它通常以按鈕的形式呈現,讓使用者可以直接點擊回覆

Quick Reply的優點

Quick Reply 可以提高使用者體驗,使互動更加流暢和便捷

設定 Quick Reply

建立Quick Reply方法簡單,僅需要依據所設定的數量在text message object中新增多個quickReply的物件items

*注意:至多使用13個items

  1. 建立一個文字訊息物件來詢問使用者的請求。
messages=[TextMessage(text='請選擇項目')]

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  1. 新增多個quickReply的物件items
messages=[TextMessage(
    text='請選擇項目',
    quick_reply=QuickReply(
        items=[
            QuickReplyItem(
                action=PostbackAction(
                    label="Postback",
                    data="postback",
                    display_text="postback"
                )
            ),
            QuickReplyItem(
                action=MessageAction(
                    label="Message",
                    text="message"
                )
            ),
            QuickReplyItem(
                action=DatetimePickerAction(
                    label="Date Picker",
                    data="datetimepicker",
                    mode="date"
                )
            ),
        ]
    )
)]

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  1. 皆可以透過imageUrl設定按鈕圖示,而部分action若沒有設定imageUrl會顯示預設圖示。圖示有格式限制,請參考開發者文件
messages=[TextMessage(
    text='Quick reply',
    quick_reply=QuickReply(
        items=[
            QuickReplyItem(
                action=PostbackAction(
                    label="Postback",
                    data="postback",
                    display_text="postback"
                ),
                image_url=postback_icon
            ),
            QuickReplyItem(
                action=MessageAction(
                    label="Message",
                    text="message"
                )
                image_url=message_icon
            ),
            QuickReplyItem(
                action=DatetimePickerAction(
                    label="Date Picker",
                    data="datetimepicker",
                    mode="date"
                ),
                image_url=date_icon
            )
        ]
    )
)]

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  1. 選擇按鈕要使用的action
  • 只有手機才可以使用

    • Camera action 開啟相機
    • Location action 開啟選單
  • 其他訊息都可以通用

    • Postback action
    • Message action
    • URI action
    • Datetime picker action
    • Clipboard action
    • Camera roll action 開啟相簿

Datetime picker action

可以設定以下幾個參數

  1. initial
    設定進入選擇日期畫面的初始日期時間
QuickReplyItem(
    action=DatetimePickerAction(
        label="Datetime Picker",
        data="datetimepicker",
        mode="datetime",
        initial="2024-01-01T00:00"
    ),
    image_url=datetime_icon
),

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  1. max
    設定選擇的最大日期時間

  2. min
    設定選擇的最小日期時間

  3. mode

    1. date(日期)
      mode 設定成 date
    ​​​​QuickReplyItem(
    ​​​​    action=DatetimePickerAction(
    ​​​​        label="Date Picker",
    ​​​​        data="datetimepicker",
    ​​​​        mode="date"
    ​​​​    )
    ​​​​)
    

    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

    1. time(時間)
      mode 設定成 time
    ​​​​QuickReplyItem(
    ​​​​    action=DatetimePickerAction(
    ​​​​        label="Time Picker",
    ​​​​        data="datetimepicker",
    ​​​​        mode="time"
    ​​​​    )
    ​​​​)
    

    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

    1. datetime(日期與時間)
      mode 設定成 datetime
    ​​​​QuickReplyItem(
    ​​​​    action=DatetimePickerAction(
    ​​​​        label="Datetime Picker",
    ​​​​        data="datetimepicker",
    ​​​​        mode="datetime"
    ​​​​    )
    ​​​​)
    

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

postback_icon = request.url_root + 'static/postback.png'
postback_icon = postback_icon.replace("http", "https")
message_icon = request.url_root + 'static/message.png'
message_icon = message_icon.replace("http", "https")
datetime_icon = request.url_root + 'static/calendar.png'
datetime_icon = datetime_icon.replace("http", "https")
date_icon = request.url_root + 'static/calendar.png'
date_icon = date_icon.replace("http", "https")
time_icon = request.url_root + 'static/time.png'
time_icon = time_icon.replace("http", "https")
line_bot_api.reply_message(
    ReplyMessageRequest(
        reply_token=event.reply_token,
        messages=[TextMessage(
            text='請選擇以下其中一個選項',
            quick_reply=QuickReply(
                items=[
                    QuickReplyItem(
                        action=PostbackAction(
                            label="Postback",
                            data="postback",
                            display_text="postback"
                        ),
                        image_url=postback_icon
                    ),
                    QuickReplyItem(
                        action=MessageAction(
                            label="Message",
                            text="message"
                        ),
                        image_url=message_icon
                    ),
                    QuickReplyItem(
                        action=DatetimePickerAction(
                            label="Date Picker",
                            data="datetimepicker",
                            mode="date"
                        ),
                        image_url=date_icon
                    ),
                    QuickReplyItem(
                        action=DatetimePickerAction(
                            label="Time Picker",
                            data="datetimepicker",
                            mode="time"
                        ),
                        image_url=time_icon
                    ),
                    QuickReplyItem(
                        action=DatetimePickerAction(
                            label="Datetime Picker",
                            data="datetimepicker",
                            mode="datetime"
                        ),
                        image_url=datetime_icon
                    ),
                    QuickReplyItem(
                        action=CameraAction(label="Camera")
                    ),
                    QuickReplyItem(
                        action=CameraRollAction(label="Camera Roll")
                    ),
                    QuickReplyItem(
                        action=LocationAction(label="Location")
                    )
                ]
            )
        )]
    )
)

image


Reference:https://developers.line.biz/en/reference/messaging-api/#quick-reply

Youtube 課程影片

關於我們

image 國立臺北教育大學 教育大數據微學程

先修微課程

🤖 AI LineBot 練功坊系列課程
從入門到精通,學習如何開發並應用 LINE Bot,讓你輕鬆掌握最前沿的聊天機器人技術。

👨‍💻 Python 初學小教室
針對零基礎學員設計,循序漸進地教授 Python 基本語法及實作技巧,幫助你快速上手。

📊 統計學小教室
系統講解統計學理論及其應用,適合想要提升數據分析能力的學習者。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →
Facebook
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →
Instagram
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →
Threads
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →
YouTube
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →
Line官方帳號

相關教材連結

◀◀◀ L10 Message Type(4) Imagemap Message ◀◀◀
▶▶▶ L12 Rich Menu ▶▶▶