LRRich Menu Studio
Code examples

LINE Rich Menu JSON examples for common actions

Adaptable Rich Menu JSON with URI, message, postback, and practical area-coordinate validation.

Learn the Rich Menu object from a complete example and identify which fields must match your artwork and backend.

01

A three-button menu example

This example uses a 2500×843 image split into three columns. The final area absorbs the remaining pixel so coverage reaches the right edge.

{
  "size": { "width": 2500, "height": 843 },
  "selected": true,
  "name": "Three-button main menu",
  "chatBarText": "Menu",
  "areas": [
    {
      "bounds": { "x": 0, "y": 0, "width": 833, "height": 843 },
      "action": { "type": "uri", "label": "Products", "uri": "https://example.com/products" }
    },
    {
      "bounds": { "x": 833, "y": 0, "width": 833, "height": 843 },
      "action": { "type": "message", "label": "Promotions", "text": "Show promotions" }
    },
    {
      "bounds": { "x": 1666, "y": 0, "width": 834, "height": 843 },
      "action": { "type": "postback", "label": "Booking", "data": "action=booking", "displayText": "Book now" }
    }
  ]
}
02

Rules for the root object

Every bounds object should use non-negative integer coordinates, remain inside the image, and have positive width and height. Validate accidental overlaps before publishing.

  • size must match the image and its valid ratio
  • selected controls whether the menu opens by default in chat
  • name is internal and supports up to 300 characters
  • chatBarText is user-visible and supports up to 14 characters
  • areas supports up to 20 entries
03

Additional action objects

Rich menu switch requires an alias already linked to a target menu. Postback and datetime actions require a webhook that understands the data value.

// Pick a date
{ "type": "datetimepicker", "label": "Pick a date", "data": "action=pick-date", "mode": "date" }

// Switch Rich Menu
{ "type": "richmenuswitch", "label": "Next page", "richMenuAliasId": "menu-page-2", "data": "action=switch&page=2" }

// Copy text (LINE 14.0.0+ on iOS/Android)
{ "type": "clipboard", "label": "Copy code", "clipboardText": "WELCOME100" }
04

Validate JSON before creation

A successful validation confirms that the object can be created. It does not prove image alignment or that destination URLs and webhooks work, so end-to-end testing remains necessary.

  • Parse valid JSON first
  • Check text length limits
  • Check every side of each bounds object
  • Check URI scheme and percent-encoding
  • Call /v2/bot/richmenu/validate with the channel token
VERIFIED SOURCES

Official references

Confirm the latest official specification before using a workflow in a critical system.

FROM GUIDE TO CANVAS

Ready to map it on a canvas?

Drag, move, and resize action areas, then validate the JSON before publishing.

Open Studio