Try out rich menus on Rich Menu Playground

Rich Menu Playground is a LINE Official Account where you can try out rich menu features. It is only available in Japanese.

You can try out various rich menu features, such as letting the user select a date and time using the datetime picker action, or switching between multiple rich menus using rich menu aliases.

What are the benefits of using rich menus?

The benefits of rich menus from the perspective of both service providers and end users are introduced on the LINE API Use Case (opens new window) site.

Add Rich Menu Playground account as a friend

Try out the Rich Menus Playground on your smartphone

Rich menus cannot be displayed on the desktop version (macOS, Windows) of LINE. Try out the Rich Menu Playground on the LINE app for smartphones.

Rich Menu Playground is a LINE Official Account. You can try out its various features by adding the Rich Menu Playground account as a friend. To add it as a friend, use one of the following methods:

How to add Rich Menu Playground account as a friend	Description
Open URL to add as friend	Open https://lin.ee/7ALASDvA (opens new window) on your smartphone browser and add as friend.
Scan the QR code to add as friend	Scan the QR code of Rich Menu Playground on LINE and add it as a friend.[1]
Search for ID to add as friend	Search for Rich Menu Playground's LINE ID (@try_richmenu) on LINE and add it as a friend.[2]

Common features of the Rich Menu Playground

Once you have added the Rich Menu Playground account as a friend, you can try out each action from the rich menu.

• Rich menus
• Message after the action is executed

Rich menus

The rich menu, which is the main part of the Rich Menu Playground, provides 4 types of features.

1. Tabs to switch the type of action to try.
2. Button to toggle the list of action types to try.
3. Button to try the selected action. If there are configurable parameters for the action, a button for each parameter will be displayed.
4. Button to open the documentation for the target action.

Message after the action is executed

When you select an action to try, you will see a description of the action you tried, the actual action settings (parameters) and the webhook events sent from the LINE Platform to the bot server.

Actions you can try out on the Rich Menu Playground

On the Rich Menu Playground, you can try out these actions:

• Try message action
• Try postback action
• Try URI Action
• Try datetime picker action
• Try rich menu switch action

Try message action

In the "Try Message Action" tab, you can try out a rich menu with a message action associated.

Use of message actions

When a user sends a message to a talk room with the LINE Official Account by tapping on a rich menu with a message action associated, the LINE Platform will send the corresponding message event to the bot server. The bot server can then send a reply message using the reply token included in the message event.

Button	Description	Set value (value of the action object)
Send message	Execute a message action.	{"type":"message","label":"メッセージを送信する","text":"message sent successfully!"}

Try postback action

In the "Try Postback Action" tab, you can try out a rich menu with a postback action associated. When the postback action is executed, a postback event containing the string specified in the data property will be sent from the LINE Platform to the bot server.

Use of postback actions

When a user taps on a rich menu with a postback action associated, a postback event containing the string specified in the data property will be sent from the LINE Platform to the bot server. Since the content sent by the data property cannot be confirmed by the user, data containing unique parameters, identifiers, etc. can be sent securely to the bot server. The bot server can use the reply token included in the postback event to send a response message.

Button	Description	Set value (value of the action object)
With displayText	Execute a postback action with displayText set.	{"type":"postback","label":"ディスプレイテキストあり","data":"actionId=21","displayText":"ディスプレイテキストです。トーク画面に表示されます。"}
No displayText	Execute a postback action with no displayText set.	{"type":"postback","label":"ディスプレイテキストなし","data":"actionId=22"}

About displayText

If you set a text in the displayText property, the text will be displayed on the LINE talk screen as a message from the user when the user taps the rich menu where the postback action is set. The text set in the displayText property will only be displayed on the talk screen, and will not be sent to the bot server as a message event.

Try URI Action

In the "Try URI Action" tab, you can try out a rich menu with a URI action associated. When the user taps the rich menu with the URI action associated to it, the URL specified by the uri property will be opened in the browser.

Button	Description	Set value (value of the action object)
Open a URL	Execute a URI action.	{"type":"uri","label":"URLを開く","uri":"https://developers.line.biz/docs/messaging-api/actions/#uri-action"}
Open in an external browser	Execute the URI action with the query parameter openExternalBrowser=1. For more information, see Opening a URL in an external browser.	{"type":"uri","label":"外部ブラウザで開く","uri":"https://developers.line.biz/docs/messaging-api/actions/?openExternalBrowser=1#uri-action"}
Open in a Chrome custom tab (Android only)	Execute the URI action with the query parameter openInAppBrowser=0. For more information, see Opening a URL in an external browser.	{"type":"uri","label":"Chromeカスタムタブで開く","uri":"https://developers.line.biz/docs/messaging-api/actions/?openInAppBrowser=0#uri-action"}
Check the configuration	Do not execute the URI action, just check the setting value of the URI action object.	-

About openInAppBrowser

The openInAppBrowser parameter is only supported in the LINE for Android. For more information about the openInAppBrowser parameter, see Opening a URL in an external browser.

Try datetime picker action

In the "Try Datetime Picker Action" tab, you can try out a rich menu with a datetime picker action associated. When a user taps on the rich menu with the datetime picker action associated to it, the date and time selection dialog will be displayed and a postback event containing the date and time selected by the user will be sent from the LINE Platform to the bot server.

Button	Description	Set value (value of the action object)
Date and time selection (datetime mode)	Execute a datetime picker action with the mode property set to datetime.	{"type":"datetimepicker","label":"datetimeモード","data":"actionId=31","mode":"datetime"}
With initial value set (with initial property)	Execute the datetime picker action with the initial property set.	{"type":"datetimepicker","label":"初期値設定あり","data":"actionId=32","initial:"2021-11-01t00:00","mode":"datetime"}
With maximum and minimum value setting (with min and max properties)	Execute datetime picker action with min and max properties set.	{"type":"datetimepicker","label":"最大・最小値設定あり","data":"actionId=33","mode":"datetime","max":"2021-12-31t23:59","min":"2021-11-01t00:00"}
Select a date (date mode)	Execute a datetime picker action with the mode property set to date.	{"type":"datetimepicker","label":"dateモード","data":"actionId=34","mode":"date"}
Select a time (time mode)	Execute a datetime picker action with the mode property set to time.	{"type":"datetimepicker","label":"timeモード","data":"actionId=35","mode":"time"}

Try rich menu switch action

In the "Try Rich Menu Switch Action" tab, you can try out a rich menu with a rich menu switch action associated.

When the user taps the rich menu, that has a rich menu switch action associated to it, the display will switch to another rich menu defined in the rich menu aliases. The string specified in the data property of the rich menu switching action, and the postback event containing the postback.params object, will be sent from the LINE Platform to the bot server.

Button	Description	Set value (value of the action object)
Switch rich menu	Execute a rich menu switching action.	{"type":"richmenuswitch","label":"リッチメニューを切り替える","richMenuAliasId":"richmenu-richmenuswitch_2","data":"actionId=42"}
Switch rich menu to a smaller size	Execute a rich menu switching action. Switch to the rich menu with the height of the size property of the rich menu object set to a lower value.	{"type":"richmenuswitch","label":"小さいサイズのリッチメニューに切り替える","richMenuAliasId":"richmenu-richmenuswitch_3","data":"actionId=43"}

---

1. For more information, see How to add a friend via link or QR code (opens new window) (Japanese only) in the LINE user's guide. ↩︎

2. For more information, see How to add a friend from ID search (opens new window) (Japanese only) in the LINE user's guide. ↩︎