iT邦幫忙

2021 iThome 鐵人賽

DAY 11
6
Modern Web

陪聊_伃時不候 Line Bot 聊天機器人系列 第 11

【Day 11】Button Template 應用 part 2

昨天原本要連同 Confirm buttom 一起講的~,但平均一下每天的文章量,今天再接著講另一個按鈕類型吧!

Confirm Button Template

看中文字就知道我們大概要做的是一個確認按鈕。
所以說,既然是確認,那就只會有兩個選項。如下

if event.message.type == 'text':
    mtext = event.message.text
    if "嗨" in mtext:
        message.append(
            TemplateSendMessage(
                alt_text='Confirm template',
                template=ConfirmTemplate(
                    text='有看懂嗎',
                        actions=[
                        MessageTemplateAction(
                            label='Yes',
                            text='Yes',
                        ),
                        MessageTemplateAction(
                            label='No',
                            text='No',
                        )
                    ]
                )
            )
        )

應該容易看得出差別,就是把 template= 改成 ConfirmTemplate
我們來看看他原本的 json 裡面所有的屬性

{
  "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"
          }
      ]
  }
}

Confirm Template 就沒有所謂的 title(標題)了,他直接就是 text

然後我們上次也有看到,這次有有看到,在 json 裡面有一個 part 是這個:

{
  "type": "message",
  "label": "Yes",
  "text": "yes"
}

action的 type 也分成很多種,基本上用 Message 就已足夠應付大部分了。
其餘的部分:labeltext 都跟昨天講的一樣。

Carousel Button template

這是一個可以橫向選擇的多排按鈕!

先來看看這個 json

{
  "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"
  }
}

他可以製作像以下這樣的橫向移動的 按鈕模板

其餘方式等等都語一般的按鈕模板一樣。
但這裡要注意的是:橫向按鈕模板最多10個;按鈕選像這裡最多只能有3個。


再來 Button 最後我們剩下了 ImageMap 還沒講到,下集待續,如果有甚麼特別想知道的也可以留言~。


上一篇
【Day 10】Button Template 應用
下一篇
【Day 12】Rich Menu 主選單
系列文
陪聊_伃時不候 Line Bot 聊天機器人30

尚未有邦友留言

立即登入留言