# Using rich menus

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

Using rich menus
- Rich menu structure
- Choosing a tool for creating rich menus
Creating rich menus with LINE Official Account Manager
Creating rich menus with the Messaging API
Switch between multiple rich menus
Rich menu display
- When setting change takes effect
Other rich menu features

# 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
Choosing a tool for creating rich menus

Rich menu

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

Rich menu image: JPEG or PNG image file. For more information, see Prepare a rich menu image.
Tappable area: You can customize the menu items to correspond with various actions such as returning a postback event or opening a URL.
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	Advanced customization For example, you can use postback action and datetime picker actions.

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
Creating rich menus with the Messaging API

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) (only available in Japanese).

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

Prepare a rich menu image
Create a rich menu that specifies the tappable area.
Upload and attach the rich menu image to the rich menu
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 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 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"
}

If you want to check that the rich menu object you specified is valid, you can use the validate rich menu object endpoint.

For more information on how to create a rich menu, see Create rich menu in the Messaging API reference.

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.

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:

Prepare images for rich menu A and rich menu B
Create rich menu A (richmenu-a)
Upload image to rich menu A
Create rich menu B (richmenu-b)
Upload image to rich menu B
Make rich menu A your default rich menu
Create rich menu alias A
Create rich menu alias B
Stop displaying rich menu

# 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`)

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

Tappable area in the left half
- Specify the URI action to open the LINE Developers site.
Tappable area in the right half
- Specify Rich menu switch action (richmenuswitch)
- Specify the rich menu alias B (richmenu-alias-b) as the rich menu alias ID to switch to.

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.

Tappable area in the left half
- Specify Rich menu switch action (richmenuswitch)
- Specify the rich menu alias A (richmenu-alias-a) as the rich menu alias ID to switch to.
Tappable area in the right half
- Specify the URI action to open the LINE Developers Community (opens new window).

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 since the rich menu alias B has not been created 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. In such a case, either delete rich menu or unlink rich menu from user, and then rich menu A will 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 menus linked to rich menu aliases can also be modified later using the Update rich menu alias endpoint.

# 9. Stop displaying rich menu

If you want to stop displaying the rich menu after the user has used the rich menu switch action, follow these steps:

Using the Cancel default rich menu endpoint, cancel the default rich menu set.
Using the Delete rich menu alias endpoint, delete the rich menu aliases A and B.
Using the Delete rich menu endpoint, delete rich menus A and B.

If you delete the rich menu without unlinking the rich menu from the user, the deletion takes effect when the user re-opens the chat screen.

If you know the user ID of the user who is friends with the LINE Official Account, you can stop displaying the rich menu by unlinking the rich menu from the user using the following endpoints instead of deleting the rich menu.

If you unlink the rich menu from a user, the rich menu will stop displaying immediately.

If the rich menu continues to be displayed even after the default rich menu is canceled

When a user switches from rich menu A to rich menu B or from rich menu B to rich menu A again by the rich menu switch action, the displayed rich menu is a per-user rich menu with the highest display priority. Therefore, if you just cancel the default rich menu set in Step 6, rich menu A or B will still be displayed. In this case, you can delete rich menu or unlink rich menu from user, and the rich menu won't be displayed. For more information about the display priority of rich menus, see Rich menu display.

If you set a new default rich menu but another rich menu is displayed

If you set a new default rich menu but another rich menu is still displayed, there is a possibility that a per-user rich menu with a higher display priority than the default rich menu has been set. In this case, you can delete rich menu that is unintentionally displayed or unlink rich menu from user, and the new rich menu will be displayed. For more information, see 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):

Per-user rich menu set with the Messaging API
Default rich menu set with the Messaging API
Default rich menu set with LINE Official Account Manager (opens new window)

When the rich menu is set by the rich menu switch action

If the user taps the rich menu and the rich menu is set by the rich menu switch 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.

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

# Using rich menus

# What are rich menus?

# Rich menu structure

# Choosing a tool for creating rich menus

# Creating rich menus with LINE Official Account Manager

# Creating rich menus with the Messaging API

# Prepare a rich menu image

# Create a rich menu

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

# Set the default rich menu

# Switching between multiple rich menus

# 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. Set rich menu A as the default rich menu

# 7. Create rich menu alias A

# 8. Create rich menu alias B

# 9. Stop displaying rich menu

# Rich menu display

# When setting change takes effect

# Other rich menu features

# Using rich menus

# What are rich menus?

# Rich menu structure

# Choosing a tool for creating rich menus

# Creating rich menus with LINE Official Account Manager

# Creating rich menus with the Messaging API

# Prepare a rich menu image

# Create a rich menu

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

# Set the default rich menu

# Switching between multiple rich menus

# 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. Set rich menu A as the default rich menu

# 7. Create rich menu alias A

# 8. Create rich menu alias B

# 9. Stop displaying rich menu

# Rich menu display

# When setting change takes effect

# Other rich menu features

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

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