How to create a dynamic rich menu to improve user experience for Amity Bots?

  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.

How to create a dynamic rich menu to improve user experience for Amity Bots?

A rich menu is a customizable menu that is displayed on the chat screen to help users interact with your LINE Official Account. It helps the user to understand our bot’s basic functions clearly.

A dynamic rich menu is a set of rich menu that can be changed by user’s action individually. There are several ways we adapt a dynamic rich menu to improve user experience. Imagine that we are building a restaurant bot. We have 3 groups of customer which are Baby Boomer, Gen X, and Millennials. They are generally different in term of their perspective, needs, and limitation. To smoothly serve these 3 groups in one bot ,we need to design our bot’s flow for each group. In this article, we are focusing on a rich menu. Therefore, we should have at least 3 rich menus. For example, Baby boomer should have a big font size and healthy food on a rich menu. Gen X should have informative functions. Millennials should have a stunning design and trendy food as shown in figure 1

Figure 1 Dynamic rich menu design

There are 3 parts in a rich menu.

  1. Image: Only JPEG or PNG format. Recommended size 2,500 x 1,686 pixel
  2. Tappable area: It is able to be assigned actions, for example, a postback event. You can create the tappable area up to 20.
  3. Chat bar: To open or close the rich menu.
Figure 2 Rich menu components

Let’s create a dynamic rich menu.

User case

  1. A user is able to book services via a rich menu.
  2. A user is able to select service via a rich menu.
  3. A user is able to book a room via rich menu.

Demo

Dynamic rich menu demo

3 steps to complete

1. Create rich menus

1.1. Navigate to a nav bar at the top of a screen, select “Campaign” menu then “Rich Menu”.

Campaign > Rich Menu

1.2. You will see “Personalize rich menu” panel. Click “New rich menu”.

Personalize rich menu panel

1.3. Fill in a name, a Line Display Name(it will show in a chat bar.), an image. After that, click Save and deploy.

New rich menu setting

1.4. Repeat from Step 1.2

2. Create actions to change a rich menu based on user’s action.

2.1. Navigate to a nav bar, select “Bot” menu. Then, select “Chatlogic” under “Logic & Integration”.

Bot > Chatlogic

2.2. In a Flow editor, select “interpret node” and “link user node”.

Flow editor

2.3. Set node’s properties.

2.3.1. Interpret node: Naming the node by starting with @ and followed by a name you want. In rule property, select otherwise. Then, click Done.

Interpret node

2.3.2. Link user node: Select a named rich menu we just created in Step 1. Then, click Done.

Link user node

2.4. Click Deploy button at the top right when everything is set.

3. Assign actions to rich menus.

3.1. Back to each Rich Menu. Create a tappable area by drag and drop. After that, assign a “Go to flow” action and select the name we set in Step 2.


Create a tappable area and assign an action

3.2. To set a default rich menu by clicking Default on a rich menu box. Then, click Deploy.


Default rich menu setting

Congratulations! We’re all set.


Got errors?

  1. Make sure that an action’s name and a name in the Interpret node are the same.
  2. Make sure you set the correct property in a Link user node.
  3. Make sure you click save and deploy button when you make changes in the platform.