DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Improve LINE Bot UX by using RichMenu
Kenichiro Nakamura
Kenichiro Nakamura

Posted on

Improve LINE Bot UX by using RichMenu

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

npm install –g line-richmenus-manager
or
sudo npm install –g line-richmenus-manager
Enter fullscreen mode Exit fullscreen mode

2. Run the following command to start the tool.

line-richmenus-manager –port:3000
Enter fullscreen mode Exit fullscreen mode

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

Create Rich Menu

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

2. Enter Name and ChatBar Text.

image

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

image

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

image

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

image

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

image

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

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

2. The detail is shown in right pane.

image

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

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

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.

Simulate Rich Menu

1. Run the simulator and click Rich Menu icon.

image

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

image

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

image

Summary

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

Ken

Top comments (2)

Collapse
 
ordinary04 profile image
ordinary04

How to link the rich menu to everyone,when somebody add friend to my Bot then they can see rich menu? No add User ID one by one.

Collapse
 
kenakamu profile image
Kenichiro Nakamura Author

There is a default one which you can create from LINE@, otherwise you need to link one by one.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.