iT邦幫忙

0

用 Python 暢玩 Line bot - 17:Template message

  • 分享至 

  • xImage
  •  

Line bot API 中有一種只有 line bot 專屬的訊息種類,叫做 Template message,他跟 Flex message 有類似的功能,不過最不一樣的地方是,電腦無法看到 Template message,如圖一。也因此,大多數人會選擇使用 Flex message 而非 Template message。

(圖一,從電腦上看 Template message)
https://ithelp.ithome.com.tw/upload/images/20211021/201425644DW7qRBeIp.png

Template message 中有四種類型的樣式可以選擇,分別為 Buttons、Confirm、Carousel、ImageCarouselTemplate。下面程式碼為使用 Template message 的範例

line_bot_api.reply_message(event.reply_token, TemplateSendMessage(
    thumbnail_image_url=<image uil>,
    alt_text=<template title>,
    template=<template type>()
))

其他參數可以參照 Messaging API reference

下面來介紹不同種類的 template以及其特色。

template type

1. Buttons template

該 template 能有4個 action

buttons_template_message = TemplateSendMessage(
    alt_text='Buttons template',
    template=ButtonsTemplate(
        title='Menu',
        text='請選擇地區',
        actions=[
            MessageTemplateAction(
                label='選項一',
                text='option one',
            ),
            MessageTemplateAction(
                label='option two',
                text='選項二',
            )
        ]
    )
)
line_bot_api.reply_message(event.reply_token, buttons_template_message)

(圖二)
https://ithelp.ithome.com.tw/upload/images/20211021/20142564nW59XNrtAQ.png

2. Confirm template

該 template 只能有兩個 action,通常用來用在使用者只有兩個選擇的時候。

confirm_template_message = TemplateSendMessage(
    alt_text='Confirm template',
    template=ConfirmTemplate(
        text='Are you sure?',
        actions=[
            PostbackAction(
                label='postback',
                display_text='postback text',
                data='action=buy&itemid=1'
            ),
            MessageAction(
                label='message',
                text='message text'
            )
        ]
    )
)

line_bot_api.reply_message(event.reply_token, confirm_template_message)

3. Carousel template

該 template 能最多有五個區塊,每個區塊內最多三個 action,這些區塊會呈橫向排列,並可以滑動。

(圖三)
https://ithelp.ithome.com.tw/upload/images/20211021/20142564MHbuUd9yzN.png

carousel_template_message = TemplateSendMessage(
    alt_text='Carousel template',
    template=CarouselTemplate(
        columns=[
            CarouselColumn(
                thumbnail_image_url='https://example.com/item1.jpg',
                title='this is menu1',
                text='description1',
                actions=[
                    PostbackAction(
                        label='postback1',
                        display_text='postback text1',
                        data='action=buy&itemid=1'
                    ),
                    MessageAction(
                        label='message1',
                        text='message text1'
                    ),
                    URIAction(
                        label='uri1',
                        uri='http://example.com/1'
                    )
                ]
            ),
            CarouselColumn(
                thumbnail_image_url='https://example.com/item2.jpg',
                title='this is menu2',
                text='description2',
                actions=[
                    PostbackAction(
                        label='postback2',
                        display_text='postback text2',
                        data='action=buy&itemid=2'
                    ),
                    MessageAction(
                        label='message2',
                        text='message text2'
                    ),
                    URIAction(
                        label='uri2',
                        uri='http://example.com/2'
                    )
                ]
            )
        ]
    )
)

line_bot_api.reply_message(event.reply_token, carousel_template_message)

4. ImageCarousel Template

該 template 和 Carousel template 相似,不同的地方是每個區中沒有選項,而是顯示一張大圖。
(圖四)
https://ithelp.ithome.com.tw/upload/images/20211021/20142564mpjaIZUpRQ.png

image_carousel_template_message = TemplateSendMessage(
    alt_text='ImageCarousel template',
    template=ImageCarouselTemplate(
        columns=[
            ImageCarouselColumn(
                image_url='https://example.com/item1.jpg',
                action=PostbackAction(
                    label='postback1',
                    display_text='postback text1',
                    data='action=buy&itemid=1'
                )
            ),
            ImageCarouselColumn(
                image_url='https://example.com/item2.jpg',
                action=PostbackAction(
                    label='postback2',
                    display_text='postback text2',
                    data='action=buy&itemid=2'
                )
            )
        ]
    )
)

line_bot_api.reply_message(event.reply_token, image_carousel_template_message)

Action

actions 是用來決定下面 button 分別的功能,而每一個 action 有三種功能可以選:postback、message、uri。action 的參數 label 為 button 上所顯示的文字。text 為按下按鈕後,會讓使用者回傳的文字。

Postback

當使用者按了這個 button 時,Line Server 會傳一個 postback event 給我們,裡面包含著 data 參數中設定的字串,可以透過 event.postback.postback.data 取出 data。
Postback 可以不給 text 參數

Message

text 參數在 Message Action 是必須的,也不能給空字串
如果希望這個按鍵,只有顯示但不會由使用者傳文字過來,可以給一串空白 (e.g. ' ')

URI

使用者按下這個按鍵就會用 Line 的瀏覽器跳到外部網頁


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言