เครื่องมือทำ Rich Menu สลับหน้า LINE OA ฟรี ไม่ต้องเขียนโค้ด

ก่อนหน้านี้ผมเคยเขียนบทความ เปลี่ยน LINE OA ให้เป็นเว็บไซต์ส่วนตัว วิธีทำ Rich Menu สลับหน้าได้ สอนทำ Alias Rich Menu แบบ manual ทั้งหมด ทั้งออกแบบภาพ วาดตำแหน่งปุ่มด้วย LINE Bot Designer เอาโค้ด JSON ไปยิงผ่าน Postman — ทำได้จริงแต่ต้องใช้เวลาและความคุ้นเคยกับเครื่องมือฝั่งนักพัฒนาพอสมควร

เพื่อให้ทุกคนทำ Rich Menu สลับหน้าได้ง่ายขึ้น ทีม Team Digital เลยสร้างเครื่องมือฟรีที่รวมทุกขั้นตอนไว้ในหน้าเดียว อัปโหลดรูป ตั้งค่าปุ่ม กดปุ่มเดียวก็เปิดใช้งานบน LINE OA จริงได้เลย ไม่ต้องแตะ Postman หรือเขียน JSON เอง

เครื่องมือนี้ต่างจากวิธี Manual เดิมตรงไหน

• ไม่ต้องใช้ LINE Bot Designer วาดตำแหน่งปุ่มเอง — ระบบมีช่องแบ่งพื้นที่ปุ่มให้พร้อมใช้ (6 ช่องต่อแท็บ) ตั้งค่าลิงก์/ข้อความ/การสลับแท็บผ่านฟอร์มได้ทันที
• ไม่ต้องยิง API ผ่าน Postman เอง — ระบบส่งข้อมูลไปสร้าง Rich Menu ทั้ง 2 แท็บ อัปโหลดรูป ผูก Alias และตั้งเป็นเมนูเริ่มต้นให้อัตโนมัติ กดปุ่มเดียวจบ
• ปรับขนาดภาพให้อัตโนมัติ — อัปโหลดรูปจาก Canva เข้าไป ระบบปรับให้ได้ขนาดมาตรฐาน 2500×1686 พิกเซลที่ LINE กำหนดให้เอง ไม่ต้องมานั่งเช็คสัดส่วนเอง
• ใช้งานฟรี — เป็นเครื่องมือที่ Team Digital เปิดให้ใช้งานทั่วไป ไม่มีค่าใช้จ่าย

ส่วนที่ยังต้องเตรียมเองเหมือนเดิมคือ ออกแบบภาพเมนูด้วย Canva (เพราะเนื้อหา/ดีไซน์เป็นเรื่องเฉพาะของแต่ละธุรกิจ) และ Channel Access Token จาก LINE Official Account ของคุณเอง (ใช้เพื่อยืนยันว่าเป็นเจ้าของ LINE OA จริง)

วิธีใช้งานเครื่องมือ Rich Menu Switcher

ขั้นตอนที่ 1: เข้าเครื่องมือและ Login ด้วย LINE

เข้าเครื่องมือได้ที่หน้า Rich Menu Switcher ระบบจะให้ Login ด้วยบัญชี LINE ก่อน ถ้าเป็นนักเรียน/อาจารย์ที่มีข้อมูลอยู่ในระบบ Team Digital แล้ว จะข้ามขั้นตอนนี้ไปใช้งานได้ทันที แต่ถ้าเป็นบุคคลทั่วไปที่ Login ครั้งแรก จะมีฟอร์มสั้นๆ ให้กรอกชื่อ-นามสกุลกับอีเมล (กรอกครั้งเดียว)

จากนั้นยืนยันตัวตนด้วยรหัส OTP 6 หลักที่ส่งไปทางอีเมล ยืนยันสำเร็จแล้วเข้าใช้งานเครื่องมือได้เลย ครั้งต่อไปไม่ต้องกรอกซ้ำอีก

ขั้นตอนที่ 2: เตรียม Channel Access Token

ไปที่ LINE Developers Console (developers.line.biz) เลือก Provider แล้วเข้าช่องทาง LINE OA ของคุณ ไปที่แท็บ Messaging API เลื่อนหาหัวข้อ Channel access token (long-lived) กดออก Token แล้วคัดลอกมาวางในเครื่องมือ (ต่างจาก LINE Official Account Manager ที่ใช้จัดการแชท/broadcast — Token ต้องออกจาก Developers Console เท่านั้น)

วาง Token ลงในช่อง Channel Access Token (Long-Lived) ของเครื่องมือ แล้วกดปุ่ม Test Connection เพื่อเช็คว่าเชื่อมต่อ LINE OA ถูกช่องทางก่อนไปขั้นตอนถัดไป ถ้าเชื่อมสำเร็จจะขึ้นชื่อ LINE OA และ Basic ID ของคุณให้เห็นทันที

หมายเหตุ: เครื่องมือนี้ไม่บันทึก/จัดเก็บ Token ของคุณ

ขั้นตอนที่ 3: อัปโหลดรูปเมนู 2 แท็บ

เตรียมภาพที่ออกแบบจาก Canva ไว้ 2 ภาพ (แท็บหลักและแท็บเสริม) ตัวอย่างเช่น แท็บ 1 โชว์เมนูหลักสูตร/ตารางอบรม และแท็บ 2 โชว์เมนูเครื่องมือ/ประกาศนียบัตร

กดปุ่ม Choose File อัปโหลดรูปเข้าเครื่องมือทีละแท็บ ระบบจะปรับขนาดให้ตรงตามมาตรฐานของ LINE (2500×1686 พิกเซล) ให้อัตโนมัติ พร้อมแสดงสถานะ "พร้อมใช้งาน" และขนาดไฟล์หลังปรับให้เห็นทันที

