Improve LINE Bot UX by using RichMenu
Tags: line, linebot, richmenuapi
Published: 2018-02-08 07:50:32

---
title: Improve LINE Bot UX by using RichMenu
published: true
description: Improve LINE Bot UX by using RichMenu
tags: Line,linebot,RichMenuAPI 
cover_image: https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb73.png
---

Have you ever wonder how to use the bot you just start using? Or, bot gives you bunch of options at the beginning but you have to keep asking "help" to remind yourself what the bot can do?

LINE Bot has the solution, Rich Menu. See the [overview](https://developers.line.me/en/docs/messaging-api/using-rich-menus/) for more detail.

Great news is that you, as a developer, can play with it via API!

- You can create up to 10 rich menus. 
- You can specify up to 20 tappable areas in a rich menu
- You can set any richmenu to any user.

By making rich menu programmable, you can swap the rich menu depending on your context, timing, etc. Isn't it exciting!?

# Rich Menus Manager

To start, you need to create rich menu(s). API is available for you to create them, but I developed a GUI tool to make it easy.

## Prerequisites

- Node.js: Test with version 8.7.0
- Browser: Test with Chrome

## Install

1\. Run the following command. For macOS, use sudo if necessary.

```shell
npm install –g line-richmenus-manager
or
sudo npm install –g line-richmenus-manager
```
2\. Run the following command to start the tool.

```shell
line-richmenus-manager –port:3000
```
If you omit the port number, it uses 3000 by default.

3\. Access to http://localhost:3000.

4\. Specify Channel Access Token and click OK.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb67.png)

## Create Rich Menu

1\. Click [+] icon on the top navigation bar.

2\. Enter Name and ChatBar Text.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb68.png)

3\. Click Choose File button and select PNG/JPEG file. The image has to be 2500×1686 or 2500×843 size.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb69.png)

4\. Draw rectangle by using mouse. You can change the x/y/width/height value afterwards to make pixel level modification.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb70.png)

5\. Select action type and value, then click Add Area.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb71.png)

6\. You can easily identify the area and corresponding action via number.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb72.png)

7\. If you made mistake, you can delete action by click trash icon or, change it from the list.

8\. Once you complete adding areas, click CREATE RICHMENU.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb73.png)

## View Detail

In the main screen, you can see all created Rich Menus and detail of each menu.

1\. Select a Rich Menu from list on the left pane.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb74.png)

2\. The detail is shown in right pane.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb75.png)

3\. Click DELETE RICH MENU to delete.

4\. You can link the rich menu to a user, too. Click Link or Unlink and enter UserId.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb76.png)

## Search Rich Menu linked to a user

If you want to check which rich menu is linked to a user, use search.

1\. Click search icon on navigation bar.

2\. Enter UserId and hit Enter key.

![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb77.png)

## Update Channel Token

If you renew the Channel Token, or manage Rich Menus in different bot, you can update the Channel Token

1\. Click the gear icon on the navigation bar.

2\. Enter Channel Token and click OK.

Once you link the rich menu to a user, you can immediately see it via physical device or simulator.

# Check with simulator

You can find the detail of simulator [here](https://dev.to/kenakamu/boost-line-bot-development-productivity-by-using-line-client-simulator--12o2).

## Simulate Rich Menu

1\. Run the simulator and click Rich Menu icon.


![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb78.png)

2\. Tap any area of the rich menu to see how it works.


![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb79.png)

3\. The following screenshot displays when you tap the area where postback action is set.


![image](https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb80.png)

# Summary
Using Rich Menu boosts UX a lot! And RichMenus Manager will help you manage them.

Ken