Using rich menus

Introduction

The rich menu is a customizable menu that is displayed on the chat screen to help users interact with your bot. You can customize the menu items to correspond to various actions.

Rich menu structure

Rich menu

The rich menu is made up of a rich menu image and a chat bar.

  1. Rich menu image: Image that has one or more defined tappable areas to which you specify certain actions such as returning a postback event or opening a URL.
  2. Chat bar: Bar used to open and close the rich menu. You can customize the text of this bar.

Types and display priority of rich menus

There are three types of rich menus as below, depending on the setting method and the target users.

Type Setting method Target users Display priority
Per-user rich menu set with the Messaging API Messaging API Individual user 1
Default rich menu set with the Messaging API Messaging API All users who have added your bot as a friend 2
Default rich menu set with LINE@ Manager LINE@ Manager All users who have added your bot as a friend 3

You can assign these three types of rich menus to one user at the same time. In that case, the priority order in the table above determines the rich menu to be displayed on the chat screen.

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 as below.

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@ Manager When the user re-opens the chat screen

Setting rich menus with the Messaging API

Note: Rich menus created using the Messaging API are only supported on LINE 7.14.0 and later for Android and iOS.

You can set the default and per-user rich menus with the Messaging API.

Rich menus set with the Messaging API support postback and datetime picker actions. You can also freely customize the tappable areas in the rich menu image.

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

  1. Prepare a rich menu image
  2. Create a rich menu
  3. Upload the rich menu image

To set the created rich menu as the default rich menu or link it to an individual user, take either of the following steps:

For an example of how a rich menu is implemented in a sample bot using PHP, see the demo-rich-menu-bot GitHub repository.

Prepare a rich menu image

Prepare an image with up to 20 different tappable areas to use in the rich menu.

Your rich menu image must meet the following requirements:

  • Image format: JPEG or PNG
  • Image size: 2500x1686 or 2500x843 pixels
  • Maximum file size: 1 MB

Create a rich menu

To create a rich menu, follow these steps:

  1. Create a rich menu object which contains information about the rich menu's size, name, chat bar text, tappable areas and whether the menu is displayed by default or not.
  2. Send an HTTP POST request to the /bot/richmenu endpoint. Specify your channel access token in the Authorization header and the rich menu object in the body. A rich menu ID is returned on success.

You can create up to 1000 rich menus for one bot.

The following are an example image, request, and response for a rich menu with multiple tappable areas representing a game controller. A rich menu ID is returned on success.

Example rich menu image
Rich menu sample

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":"Controller",
    "chatBarText":"Controller",
    "areas":[
        {
          "bounds":{
              "x":551,
              "y":325,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"up"
          }
        },
        {
          "bounds":{
              "x":876,
              "y":651,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"right"
          }
        },
        {
          "bounds":{
              "x":551,
              "y":972,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"down"
          }
        },
        {
          "bounds":{
              "x":225,
              "y":651,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"left"
          }
        },
        {
          "bounds":{
              "x":1433,
              "y":657,
              "width":367,
              "height":367
          },
          "action":{
              "type":"message",
              "text":"btn b"
          }
        },
        {
          "bounds":{
              "x":1907,
              "y":657,
              "width":367,
              "height":367
          },
          "action":{
              "type":"message",
              "text":"btn a"
          }
        }
    ]
  }'

Example response with a rich menu ID. The status code is 200.

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

A 400 Bad Request status code is returned if you have reached the maximum of 1000 rich menus for your bot. In that case, you must first delete a rich menu before creating a new rich menu.

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

Upload the rich menu image

To upload a rich menu image, send an HTTP POST request to the /bot/richmenu/{richMenuId}/content endpoint. Specify the rich menu ID in the richMenuId path parameter.

curl -v -X POST https://api.line.me/v2/bot/richmenu/{richMenuId}/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

