# Using rich menus

# Introduction

The rich menu is a customizable menu that is displayed on the chat screen to help users interact with your LINE Official Account.

# Rich menu structure

Rich menu

The rich menu is made up of a rich menu image, tappable areas, and a talk room menu.

  1. Rich menu image: JPEG or PNG image file. For more information, see Prepare a rich menu image.
  2. Tappable area: You can customize the menu items to correspond with various actions such as returning a postback event or opening a URL.
  3. Chat bar: The user opens and closes the rich menu from here. You can customize the text of this bar.

# Choosing a tool for creating rich menus

You can create a rich menu via two separate tools: LINE Official Account Manager or Messaging API. Both tools offer unique benefits to the user.

Tool Benefits
LINE Official Account Manager
  • Low development time
  • Easy-to-use graphical interface
Messaging API
Rich menus aren't cross-compatible between tools

Rich menus that are created in LINE Official Account Manager can't later be retrieved or edited with Messaging API, and vice versa.

# Creating rich menus with LINE Official Account Manager

You can specify a default rich menu with the LINE Official Account Manager. The user sees the default rich menu unless there are other rich menus with a higher display priority.

LINE Official Account Manager provides a graphical user interface where you can configure tappable areas for a rich menu based on predefined templates.

For creating rich menus with LINE Official Account Manager, refer to the LINE Official Account Manager manual.

# Creating rich menus with the Messaging API

To create a rich menu with the Messaging API, follow these steps:

  1. Prepare a rich menu image
  2. Create a rich menu that specifies the tappable area.
  3. Upload and attach the rich menu image to the rich menu
  4. Set the default rich menu
Implement rich menus

For an example of a bot that implements rich menus with PHP, see our demo-rich-menu-bot GitHub repository.

# Prepare a rich menu image

Prepare an image to use in the rich menu.

Your rich menu image must meet the following requirements:

  • Image format: JPEG or PNG
  • Image size (pixels): 2500x1686, 2500x843, 1200x810, 1200x405, 800x540, 800x270
  • Max file size: 1 MB

# Create a rich menu

Create a rich menu with up to 20 different tappable areas.

Specify the rich menu object in the body. The following are an example request and example response for creating a rich menu.

Tip
  • You can create a rich menu that opens automatically when it's linked to a user by changing the selected property in the request to true. You can't close a rich menu using the Messaging API.
  • You can set the chat bar text by specifying the chatBarText property in the request.

Example request

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
  "size":{
      "width":2500,
      "height":1686
  },
  "selected": false,
  "name": "LINE Developers Info",
  "chatBarText": "Tap to open",
  "areas": [
      {
          "bounds": {
              "x": 34,
              "y": 24,
              "width": 169,
              "height": 193
          },
          "action": {
              "type": "uri",
              "uri": "https://developers.line.biz/en/news/"
          }
      },
      {
          "bounds": {
              "x": 229,
              "y": 24,
              "width": 207,
              "height": 193
          },
          "action": {
              "type": "uri",
              "uri": "https://www.line-community.me/"
          }
      },
      {
          "bounds": {
              "x": 461,
              "y": 24,
              "width": 173,
              "height": 193
          },
          "action": {
              "type": "flex",
              "altText": "LINE Developers Site More Options",
              "contents": {
                  "type": "bubble",
                  "hero": {
                      "type": "image",
                      "url": "devSiteImageUrl",
                      "size": "full",
                      "margin": "none",
                      "gravity": "top",
                      "aspectRatio": "1200:630"
                  }
              }
          }
      }
  ]
}'

Example response with a rich menu ID.

{
    "richMenuId": "richmenu-88c05ef6921ae53f8b58a25f3a65faf7"
}

For more information, see Create rich menu in the Messaging API reference.

# Upload and attach the rich menu image to the rich menu

Uploads and attaches an image to a rich menu that was created in the previous step.

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-88c05ef6921ae53f8b58a25f3a65faf7/content \
-H "Authorization: Bearer {channel access token}" \
-H "Content-Type: image/jpeg" \
-T image.jpg

For more information, see Upload rich menu image in the Messaging API reference.

# Set the default rich menu

Sets the default rich menu. The default rich menu is displayed to all users who have added your LINE Official Account as a friend and aren't linked to any per-user rich menu.

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-88c05ef6921ae53f8b58a25f3a65faf7 \
-H "Authorization: Bearer {channel access token}"

For more information, see Set the default rich menu in the Messaging API reference.

Per-user rich menu

You can link a rich menu to a user. Only one rich menu can be linked to a user at one time. See following topic in the Messaging API reference.

# Rich menu display

There are three types of rich menus, each with their own setting method and target audience. The rich menu is displayed in the following order of priority (highest to lowest):

  1. Per-user rich menu set with the Messaging API
  2. Default rich menu set with the Messaging API
  3. Default rich menu set with LINE Official Account Manager

# When setting change takes effect

When you change the setting of a rich menu, it becomes effective at different timings depending on the type of the rich menu.

Type When change takes effect
Per-user rich menu set with the Messaging API Immediately. However, if you delete the rich menu without unlinking it from the user, the deletion takes effect when the user re-opens the chat screen.
Default rich menu set with the Messaging API When the user re-opens the chat screen. It may take up to one minute until the change takes effect.
Default rich menu set with LINE Official Account Manager When the user re-opens the chat screen.

# Other rich menu features

Once you have created and assigned a rich menu to users, you can also do the following with the Messaging API.