ขั้นตอนที่ 4: ตั้งค่าปุ่มคลิกแต่ละช่อง

แต่ละแท็บแบ่งเป็น 6 ช่องปุ่ม เลือกได้ว่าแต่ละช่องจะให้ทำอะไรเมื่อลูกค้ากด เช่น เปิดลิงก์เว็บไซต์ (Open URL) ส่งข้อความอัตโนมัติ (Send Msg) หรือสลับไปอีกแท็บหนึ่ง (ค่าเริ่มต้นตั้งปุ่มสลับแท็บให้แล้ว ปรับแค่ปุ่มที่เหลือตามต้องการ) คลิกที่ช่องในภาพ Visual Grid Preview ด้านบนเพื่อเลือกตั้งค่า Action ของช่องนั้นได้ทันที

คลิกเลือกช่องแล้วเลือก Action Type ได้ตามต้องการ เช่นตั้งเป็น Open URL พร้อมใส่ลิงก์และชื่อปุ่ม

หรือถ้าอยากให้ปุ่มนั้นสลับไปอีกแท็บ ให้เลือก Switch Tab (richmenuswitch) แล้วระบุ Target Alias ID ของแท็บปลายทาง (ระบบตั้งค่าเริ่มต้นให้อัตโนมัติอยู่แล้วตามที่ตั้งชื่อ Alias ไว้ในขั้นตอนที่ 1)

ขั้นตอนที่ 5: กด Deploy

ตรวจสอบตัวอย่างเมนูให้เรียบร้อยแล้วกดปุ่ม Deploy Rich Menu มุมขวาบนของหน้าเครื่องมือ เพื่อสร้าง Rich Menu ทั้ง 2 แท็บ อัปโหลดรูป ผูก Alias และตั้งเป็นเมนูเริ่มต้นให้ลูกค้าทุกคนเห็นทันที ไม่ต้องกลับไปตั้งค่าอะไรเพิ่มใน LINE Developers Console อีก

ขั้นตอนที่ 6: บันทึก / โหลดค่าตั้งค่า

หลัง Deploy สำเร็จ หรือระหว่างตั้งค่าอยู่ก็ได้ กดปุ่ม บันทึกการตั้งค่าปัจจุบัน (.json) ที่มุมขวาบนของ Section การตั้งค่า Credentials เพื่อดาวน์โหลดชื่อกลุ่ม, Alias ID และการตั้งค่าปุ่มทั้ง 12 ช่อง (2 แท็บ) เก็บเป็นไฟล์ไว้ในเครื่อง (ไม่รวม Channel Access Token เพื่อความปลอดภัย)

ครั้งต่อไปที่กลับมาใช้เครื่องมือ หรืออยากแชร์ไฟล์ให้เพื่อนร่วมทีมตั้งค่า Rich Menu แบบเดียวกัน ให้กดปุ่ม โหลดการตั้งค่า (.json) แล้วเลือกไฟล์ที่เคยบันทึกไว้ ระบบจะเติมชื่อกลุ่ม, Alias ID และปุ่มทั้งหมดให้อัตโนมัติทันที ไม่ต้องตั้งค่าใหม่ทีละช่อง (รูปภาพยังต้องอัปโหลดใหม่ทุกครั้ง เพราะไฟล์ config เก็บเฉพาะข้อมูลปุ่ม ไม่ได้เก็บรูป)

ดูคลิปสาธิตการใช้งานเต็มรูปแบบ

ดูคลิปวิดีโอสาธิตการใช้งานเครื่องมือ Rich Menu Switcher ตั้งแต่ต้นจนจบ ตามขั้นตอนด้านบน

ข้อควรรู้ก่อนใช้งานจริง

• ทดสอบบนมือถือเท่านั้น — Rich Menu แบบสลับหน้าไม่แสดงผลบน LINE เวอร์ชันคอมพิวเตอร์ ต้องเช็คผลลัพธ์ผ่านมือถือเสมอ
• ระวังปิดหรือรีเฟรชหน้าก่อนพอใจ — ระบบไม่บันทึก Token ไว้ที่ไหนเลย (ต้องกรอกใหม่ทุกครั้งที่เข้าหน้านี้) ส่วนการตั้งค่าปุ่มและรูปที่อัปโหลด ถ้าปิดหรือรีเฟรชหน้าไประหว่างทางก็จะหายเช่นกัน แนะนำให้กด บันทึกการตั้งค่าปัจจุบัน เก็บเป็นไฟล์ไว้ก่อน (ดูขั้นตอนที่ 6)
• กด Deploy ซ้ำได้ ไม่ต้องกลัวเมนูซ้อน — ถ้ากด Deploy ไปแล้วอยากแก้ไขต่อ (ยังไม่ปิดหน้า) ปรับรูป/ปุ่มแล้วกด Deploy ซ้ำได้เรื่อยๆ ระบบจะสร้าง Rich Menu ชุดใหม่และผูก Alias เดิมทับให้ทุกครั้ง ลูกค้าจะเห็นเวอร์ชันล่าสุดเสมอ
• ระวัง Per-User Rich Menu บังเมนูหลัก — ถ้าเคยตั้งเมนูเฉพาะรายบุคคลไว้ก่อน เมนูเริ่มต้นที่เพิ่งตั้งอาจไม่แสดงผลกับลูกค้ากลุ่มนั้น เพราะ LINE ให้ความสำคัญกับเมนูรายบุคคลสูงกว่าเสมอ