To set a rich menu as the default rich menu for your bot, send an HTTP POST request to the /bot/user/all/richmenu/{richMenuId} endpoint. Specify the rich menu ID as a path parameter. The rich menu is displayed to the user after the user re-opens the chat screen if the API call is successful.

If you have already set the default rich menu, the new rich menu replaces the existing rich menu.

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

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

To link a rich menu to an individual user, send an HTTP POST request to the /bot/user/{userId}/richmenu/{richMenuId} endpoint. Specify the rich menu ID and a user ID as path parameters. The rich menu is displayed to the user immediately if the API call is successful.

If you have already linked a rich menu to the user, the new rich menu replaces the existing rich menu.

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

For more information, see Link rich menu to user in the Messaging API reference.

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.

Download a rich menu image

To download an image associated with a rich menu, send an HTTP GET request to the /bot/richmenu/{richMenuId}/content endpoint. Specify the rich menu ID as a path parameter. To download the image as a file, you can specify a file name using -o [filename] in a cURL command.

curl \
-H 'Authorization: Bearer {channel access token}' \
"https://api.line.me/v2/bot/richmenu/{richMenuId}/content" \
-o picture.jpg

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

Get a rich menu list

To get a list of all the rich menu IDs and rich menu objects created for your bot, send an HTTP GET request to the /bot/richmenu/list endpoint.

curl -v -X GET https://api.line.me/v2/bot/richmenu/list \
-H 'Authorization: Bearer {channel access token}'

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

Get a rich menu

To get a rich menu by specifying its ID, send an HTTP GET request to the /bot/richmenu/{richMenuId} endpoint.

curl -v -X GET https://api.line.me/v2/bot/richmenu/{richMenuId} \
-H 'Authorization: Bearer {channel access token}'

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

Delete a rich menu

If you have reached the maximum of 1000 rich menus for your bot, you must delete a rich menu before you can create a new one. To delete a rich menu, send an HTTP DELETE request to the /bot/richmenu/{richMenuId} endpoint. Specify the rich menu ID as a path parameter.

curl -v -X DELETE https://api.line.me/v2/bot/richmenu/{richMenuId} \
-H 'Authorization: Bearer {channel access token}'

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

Get the default rich menu ID

To get the default rich menu ID, send an HTTP GET request to the /bot/user/all/richmenu endpoint. If successful, the default rich menu ID is returned in the response.

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

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

Cancel the default rich menu

To cancel the default rich menu, send an HTTP DELETE request to the /bot/user/all/richmenu endpoint.

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

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

Get the rich menu ID linked to a user

To get the rich menu ID linked to a user, send an HTTP GET request to the /bot/user/{userId}/richmenu endpoint. Specify a user ID as a path parameter. If successful, the rich menu ID linked to the user is returned in the response.

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

For more information, see Get rich menu ID of user in the Messaging API reference.

To unlink a rich menu for a user, send an HTTP DELETE request to the /bot/user/{userId}/richmenu endpoint. Specify the user ID as a path parameter.

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

For more information, see Unlink rich menu from user in the Messaging API reference.

Setting rich menus with LINE@ Manager

You can set the default rich menu with LINE@ Manager.

LINE@ Manager provides a graphical user interface where you can configure tappable areas for a rich menu image based on predefined image templates. You can also use customized labels and our predefined icons to create a rich menu.

You can create multiple rich menus but only one rich menu can be active at a single time.

To create a rich menu in LINE@ Manager, do the following:

  1. Go to "Create Rich Content" > "Rich Menu" in LINE@ Manager
  2. Click Create New Rich menu content settings
  3. Configure the rich menu
  4. Select a predefined rich menu image template
    • Image templates
      Rich menu content settings
    • Text + icon templates
      Rich menu content settings
  5. Upload an image
  6. Select an action for each area (keyword, URL, text) Rich menu content settings
  7. Click Save

Users interacting with your bot will now see the rich menu in the chat screen.