Using rich menus

The rich menu is a customizable menu that is displayed in the chat screen to make it easier for users to interact with your bot.

What is a rich menu

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

Rich menu

  1. Rich menu image: Image map made up of one or more tappable areas. Set an action for each area. Choose from the following two sizes: 2500x1686 or 2500x843.
  2. Chat bar: Bar used to open and close the rich menu. You can customize the text of this bar.

How to use rich menus

You can create rich menus for your bot with the Messaging API or the LINE@ Manager (content management tool for LINE@ accounts).

By using the Messaging API, you can create up to 10 different rich menus per bot and specify the rich menu to display to individual users. This method lets you provide a more personalized experience for your users. Note that rich menus created using an API must be linked to a user to be displayed.

The LINE@ Manager provides you with templates which you can use to create rich menus that are displayed to all users. Unlike the Messaging API, the LINE@ Manager does not support postback actions or the ability to personalize rich menus to individual users.

Note that you can use the Messaging API and LINE@ Manager to create rich menus at the same time. In this case, rich menus linked via API will override the rich menu set on the LINE@ Manager.

The following describes how to create rich menus using the Messaging API and the LINE@ Manager.

Creating a rich menu using the Messaging API

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

The following describes how to create a rich menu and link it to a specific user using the Messaging API. For information on how to create a rich menu using the LINE@ Manager, see Creating a rich menu with the LINE@ Manager.

1. Prepare a rich menu image

To create a rich menu, you first need to prepare a rich menu image. Images must be in JPEG or PNG formats and be one of two sizes: 2500x1686 or 2500x843. You can set up to 20 different areas that can be associated with different actions when tapped.

The following is an example of a rich menu image with multiple areas. See the example request below for the JSON rich menu object for this rich menu image. For an example of how this rich menu is implemented in a sample bot using PHP, see the demo-rich-menu-bot GitHub repository.

Rich menu sample

2. Create a rich menu with a rich menu ID

To create a new rich menu for your bot with the Messaging API, send an HTTP POST request to the /v2/bot/richmenu endpoint with your channel access token in the Authorization header.

In the body of the request, include 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. In the rich menu object, you can also specify the type of action to perform for each area when tapped. For more information on how to structure a rich menu object, see Rich menu object.

If the request is successful, the rich menu is created and the LINE Platform returns a rich menu ID. This rich menu ID is used to upload an image for the rich menu.

Note: The LINE Platform returns an HTTP 400 Bad Request error if you have reached the maximum of 10 rich menus for your bot. To create a new rich menu, you must first delete a rich menu.

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {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"
         }
      }
   ]
}'

For more information, see Create rich menu.

3. Upload the rich menu image for the rich menu

Once you have created a rich menu and have its rich menu ID, upload the image you want to use by sending an HTTP POST request to the /v2/bot/richmenu/{richMenuId}/content endpoint with the rich menu ID in the richMenuId path parameter.

Note: You must link the rich menu with a specific user for the rich menu to be displayed. If no rich menu is linked to a user, either the rich menu set in the LINE@ Manager is used or no rich menu is displayed.

curl -v -X POST https://api.line.me/v2/bot/richmenu/{richMenuId}/content \
-H "Authorization: Bearer {ACCESS_TOKEN}" \
-H "Content-Type: image/jpeg" \
-T image.jpg

For more information, see Upload rich menu image.

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

Note: If a rich menu is already linked to the user, it will be replaced by the new rich menu.

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

For more information, see Link rich menu to user.

Other rich menu features

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

Get rich menu ID of a user

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

If no rich menu is linked to the specified user, the LINE Platform returns an HTTP 404 Not Found error.

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

For more information, see Get rich menu ID of user.

Delete rich menu

If you have reached the maximum of 10 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 /v2/bot/richmenu/{richMenuId} endpoint with a rich menu ID as a path parameter.

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

For more information, see Delete rich menu.

To unlink a rich menu for a user, send an HTTP DELETE request to the /v2/bot/user/{userId}/richmenu with the user ID as a path parameter. Once the rich menu has been unlinked, the rich menu set in the LINE@ Manager is used if available or no rich menu is displayed.

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

For more information, see Unlink rich menu from user.

Get 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 /v2/bot/richmenu/list endpoint.

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

For more information, see Get rich menu list.

Download a rich menu image

To download an image associated with a rich menu, send an HTTP GET request to the /v2/bot/richmenu/{richMenuId}/content endpoint with 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 {ACCESS_TOKEN}' \
"https://api.line.me/v2/bot/richmenu/{richMenuId}/content" \
-o picture.jpg

For more information, see Download rich menu image.

Creating a rich menu with the LINE@ Manager

To configure a rich menu for your bot, go to the "Create Rich Content" menu in the LINE@ Manager. Select the design of the menu and configure the details of the buttons.

LINE@ Manager rich menu

For more detailed information on using rich menus, see the Rich menu reference. To see a demo of how to implement rich menus with the Messaging API, see our demo-rich-menu-bot GitHub repository.