คู่มือตั้งค่า LINE Messaging API + LIFF + LINE Login + Rich Menu (ใช้งานจริง)
14/05/2026 • เวลาอ่านประมาณ 10 นาที
1) เตรียมค่าในระบบก่อนตั้งค่า LINE
เตรียมโดเมน production เช่น https://queuebooking.com และ shop_key ของร้าน เช่น SHOP-TTLS2P.
ตรวจว่าระบบมี endpoint เหล่านี้: /api/line/webhook/{shopKey}, /liff/{shopKey}, /liff/{shopKey}/member.
แนะนำใช้ LIFF 2 ตัวแยกกัน: ตัวจองคิว (booking) และตัวข้อมูลสมาชิก (member) เพื่อจัดการ scope และ URL ชัดเจน.
2) ตั้งค่า Messaging API และ Webhook
เข้า LINE Developers > Channel ของ OA > Messaging API แล้วคัดลอก Channel access token (long-lived) และ Channel secret มาใส่ระบบ.
Webhook URL ให้ตั้งเป็น https://queuebooking.com/api/line/webhook/{shopKey}.
เปิด Use webhook = ON และกด Verify ต้องผ่าน.
แนะนำปิด Auto-reply ของ LINE Official Account Manager เพื่อไม่ชนกับข้อความจากระบบ.
3) ตั้งค่า LIFF สำหรับหน้า Booking
สร้าง LIFF app ชื่อเช่น queuebooking, Size = Full.
Endpoint URL ตั้งเป็น https://queuebooking.com/liff/{shopKey}.
Scopes แนะนำ: openid, profile, chat_message.write.
นำ LIFF ID ไปใส่ในระบบที่ฟิลด์ LIFF Booking ID หรือค่า NEXT_PUBLIC_LIFF_BOOKING_ID.
4) ตั้งค่า LIFF สำหรับหน้าข้อมูลสมาชิก
สร้าง LIFF app อีกตัวชื่อเช่น queuemember, Size = Full.
Endpoint URL ตั้งเป็น https://queuebooking.com/liff/{shopKey}/member.
ใช้ scope เหมือนหน้า booking ได้ (openid, profile, chat_message.write).
นำ LIFF ID ไปใส่ LIFF Member ID หรือ NEXT_PUBLIC_LIFF_MEMBER_ID.
5) ตั้งค่า LINE Login (ถ้าใช้แยกจาก Messaging API)
ถ้าบัญชีแยก Channel ให้สร้าง LINE Login Channel และเพิ่ม Callback URL ให้ตรงโดเมน production.
ในระบบนี้สามารถใช้ flow LIFF เป็นหลักได้ แต่ถ้ามีหน้า login เพิ่ม ควรใช้ Channel สำหรับ login โดยเฉพาะ.
ห้ามสลับ LIFF ID คนละ channel โดยไม่อัปเดต endpoint และ env เพราะจะเกิด invalid liff id.
6) ตั้งค่า Rich Menu ให้เปิด 2 หน้า
สร้าง Rich Menu ปุ่ม 1: จองคิว -> ลิงก์ https://liff.line.me/{LIFF_BOOKING_ID}.
ปุ่ม 2: ข้อมูลสมาชิก -> ลิงก์ https://liff.line.me/{LIFF_MEMBER_ID}.
กำหนดช่วงเวลาแสดงผล และ publish rich menu ให้ active กับ OA.
ทดสอบจากมือถือใน LINE จริง: กดแต่ละปุ่มแล้วต้องเข้า endpoint ตามที่ตั้งไว้.
7) Checklist ป้องกันปัญหา Invalid LIFF ID
LIFF ID ในระบบต้องตรงกับ LIFF app ที่ตั้ง endpoint ไว้จริง.
Endpoint URL ต้องตรง path เป๊ะ: booking = /liff/{shopKey}, member = /liff/{shopKey}/member.
โดเมนต้องเป็น https และตรงกับที่ deploy จริง.
ถ้าเพิ่งแก้ค่า env บน Vercel ต้อง Redeploy ก่อนทดสอบ.
8) ทดสอบ end-to-end หลังตั้งค่า
ลูกค้ากด Rich Menu > จองคิว > เลือกบริการ/วัน/เวลา > ยืนยัน.
ระบบต้องส่งข้อความยืนยันกลับใน LINE และคิวต้องเข้า dashboard ฝั่งร้าน.
ลูกค้ากด Rich Menu > ข้อมูลสมาชิก ต้องเห็นโปรไฟล์และประวัติคิวได้.
ไฟล์แนบและภาพตัวอย่างการตั้งค่า
ใช้ภาพตัวอย่างตรวจเทียบค่าหน้าจอจริงก่อนกด Verify/Publish
ดาวน์โหลดคู่มือการตั้งค่า LINE (PDF)
ตัวอย่างหน้าตั้งค่า Messaging API และ Webhook URL
ตัวอย่าง LIFF สำหรับหน้า Booking (/liff/{shopKey})
ตัวอย่าง LIFF สำหรับหน้าข้อมูลสมาชิก (/liff/{shopKey}/member)
ตัวอย่าง Rich Menu 2 ปุ่ม: จองคิว และ ข้อมูลสมาชิก