【LINE Bot Practical Guide】Make Queries More Intuitive! Upgrade Your LINE Bot with AI and Rich Menu

Previously in A Guide to Deploying LINE Bot Webhook on Cloud Run, we successfully built a basic LINE Bot skeleton.

As features grow richer, relying solely on "user typing keywords" for queries is no longer intuitive enough. To make Ubike queries simpler and the user experience smoother, I decided to add the LINE Rich Menu feature to the project! Now, as soon as users enter the chat room, they can click on the beautiful icons below to query instantly.

Instead of talking about deep code changes, this article will focus on sharing how I used AI to generate materials, resized them online, and step-by-step perfectly set up the LINE Rich Menu in practice.

💡 Why Use a Rich Menu?¶

Traditional LINE Bots require users to type keywords like "Query O3" or "MTB", which not only tests the user's memory but is also prone to typos that cause queries to fail.

With a Rich Menu, we can turn high-frequency functions (such as Ubike, O3, and MTB queries) directly into fixed buttons at the bottom of the chat room. Users "click what they see," greatly improving query convenience.

🎨 Step 1: Rapid Menu Image Generation with AI¶

There are many beautiful UI templates out there, but finding icons that fit your exact needs isn't easy. This time, I got AI to help generate a three-slot horizontal menu image layout representing "Ubike", "O3", and "MTB" from left to right, according to LINE's official layout proportions.

The benefit of using AI generation is consistency in style, precise text, and complete customization for specific functions.

📐 Step 2: "Image Resizing" Compliant with Official LINE Rules¶

Although the AI-generated images look great, their resolution or proportions often do not meet LINE's strict official restrictions. If you upload them directly, the system will throw an error.

LINE Rich Menu Size Limits:¶

• Large Menu: 2500 × 1686 or 1200 × 810 pixels
• Small Menu: 2500 × 843 or 1200 × 405 pixels (we are using this three-slot horizontal layout this time)
• File Format: JPG or PNG, file size must be under 1MB.

My Solution:¶

Since the AI-generated image sizes had slight discrepancies, I used an online image resizer to crop and scale the image to exactly the officially specified 2500 × 843 pixels, compressing the file size to ensure a successful upload.

💡 Tip: Search for "online image resizer" or "resize image pixels." There are plenty of free, web-based tools that let you adjust width and height without installing anything. It's incredibly convenient!

⚙️ Step 3: LINE Developer Console and Key Settings¶

Once the image is ready, the next step is making it appear in the chat room. Whether you are configuring it through the LINE Official Account manager console or controlling it via the Messaging API, there is one crucial but easily overlooked hidden setting!

1. Configure via LINE Official Account Manager (Recommended, Simplest)¶

1. Log into LINE Official Account Manager.
2. Go to the left menu: Chat room settings > Rich menus, then click Create new.
3. Choose the corresponding three-slot horizontal layout and upload our resized image.
4. Set the actions for zones A, B, and C (for example: automatically sending text like "Query Ubike", "Query O3", or "Query MTB" when clicked).
5. ✨ 【The Most Critical Step】: In the "Advanced settings" section at the bottom of the page, locate Menu default display state and make sure to select Show.

2. Configure via Messaging API Control¶

If you are like me and prefer to keep control of the menu within code, pay attention to the JSON structure when creating the Rich Menu:

• Ensure that the selected attribute is set to true (i.e., "selected": true).
• Once created, remember to send a POST request to bind this richMenuId as the global default:

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

Why is this important? If default display is not enabled (or selected is set to false), the menu will be collapsed by default. When users enter, they will only see an empty chat room and must manually click the "Open Menu" bar at the bottom to expand it, which ruins the warm, guided user experience!

🚀 The Results¶

With the settings in place, when users join or enter my LINE official account, the beautifully aligned Rich Menu pops up immediately at the bottom. Clicking the left section queries Ubikes, the middle queries O3, and the right queries MTB. No more typing needed—the user experience is elevated to a whole new level!

If you are running a LINE Bot, why not try using AI to give your bot a stylish new look too!