AI LINE Bot練功坊-L12 Rich Menu

什麼是 Rich Menu？

Rich Menu 是位於聊天室畫面下方的選單，可以讓使用者在聊天視窗中直接點擊按鈕，進行操作或獲取資訊。

Rich Menu的優點

Rich Menu，這個版位有絕佳的曝光度，每次用戶不管是因為推播或其他互動打開您的官方帳號時，都能看到這個版位。有了圖文選單區塊，不只曝光，更能幫您24小時導流做互動，讓您的服務不間斷！

設定 Rich Menu？

要建立圖文選單有兩種方式，第一種進入 Line@ 後台有功能可以使用，第二種透過 Messaging API 的程式端去建立

Line官方帳號管理器

1. 在主頁裡點選「圖文選單」，再點選建立即可新增圖文選單
   

   
   

2. 設定頁面各個項目，設定完成後點選「儲存」

• 顯示設定：

  • 設定標題名稱：管理圖文選單，此設定不會對用戶顯示
    

  • 可以設定在用戶裝置上的圖文選單以及顯示時間

  • 選單欄中顯示的文字設定欄

  • 預設顯示方式：設定顯示時，當用戶進入聊天室，會直接顯示圖文選單；反之，設定隱藏時，用戶需要點選選單欄才會顯示圖文選單

• 內容設定：

  • 選擇版型
    Line官方有給參考的大小範例，可以參考使用

  • 設定圖文選單的圖片
    

    選擇剛剛下載好的模板

    按下套用
    

  • 根據模板的對應部分中設定動作
    

    
    選擇文字
    
    
    並在下方輸入文字內容
    

Reference：https://tw.linebiz.com/manual/line-official-account/oa-manager-richmenu/

Ｍessaging API

• 更加客製化
• 可以在 rich menu 設定 postback action 和 datetime picker
• 可以設定切換 rich menu 的標籤

在開始之前，我們要先準備 rich menu 的圖片(下圖為範例圖片，可以到前面的設計規範下載)

使用 Linebot Designer 設計圖文選單，並複製產生的 json 檔

注意事項

• 每個 richmenu 最多可以設置20個可點選區塊
• 可以設置多個 richmenu 可按照情境作切換
• 最多可以同時有1000個 richmenu
• 可以為不同的 User 指定不同的 richmenu

使用的套件

from linebot.v3.messaging import (
    MessagingApi,
    MessagingApiBlob,
    RichMenuSize,
    RichMenuRequest,
    RichMenuArea,
    RichMenuBounds,
    MessageAction
)

使用物件的方式

1. 利用 RichMenuArea 和 RichMenuBounds 兩個套件去建立 action 範圍的物件
   (物件的範圍根據 Linebot Designer 設計出的範圍填寫)

areas = [
    RichMenuArea(
        bounds=RichMenuBounds(
            x=0,
            y=0,
            width=833,
            height=843
        ),
        action=MessageAction(text='A')
    ),
    RichMenuArea(
        bounds=RichMenuBounds(
            x=834,
            y=0,
            width=833,
            height=843
        ),
        action=MessageAction(text='B')
    ),
    RichMenuArea(
        bounds=RichMenuBounds(
            x=1663,
            y=0,
            width=834,
            height=843
        ),
        action=MessageAction(text='C')
    ),
    RichMenuArea(
        bounds=RichMenuBounds(
            x=0,
            y=843,
            width=833,
            height=843
        ),
        action=MessageAction(text='D')
    ),
    RichMenuArea(
        bounds=RichMenuBounds(
            x=834,
            y=843,
            width=833,
            height=843
        ),
        action=MessageAction(text='E')
    ),
    RichMenuArea(
        bounds=RichMenuBounds(
            x=1662,
            y=843,
            width=834,
            height=843
        ),
        action=MessageAction(text='F')
    )
]

2. 利用 RichMenuRequest 去製作整個 richmenu 的基本設定
   • richmenu 圖片的大小
   • 圖文選單的名稱
   • 圖文選單縮小欄位的文字標籤
   • areas 的物件(action 的設定)

