# Play with rich menus
Rich Menu Playground is a LINE Official Account where you can test rich menu features. This account is serviced only in Japanese. You can get your hands on rich menu features, such as date selection with the datetime picker action and switching between rich menus with rich menu aliases.
Visit LINE API Use Case (opens new window) and learn the benefits of rich menus, from the perspective of service providers and end users.
# Add Rich Menu Playground
Add Rich Menu Playground as a friend to your LINE account, to test rich menu features. You have different ways to add Rich Menu Playground as instructed below.
Rich menus aren't displayed on LINE for PC (macOS, Windows). Use a smartphone to try Rich Menu Playground.
Add through | How to add |
---|---|
URL | Open https://lin.ee/7ALASDvA (opens new window) on your smartphone browser and add. |
QR code | Scan this QR code for Rich Menu Playground and add. [1]![]() |
ID | Search for the ID @try_richmenu from LINE and add the account.[2] |
# Common features of Rich Menu Playground
If you added Rich Menu Playground as a friend, now you can try the actions set on the rich menus. Learn the layout of the rich menus and how to check the action detail after you try an action.
# Rich menu layout
The rich menus of Rich Menu Playground have four main components:
- Tabs: Contains menus to try different actions.
- Navigation button: Moves between tab groups.
- Action button: Triggers the action set on the button. If an action requires parameters, a parameter gets a button each for you to try.
- Help button: Opens the document for the target action.
# Action detail
When you trigger an action, Rich Menu Playground does the action and then shows you the detail of the action you triggered. This helps you to know that the action was triggered, especially when the action doesn't render any visual result. The action detail includes the description of the action, action settings (parameters) and the webhook events the LINE Platform sent to the bot server.
# Actions available on Rich Menu Playground
With Rich Menu Playground you can test:
- Message action
- Postback action (1)
- Postback action (2)
- Postback action (3)
- URI action
- Datetime picker action
- Rich menu switch action
# Test message action
This tab lets you trigger a message action to send a message from the rich menu.
When a user sends a message through the rich menu in a chat with your LINE Official Account, the LINE Platform sends a corresponding message event to your bot server. Your bot server can then send a reply message with the reply token returned through the message event.
Button label | Action | Action object |
---|---|---|
Send message | Sends a message | {"type":"message", "label":"メッセージを送信する","text":"message sent successfully!"} |
# Test postback action (1)
This tab lets you trigger a postback action from the rich menu. When you trigger this action, the LINE Platform sends the bot server a postback event with the string specified in the data
property of the postback action object.
When a user taps on a rich menu with a postback action, the LINE Platform sends a postback event to your bot server. This postback event has the string you specify in the data
property of the postback action.
The content you specify in the data
property is not shown to the user. This guarantees that data such as unique parameters and identifiers is sent securely to your bot server. You can send a response message with the reply token you get from the postback event.
Button label | Action | Action object |
---|---|---|
With displayText | Triggers a postback action and shows a text in the chat | {"type":"postback","label":"ディスプレイテキストあり","data":"actionId=21","displayText":"ディスプレイテキストです。トーク画面に表示されます。"} |
No displayText | Triggers a postback action and shows no text in the chat | {"type":"postback","label":"ディスプレイテキストなし","data":"actionId=22"} |
To show text in a chat as a message from the user when a postback action is triggered, specify the displayText
property in the postback action object. The text is displayed in the chat but not sent as a message event to the bot server.
# Test postback action (2)
In this tab you can try the postback actions of opening and closing the rich menu. When the postback action is executed, a postback event containing the string specified in the data
property is sent from the LINE Platform to the bot server.
Button label | Action | Action object |
---|---|---|
Open rich menu | Executes a postback action with inputOption:openRichMenu set. | {"type":"postback","label":"リッチメニューを開く","data":"actionId=","inputOption":"openRichMenu"} |
Close rich menu | Executes a postback action with inputOption:closeRichMenu set. | {"type":"postback","label":"リッチメニューを閉じる","data":"actionId=","inputOption":"closeRichMenu"} |
# Test postback action (3)
In this tab, you can try out the rich menu with postback actions set to open keyboard and voice message input modes. Once the postback action is executed, a postback event containing the string specified in the data
property is sent from the LINE Platform to the bot server.
Button label | Action | Action object |
---|---|---|
Open keyboard | Executes a postback action with inputOption:openKeyboard set. | {"type":"postback","label":"キーボードを開く","data":"actionId=","inputOption":"openKeyboard"} |
Open keyboard with fillinText | Executes a postback action with inputOption:openKeyboard and fillInText set. | {"type":"postback","label":"キーボードを開くフィルインテキストあり","data":"actionId=","inputOption":"openKeyboard","fillInText":"---\予約番号: \予約メニュー番号: \n予約日時: \n---"} |
Open voice message input mode | Executes a postback action with inputOption:openVoice set. | {"type":"postback","label":"ボイスメッセージ入力モードを開く","data":"actionId=","inputOption":"openVoice"} |
# Test URI Action
In this tab, you can trigger a URI action from the rich menu. When you trigger this action, the uri
set for the action is opened in a web browser.
Button label | Action | Action object |
---|---|---|
Open a URL | Opens the specified URI | {"type":"uri","label":"URLを開く","uri":"https://developers.line.biz/docs/messaging-api/actions/#uri-action"} |
Open in an external browser | Opens the URI in an external browser (openExternalBrowser=0 ) | {"type":"uri","label":"外部ブラウザで開く","uri":"https://developers.line.biz/docs/messaging-api/actions/?openExternalBrowser=1#uri-action"} |
Open in a Chrome custom tab (Android only) | Opens the URI in the in-app browser, if supported (openInAppBrowser=0 ) | {"type":"uri","label":"Chromeカスタムタブで開く","uri":"https://developers.line.biz/docs/messaging-api/actions/?openInAppBrowser=0#uri-action"} |
Check configuration (The white buttons) | Doesn't open a URI but shows you the values set in the URI action object | Not applicable |
The openInAppBrowser
parameter opens LINE's in-app browser only in LINE for Android. For the specification on the openInAppBrowser
parameter, see Opening a URL in an external browser.
# Test datetime picker action
In this tab, you can trigger a datetime picker action from the rich menu. When you trigger this action, the date and time selection dialog is displayed. Once you select a date, the LINE Platform sends your bot server a postback event with selected date and time.
Button label | Action | Action object |
---|---|---|
Date and time selection (datetime mode) | Opens the date time picker set to the current date and time (mode set to datetime ) | {"type":"datetimepicker","label":"datetimeモード","data":"actionId=31","mode":"datetime"} |
With initial value set (with initial property) | Opens the date time picker set to the value of the initial property | {"type":"datetimepicker","label":"初期値設定あり","data":"actionId=32","initial:"2021-11-01t00:00","mode":"datetime"} |
With max and min values set (with min , max properties) | Opens the date time picker with min and max dates set | {"type":"datetimepicker","label":"最大・最小値設定あり","data":"actionId=33","mode":"datetime","max":"2021-12-31t23:59","min":"2021-11-01t00:00"} |
Select date (date mode) | Opens the date time picker set to the current date | {"type":"datetimepicker","label":"dateモード","data":"actionId=34","mode":"date"} |
Select time (time mode) | Opens the date time picker set to the current time | {"type":"datetimepicker","label":"timeモード","data":"actionId=35","mode":"time"} |
# Test rich menu switch action
In this tab, you can trigger a rich menu switch action from the rich menu. When you trigger this action, the rich menu is switched to the menu defined in rich menu aliases. When the rich menu is switched, the LINE Platform sends your bot server a postback event. This event has values you specify for the data
property and postback.params
object in the postback action object.
Button label | Action | Action object |
---|---|---|
Switch rich menu | Switches the rich menu | {"type":"richmenuswitch","label":"リッチメニューを切り替える","richMenuAliasId":"richmenu-richmenuswitch_2","data":"actionId=42"} |
Switch rich menu to a smaller size | Switches the rich menu to the smaller size specified by the height of the size property in the rich menu object | {"type":"richmenuswitch","label":"小さいサイズのリッチメニューに切り替える","richMenuAliasId":"richmenu-richmenuswitch_3","data":"actionId=43"} |
Learn how to add a friend via link or QR code (opens new window) (only available in Japanese) in the LINE user's guide. ↩︎
Learn how to add a friend from ID search (opens new window) (only available in Japanese) in the LINE user's guide. ↩︎