Module 4: Rich Menus

4.1 What is a Rich Menu?

A Rich Menu is a customizable image-based menu bar that appears at the bottom of the chat screen. It's the first thing users see and the primary navigation for your OA.

• Displays as a banner image above the chat input area
• Divided into tap areas — each area triggers an action
• Can be different for different users (per-user rich menu)
• Can switch between menus programmatically (rich menu aliases)

4.2 Design Guidelines

+-------------------+-------------------+-------------------+
|      Action 1     |      Action 2     |      Action 3     |
|    (Menu/Catalog) |   (Promotions)    |    (Contact Us)   |
+-------------------+-------------------+-------------------+
|      Action 4     |      Action 5     |      Action 6     |
|   (My Account)    |   (Store Locator) |   (Chat/Help)     |
+-------------------+-------------------+-------------------+

4.3 Creating a Rich Menu (API)

Step 1: Create the rich menu object

POST https://api.line.me/v2/bot/richmenu

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": true,
  "name": "Main Menu v1",
  "chatBarText": "Menu",
  "areas": [
    {
      "bounds": { "x": 0,    "y": 0,   "width": 833, "height": 843 },
      "action": { "type": "message", "text": "🍴 Menu" }
    },
    {
      "bounds": { "x": 833, "y": 0,   "width": 834, "height": 843 },
      "action": { "type": "message", "text": "💰 Promotions" }
    },
    {
      "bounds": { "x": 1667, "y": 0,   "width": 833, "height": 843 },
      "action": { "type": "uri", "uri": "https://line.me/R/ti/p/@yourid" }
    },
    {
      "bounds": { "x": 0,    "y": 843, "width": 833, "height": 843 },
      "action": { "type": "postback", "data": "action=account", "label": "My Account" }
    },
    {
      "bounds": { "x": 833, "y": 843, "width": 834, "height": 843 },
      "action": { "type": "location" }
    },
    {
      "bounds": { "x": 1667, "y": 843, "width": 833, "height": 843 },
      "action": { "type": "message", "text": "📞 Contact" }
    }
  ]
}

Response: { "richMenuId": "richmenu-..." }

Step 2: Upload the rich menu image

POST https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content
Content-Type: image/png
Authorization: Bearer {CHANNEL_ACCESS_TOKEN}

[Binary image data]

Step 3: Set as default rich menu

POST https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}

This shows the rich menu to all users by default.

Using curl:

# Create rich menu
RICH_MENU_ID=$(curl -X POST https://api.line.me/v2/bot/richmenu \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"size":{"width":2500,"height":1686},"selected":true,"name":"Main","chatBarText":"Menu","areas":[...]}' \
  | jq -r '.richMenuId')

# Upload image
curl -X POST "https://api-data.line.me/v2/bot/richmenu/$RICH_MENU_ID/content" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: image/png" \
  --data-binary @menu.png

# Set as default
curl -X POST "https://api.line.me/v2/bot/user/all/richmenu/$RICH_MENU_ID" \
  -H "Authorization: Bearer $TOKEN"

4.4 Per-User Rich Menus

Different users can see different rich menus. Useful for:

• Logged-in users vs anonymous users
• VIP members vs regular customers
• Users in different stages of a funnel

// Link a specific user to a specific rich menu
POST https://api.line.me/v2/bot/user/{userId}/richmenu/{richMenuId}

// Get which rich menu a user sees
GET https://api.line.me/v2/bot/user/{userId}/richmenu

// Unlink a user from their rich menu
DELETE https://api.line.me/v2/bot/user/{userId}/richmenu

Batch operations

// Link up to 500 users at once
POST https://api.line.me/v2/bot/richmenu/bulk/link
{
  "richMenuId": "richmenu-xxx",
  "userIds": ["U4a8b...", "Ucdef...", ...]  // max 500
}

// Unlink up to 500 users
POST https://api.line.me/v2/bot/richmenu/bulk/unlink
{
  "userIds": ["U4a8b...", "Ucdef...", ...]
}

4.5 Rich Menu Aliases — Switching Menus Dynamically

Rich Menu Aliases let you switch the user's rich menu via the richmenuswitch action, enabling tab-bar-like navigation.

Step 1: Create an alias

POST https://api.line.me/v2/bot/richmenu/alias
{
  "richMenuAliasId": "main-menu",
  "richMenuId": "richmenu-xxx"
}

Step 2: Use in a message action

{
  "type": "richmenuswitch",
  "richMenuAliasId": "profile-menu",
  "data": "switched_to_profile"
}

4.6 Rich Menu via OA Manager (GUI)

The OA Manager provides a built-in Rich Menu builder with drag-and-drop design:

1. Go to manager.line.biz
2. Navigate to Rich Menu in the sidebar
3. Use the Rich Menu Builder template (chooses 2500x1686 or 2500x843)
4. Upload a background image or use the built-in templates
5. Drag action zones onto the image
6. Set actions for each zone
7. Publish

4.7 Best Practices

• Keep it simple: 6 actions max. Too many options overwhelm users.
• Use icons + labels: Users scan visually. Clear icons improve tap-through rate.
• Put most-used actions first: Top-left is the primary action (thumb-friendly).
• Use postback for tracking: Use postback instead of message to track which menu items are most popular.
• Align with business goals: If your goal is sales, make "Order" or "Menu" the first action.
• Update seasonally: Refresh the image for holidays, promotions, campaigns.
• Test on mobile: Check how your rich menu looks on both iOS and Android.