rich_menu_to_create = RichMenuRequest(
    size=RichMenuSize(
        width=2500,
        height=1686,
    ),
    selected=True,
    name="圖文選單1",
    chat_bar_text="查看更多資訊",
    areas=areas
)

3. 取得 richmenu id

rich_menu_a_id = line_bot_api.create_rich_menu(
    rich_menu_request=rich_menu_to_create
).rich_menu_id

4. 設定 richmenu 到 Linebot 上

with open('./public/richmenu-a.png', 'rb') as image:
    line_bot_blob_api.set_rich_menu_image(
        rich_menu_id=rich_menu_a_id,
        body=bytearray(image.read()),
        _headers={'Content-Type': 'image/png'}
    )

完整的程式碼 :

def create_rich_menu_1():
    with ApiClient(configuration) as api_client:
        line_bot_api = MessagingApi(api_client)
        line_bot_blob_api = MessagingApiBlob(api_client)

        areas = [
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=0,
                    y=0,
                    width=833,
                    height=843
                ),
                action=MessageAction(text='A')
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=834,
                    y=0,
                    width=833,
                    height=843
                ),
                action=MessageAction(text='B')
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=1663,
                    y=0,
                    width=834,
                    height=843
                ),
                action=MessageAction(text='C')
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=0,
                    y=843,
                    width=833,
                    height=843
                ),
                action=MessageAction(text='D')
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=834,
                    y=843,
                    width=833,
                    height=843
                ),
                action=MessageAction(text='E')
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=1662,
                    y=843,
                    width=834,
                    height=843
                ),
                action=MessageAction(text='F')
            )
        ]

        rich_menu_to_create = RichMenuRequest(
            size=RichMenuSize(
                width=2500,
                height=1686,
            ),
            selected=True,
            name="圖文選單1",
            chat_bar_text="查看更多資訊",
            areas=areas
        )

        rich_menu_id = line_bot_api.create_rich_menu(
            rich_menu_request=rich_menu_to_create
        ).rich_menu_id

        with open('./public/richmenu-a.png', 'rb') as image:
            line_bot_blob_api.set_rich_menu_image(
                rich_menu_id=rich_menu_id,
                body=bytearray(image.read()),
                _headers={'Content-Type': 'image/png'}
            )

        line_bot_api.set_default_rich_menu(rich_menu_id)

使用json的方式

1. 複製前面用 Linebot Designer 設計好的 json，並放在 body 中
   

   headers放的是 CHANNEL_ACCESS_TOKEN

headers = {
    'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    'Content-Type': 'application/json'
}
body = {
    "size": {
        "width": 2500,
        "height": 1686
    },
    "selected": True,
    "name": "圖文選單 1",
    "chatBarText": "查看更多資訊",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 833,
                "height": 843
            },
            "action": {
                "type": "message",
                "text": "A"
            }
        },
        {
            "bounds": {
                "x": 834,
                "y": 0,
                "width": 833,
                "height": 843
            },
            "action": {
                "type": "message",
                "text": "B"
            }
        },
        {
            "bounds": {
                "x": 1663,
                "y": 0,
                "width": 834,
                "height": 843
            },
            "action": {
                "type": "message",
                "text": "C"
            }
        },
        {
            "bounds": {
                "x": 0,
                "y": 843,
                "width": 833,
                "height": 843
            },
            "action": {
                "type": "message",
                "text": "D"
            }
        },
        {
            "bounds": {
                "x": 834,
                "y": 843,
                "width": 833,
                "height": 843
            },
            "action": {
                "type": "message",
                "text": "E"
            }
        },
        {
            "bounds": {
                "x": 1662,
                "y": 843,
                "width": 838,
                "height": 843
            },
            "action": {
                "type": "message",
                "text": "F"
            }
        }
    ]
}

2. 取得 richmenu id

