# Using rich menus

This page explains the rich menu displayed on the LINE Official Account chat screen.

# What are rich menus?

Rich menu is a menu feature displayed at the bottom of the LINE Official Account chat screen. By setting up links in each area of the rich menu, you can direct users to external sites and reservation pages in addition to the features of your LINE Official Account.

Rich menus aren't displayed on LINE for desktop

Rich menus aren't displayed on LINE for desktop (macOS, Windows).

# 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 (opens new window)
  • 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.

See below for information on how to create rich menus using each tool.

# 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, see the LINE Official Account Manager manual (opens new window).

# 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 (opens new window) 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 width size (pixels): 800 to 2500
  • Image height size (pixels): 250 or more
  • Image aspect ratio (width/height): 1.45 or more
  • Max file size: 1 MB
Rich menu template images

You can download a template image for your rich menu by opening the new rich menu screen on the LINE Official Account Manager (opens new window) and clicking Design guide. You can log in to LINE Official Account Manager with the same account as the LINE Developers Console.

Rich menu template image

# 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/en/"
          }
      },
      {
          "bounds": {
              "x": 461,
              "y": 24,
              "width": 173,
              "height": 193
          },
          "action": {
              "type": "uri",
              "uri": "https://engineering.linecorp.com/en/blog/"
          }
      }
  ]
}'

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.

# Switching between multiple rich menus

By using rich menu aliases, you can switch between multiple rich menus with ease, like switching tabs.

Rich menu aliases make it easy to switch between multiple rich menus like switching tabs.

For example, if you want to switch between rich menu A and rich menu B, do the following:

  1. Prepare images for rich menu A and rich menu B
  2. Create rich menu A (richmenu-a)
  3. Upload image to rich menu A
  4. Create rich menu B (richmenu-b)
  5. Upload image to rich menu B
  6. Make rich menu A your default rich menu
  7. Create rich menu alias A
  8. Create rich menu alias B

# 1. Prepare images for rich menu A and rich menu B

Prepare an image for rich menu A (richmenu-a.png) and an image for rich menu B (richmenu-b.png) in advance. For acceptable images, see Prepare a rich menu image.

Image for rich menu A (richmenu-a.png) Image for rich menu B (richmenu-b.png)
Rich menu A image Rich menu B image

# 2. Create rich menu A (richmenu-a)

Using the Create rich menu endpoint, create rich menu A (richmenu-a).

In this example, the following is specified for the tap area object action.

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": "richmenu-a",
    "chatBarText": "Tap to open",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "uri",
                "uri": "https://developers.line.biz/"
            }
        },
        {
            "bounds": {
                "x": 1251,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "richmenuswitch",
                "richMenuAliasId": "richmenu-alias-b",
                "data": "richmenu-changed-to-b"
            }
        }
    ]
}'

The rich menu ID of rich menu A will be returned as a response.

{
    "richMenuId": "richmenu-19682466851b21e2d7c0ed482ee0930f"
}

# 3. Upload image to rich menu A

Upload an image for rich menu A, using the Upload rich menu image endpoint. Specify the rich menu ID of rich menu A obtained in step 2 as the path parameter.

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-19682466851b21e2d7c0ed482ee0930f/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-a.png

# 4. Create rich menu B (richmenu-b)

Create rich menu B (richmenu-b) in the same way as rich menu A.

In this example, the following is specified for the tap area object action.

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": "richmenu-b",
    "chatBarText": "Tap to open",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "richmenuswitch",
                "richMenuAliasId": "richmenu-alias-a",
                "data": "richmenu-changed-to-a"
            }
        },
        {
            "bounds": {
                "x": 1251,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "uri",
                "uri": "https://www.line-community.me/"
            }
        }
    ]
}'

The rich menu ID of rich menu B will be returned as a response.

{
    "richMenuId": "richmenu-4ecc8d672d9da4ba375fb82fa938fe5e"
}

# 5. Upload image to rich menu B

Upload an image for rich menu B in the same way as rich menu A.

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-4ecc8d672d9da4ba375fb82fa938fe5e/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-b.png

# 6. Set rich menu A as the default rich menu

Using the Set a default rich menu endpoint, set rich menu A as your default rich menu.

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

This will display rich menu A, but even if you tap the right half of rich menu, it won't switch to rich menu B yet.

Default rich menu displayed

When another rich menu is displayed

If a per-user rich menu with a higher display priority than the default rich menu has already been set, rich menu A will not be displayed. For more information, see Rich menu display.

# 7. Create rich menu alias A

Using the Create rich menu alias endpoint, create rich menu alias A (richmenu-alias-a). Rich menu alias A is associated with rich menu A (richmenu-a) created in Step 2.

curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "richMenuAliasId": "richmenu-alias-a",
    "richMenuId": "richmenu-19682466851b21e2d7c0ed482ee0930f"
}'

# 8. Create rich menu alias B

Create a rich menu alias B (richmenu-alias-b). Rich menu alias B is associated with rich menu B (richmenu-b) created in Step 4.

curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "richMenuAliasId": "richmenu-alias-b",
    "richMenuId": "richmenu-4ecc8d672d9da4ba375fb82fa938fe5e"
}'

Now, when you tap the right side of rich menu A, you can switch to rich menu B, and when you tap the left side of rich menu B, you can switch to rich menu A.

Rich menu A Rich menu B
Rich menu A Rich menu B

Rich menus linked to rich menu aliases can also be modified later using the Update rich menu alias endpoint.

# 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 (opens new window)
When the rich menu is set by the rich menu switching action

If the user taps the rich menu and the rich menu is set by the rich menu switching action, it is included in "1. Per-user rich menu set with the Messaging API".

# 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.