Why Does Your Line Official Account Look Like a Scam?

If you've successfully applied for a Line Official Account but only uploaded a profile picture with nothing else below it, customers' first instinct when adding you is usually: "Is this a scam?"

In modern business operations, Rich Menus have become an absolute indicator of an official account's professionalism and attention to detail. They are like the "storefront window" of your business.
A well-designed, fully functional Rich Menu not only instantly boosts brand trust but also acts like a 24/7 super salesperson, automatically guiding customers to click on the information you most want them to see (e.g., latest menu, appointment booking, FAQs).

More importantly, with a Rich Menu, customers don’t need to type inquiries manually—just "one click" can trigger the AI chatbot auto-reply system we’ll teach later.

Zero Coding! Setting Up Rich Menus in Line’s Official Backend

Before diving into advanced Vibe Coding, Line actually provides a very user-friendly Rich Menu setup backend that requires no coding at all. For micro-businesses or individual studios just starting out, this is more than sufficient.

Step 1: Prepare the Menu Image (Canva Is Your Best Friend)

Line has strict requirements for Rich Menu image dimensions. The most common sizes are 2500 x 1686 pixels (large menu, 6 grids) or 2500 x 843 pixels (small menu, 3 grids).

Open the free design tool Canva.
Search for "Line Rich Menu" templates.
Pick a template that matches your brand style, modify the text and images, and download it as JPG or PNG (file size must be under 1MB).

Step 2: Log in to Line’s Official Account Backend (Line Official Account Manager)

Go to the Line Official Account Manager and log in.
Find the "Rich Menu" option in the left sidebar (usually under "Chat Settings") and click "Create."

Step 3: Configure Menu Details and Click Actions

Title: This is for your internal management only; customers won’t see it (e.g., 2024 Spring New Menu).
Display Period: Set the date range for this menu (if you want it displayed long-term, set the end date 10 years later).
Default Display: Strongly recommend selecting "Show" so customers see the menu immediately upon opening the chat.
Choose Layout: Click "Select Layout" and pick the grid count (e.g., 6 grids) matching your Canva design.
Upload Image: Upload the image you downloaded earlier.
Set Click Actions: This is the most critical step! For each grid (A, B, C...), define what happens when clicked. Common actions include:
- URL: Opens your website or booking page.
- Text: Automatically sends a predefined message (e.g., "Show me the menu"). This is a key technique for triggering AI chatbots later!
- Coupons/Stamp Cards: If you use Line’s built-in marketing tools, link them here.
After verifying, click the green "Save" button at the bottom.

Congratulations! Open your official account chat on your phone—a beautiful Rich Menu now appears at the bottom!

Advanced: Break the Limits! Programmatically Control Rich Menus (Messaging API)

If you run a local breakfast shop, the official backend setup is perfectly sufficient.
But if you’re a Vibe Coder looking to monetize your skills or building a complex franchise system, you’ll notice a fatal flaw in the official backend: "It can only show one fixed menu to everyone."

Imagine a high-end business scenario:

When a customer is a "regular member," their Rich Menu shows: "View Menu, Join VIP Program."
When they upgrade to a "VIP member," their menu instantly switches to: "VIP Order Channel, My Exclusive Discount Code."

This "dynamic Rich Menu switching based on user status" is impossible with the official backend. We must summon the real weapon: Line Messaging API.

Vibe Prompt in Action: Dynamic Rich Menu Switching Script

To control Rich Menus via API, you don’t need to slog through Line’s lengthy English documentation. As long as you have your Channel Access Token (covered in Chapter 1), you can use Cursor to write this spell:

【Line Dynamic Menu Switching Prompt】
I’m developing a Line Bot (using Node.js and @line/bot-sdk).
I have two Rich Menu IDs:

richmenu-normal-123 (default menu)

richmenu-vip-456 (VIP menu)

Write a function switchRichMenu(userId, isVip):
If isVip is true, call Line API to bind the VIP menu to the user.
If isVip is false, bind the default menu.
Include full error handling and log API success/failure messages.

AI-Generated Advanced API Code:

const line = require('@line/bot-sdk');

// Configure your Token  
const client = new line.Client({
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN'
});

async function switchRichMenu(userId, isVip) {
  try {
    const richMenuId = isVip ? 'richmenu-vip-456' : 'richmenu-normal-123';
    
    // Call Line API to bind the menu to the userId  
    await client.linkRichMenuToUser(userId, richMenuId);
    
    console.log(`Successfully switched user ${userId} to: ${isVip ? 'VIP Menu' : 'Default Menu'}`);
  } catch (error) {
    console.error('Rich Menu switch failed:', error.originalError.response.data);
  }
}

It’s that simple! With Vibe Coding, you’ve instantly mastered "dynamic menu binding"—a skill even seasoned backend engineers often struggle with.
In the freelance market, this is typically a "custom advanced feature" worth NT$30,000–50,000.

In the next chapter, we’ll officially dive into AI brain integration. Using Vibe Coding, we’ll demonstrate how to build a "breakfast shop auto-ordering chatbot" that understands natural language and handles orders automatically!

Chapter Summary

Understand core concepts and principles
Master implementation methods and techniques
Familiar with common issues and solutions
Able to apply in real projects