response = requests.post(
    'https://api.line.me/v2/bot/richmenu',
    headers=headers,
    data=json.dumps(body).encode('utf-8')
)
response = response.json()
print(response)
rich_menu_id = response["richMenuId"]

3. 上傳 richmenu 圖片

        with open('static/richmenu-1.jpg', 'rb') as image:
            line_bot_blob_api.set_rich_menu_image(
                rich_menu_id=rich_menu_id,
                body=bytearray(image.read()),
                _headers={'Content-Type': 'image/jpeg'}
            )

4. 其他 richmenu 操作

   • 查看所有richmenuID
   ​​​​from linebot.v3.messaging import MessagingApi
   ​​​​# 查看所有的richmenu
   ​​​​line_bot_api = MessagingApi('Channel Access Token')
   ​​​​rich_menu_list = line_bot_api.get_rich_menu_list()
   ​​​​for rich_menu in rich_menu_list:
   ​​​​    print(rich_menu.rich_menu_id)
   

   • 刪除所有richmenuID
   ​​​​from linebot.v3.messaging import MessagingApi
   ​​​​#刪除richmenu
   ​​​​for rich_menu in rich_menu_list:
   ​​​​    line_bot_api = MessagingApi('Channel Access Token')
   ​​​​    line_bot_api.delete_rich_menu(rich_menu.rich_menu_id)
   

完整程式碼

def create_rich_menu_2():
    with ApiClient(configuration) as api_client:
        line_bot_api = MessagingApi(api_client)
        line_bot_blob_api = MessagingApiBlob(api_client)

        # Create rich menu
        headers = {
            'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
            'Content-Type': 'application/json'
        }
        body = {
            "size": {
                "width": 2500,
                "height": 1686
            },
            "selected": True,
            "name": "圖文選單 1",
            "chatBarText": "查看更多資訊",
            "areas": [
                {
                    "bounds": {
                        "x": 0,
                        "y": 0,
                        "width": 833,
                        "height": 843
                    },
                    "action": {
                        "type": "message",
                        "text": "A"
                    }
                },
                {
                    "bounds": {
                        "x": 834,
                        "y": 0,
                        "width": 833,
                        "height": 843
                    },
                    "action": {
                        "type": "message",
                        "text": "B"
                    }
                },
                {
                    "bounds": {
                        "x": 1663,
                        "y": 0,
                        "width": 834,
                        "height": 843
                    },
                    "action": {
                        "type": "message",
                        "text": "C"
                    }
                },
                {
                    "bounds": {
                        "x": 0,
                        "y": 843,
                        "width": 833,
                        "height": 843
                    },
                    "action": {
                        "type": "message",
                        "text": "D"
                    }
                },
                {
                    "bounds": {
                        "x": 834,
                        "y": 843,
                        "width": 833,
                        "height": 843
                    },
                    "action": {
                        "type": "message",
                        "text": "E"
                    }
                },
                {
                    "bounds": {
                        "x": 1662,
                        "y": 843,
                        "width": 838,
                        "height": 843
                    },
                    "action": {
                        "type": "message",
                        "text": "F"
                    }
                }
            ]
        }

        response = requests.post(
            'https://api.line.me/v2/bot/richmenu',
            headers=headers,
            data=json.dumps(body).encode('utf-8')
        )
        response = response.json()
        print(response)
        rich_menu_id = response["richMenuId"]
        
        # Upload rich menu image
        with open('static/richmenu-1.jpg', 'rb') as image:
            line_bot_blob_api.set_rich_menu_image(
                rich_menu_id=rich_menu_id,
                body=bytearray(image.read()),
                _headers={'Content-Type': 'image/jpeg'}
            )

        line_bot_api.set_default_rich_menu(rich_menu_id)

Reference：https://developers.line.biz/en/docs/messaging-api/using-rich-menus/

Youtube 課程影片

關於我們

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

先修微課程

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

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

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

Facebook

Instagram

Threads

YouTube

Line官方帳號

相關教材連結

◀◀◀ L11 Quick Reply ◀◀◀

▶▶▶ L13 LineBot 部屬 ▶▶▶