หลังจากที่เราได้เรียนรู้การใช้ AI Agent จัดการระบบหลังบ้านอย่าง LINE Bot MCP Server กันไปแล้ว ในบทความนี้เราจะมาเจาะลึกฝั่งหน้าบ้านกันบ้าง หากคุณเคยใช้งาน LINE แล้วเจอหน้าต่างเด้งขึ้นมาให้ลงทะเบียน จองคิว หรือเลือกซื้อสินค้าได้โดยไม่ต้องสลับแอปไปไหน นั่นคือผลงานของ LINE LIFF เครื่องมือที่จะเปลี่ยนหน้าแชตธรรมดาให้กลายเป็นแอปพลิเคชัน

Line-LIFF-คืออะไร

LINE LIFF คืออะไร

LINE Front-end Framework คือระบบที่ช่วยให้เราสามารถสร้าง Web Application เพื่อเปิดใช้งานภายในแอปพลิเคชัน LINE ได้โดยตรง ผู้ใช้งานสามารถกดทำรายการซับซ้อน เช่น กรอกฟอร์ม เลือกสินค้า หรือลงทะเบียน ได้อย่างราบรื่นโดยไม่ต้องกดสลับไปเปิดเบราว์เซอร์ภายนอก (เช่น Safari หรือ Chrome)

ฟีเจอร์เด่น LINE LIFF ทำอะไรได้บ้าง?

  • ดึงข้อมูลโปรไฟล์อัตโนมัติ (Profile Retrieval): ขออนุญาตดึงข้อมูลชื่อ รูปโปรไฟล์ และ User ID ได้ทันที ช่วยลดขั้นตอนให้ผู้ใช้ไม่ต้องพิมพ์กรอกข้อมูลส่วนตัวใหม่
  • ส่งข้อความกลับเข้าห้องแชต (Send Messages): สั่งให้ระบบส่งข้อความ สติกเกอร์ หรือ Flex Message กลับไปยังห้องแชตในนามของผู้ใช้งานได้หลังทำรายการเสร็จ
  • แสดงผลได้ 3 ขนาด (View Size): เลือกขนาดหน้าต่างป๊อบอัพได้ตามความเหมาะสม ได้แก่
    • Compact (ครึ่งหน้า)
    • Tall (70-80% ของหน้าจอ)
    • Full (เต็มหน้าจอ)
  • สแกน QR Code ในตัว: มี API รองรับการเปิดกล้องเพื่อสแกน QR Code ผ่านหน้าเว็บ LIFF สำหรับเช็กอินหรือรับสิทธิ์ได้ทันที
  • ระบบแชร์หาเพื่อน (Target Picker): ผู้ใช้สามารถกดส่งการ์ดข้อมูล คูปอง หรือลิงก์ชวนเพื่อนในไลน์ต่อได้ทันทีจากหน้า LIFF

ค่าใช้จ่ายที่ต้องรู้

คำถามยอดฮิตที่หลายคนสงสัยคือ LINE LIFF ใช้งานฟรีมั้ย?

  • ตัวแพลตฟอร์ม LIFF (LINE Developers Console): ใช้งานฟรี 100% ทาง LINE ไม่คิดค่าธรรมเนียมในการสร้าง Channel หรือการเรียกใช้ LIFF SDK
  • ค่าใช้จ่ายที่เกิดขึ้นจริง: จะเป็นส่วนของ ค่าพัฒนา Web Application (ค่าจ้างนักพัฒนา/ค่าเซิร์ฟเวอร์ Hosting/Domain HTTPS) และ ค่าแพ็กเกจข้อความของ LINE Official Account (LINE OA) หากมีการส่งข้อความ Broadcast ตอบกลับผู้ใช้งาน

ข้อจำกัด

  • ต้องใช้ HTTPS เท่านั้น: ลิงก์ URL ของเว็บไซต์ที่จะนำมาเชื่อมต่อ (Endpoint URL) ต้องมีความปลอดภัยและเป็น https:// เท่านั้น (เช่น ลิงก์จาก GitHub Pages หรือ Vercel)
  • ข้อจำกัดเมื่อเปิดนอกแอป LINE (External Browser): หากผู้ใช้ก๊อปปี้ลิงก์ไปเปิดใน Chrome หรือ Safari ฟังก์ชันบางอย่างที่ต้องพึ่งพาระบบแชท LINE (เช่น การส่งข้อความกลับเข้าแชท liff.sendMessages) จะใช้งานไม่ได้
  • ต้องขอสิทธิ์การใช้งาน (Scopes): ฟังก์ชันส่งข้อความแทนผู้ใช้ต้องเปิดสิทธิ์ chat_message.write ในระบบก่อน หากไม่ได้เปิดสิทธิ์ไว้ การส่ง Flex Message จะเกิดข้อผิดพลาด
  • การแสดงผลตามขนาดหน้าจอ: LIFF มีการจำกัดรูปแบบขนาดหน้าจอแบบ Full (เต็มหน้าจอ), Tall (75% ของหน้าจอ), และ Compact (50% ของหน้าจอ) ซึ่งต้องออกแบบ UI ให้รองรับกับอุปกรณ์มือถือขนาดต่างๆ

ตัวอย่างการใช้งาน LINE LIFF ในธุรกิจจริง

ประเภทธุรกิจตัวอย่างการใช้งาน LINE LIFFผลลัพธ์ที่ได้
ระบบสมาชิก (CRM)ออกบัตรสมาชิกดิจิทัล ลงทะเบียนสะสมแต้ม เช็กคะแนนคงเหลือลูกค้าไม่ต้องพกบัตรแข็ง และไม่ต้องดาวน์โหลดแอปใหม่ให้หนักเครื่อง
ร้านค้าออนไลน์ (E-Commerce)แสดงแคตตาล็อก เลือกสินค้าใส่ตะกร้า ชำระเงินปิดการขายจบใน LINE ลดอัตราการละทิ้งตะกร้าสินค้า
ธุรกิจบริการ / คลินิกระบบจองคิว นัดหมายแพทย์ เลือกวันเวลาและบริการลดภาระแอดมินในการตอบแชตสลับตารางนัด
งานอีเวนต์ (Events)สแกน QR Code ลงทะเบียนเข้างาน รับคูปองอาหารเช็กอินรวดเร็ว ลดการแออัดหน้าร้าน

ข้อแตกต่างระหว่าง LINE LIFF, Rich Menu และ Flex Message

  • Rich Menu: ทำหน้าที่เป็นปุ่มลัด (Shortcut) เพื่ออำนวยความสะดวกให้ผู้ใช้ไม่ต้องพิมพ์คำสั่งเอง ใช้สำหรับพาผู้ใช้ไปยังบริการต่างๆ ขององค์กร จะแสดงเป็นแถบเมนูกดแบบถาวรบริเวณด้านล่างของหน้าแชต
  • Flex Message: เน้นการนำเสนอข้อมูล (Output) แทนที่การพิมพ์ข้อความตัวอักษรยาวๆ โดยสามารถจัดวางรูปภาพ ข้อความ และปุ่มกดให้สวยงาม เป็นระเบียบ และดูเป็นมืออาชีพ
  • LINE LIFF: เป็นพื้นที่สำหรับจัดการกระบวนการที่ซับซ้อน (Complex Interaction) เมื่อหน้าต่างแชตแบบเดิมไม่ตอบโจทย์ เช่น การให้ผู้ใช้ลากแผนที่เพื่อปักหมุดที่อยู่ การเลือกวันที่จากปฏิทิน หรือการกรอกข้อมูลส่วนตัว โดยที่ผู้ใช้ไม่ต้องกดสลับหน้าจอออกไปเปิดแอปพลิเคชันอื่น

เมื่อนำทั้ง 3 ส่วนมาใช้งานร่วมกัน:
ผู้ใช้งานกดปุ่ม “สมัครสมาชิก” บน Rich Menu ระบบทำการเปิดหน้าเว็บ LINE LIFF ขึ้นมาเพื่อให้ผู้ใช้กรอกข้อมูลส่วนตัวและเบอร์โทรศัพท์ เมื่อผู้ใช้กด Submit ระบบประมวลผลเสร็จสิ้นและส่ง Flex Message หน้าตาเหมือนบัตรสมาชิกดิจิทัลกลับไปให้ผู้ใช้ในห้องแชตทันที

วิธีการสร้าง LINE LIFF

การพัฒนาระบบจองคิวและนัดหมายด้วย LINE LIFF แบ่งออกเป็น 3 ส่วนหลัก ได้แก่ การเตรียมระบบ (Setup), การวางระบบสถาปัตยกรรม (Workflow), และการเขียนโค้ดเชื่อมต่อ (Implementation)

  1. เครื่องมือและสถาปัตยกรรมระบบ (Tech Stack)
    1. LINE Developers Console: สร้าง Messaging API Channel และเพิ่ม LIFF App (ตั้งค่า Size เป็น Tall หรือ Full เพื่อความสวยงาม)
    2. Frontend: HTML, CSS (Tailwind/Bootstrap) และ JavaScript โดยเรียกใช้ @line/liff SDK
    3. Backend & Database: Node.js / Python (FastAPI) คู่กับ PostgreSQL หรือ Firebase
  2. ลำดับการทำงานของระบบ (Workflow & Data Flow)
    1. Identity Verification : เมื่อกดเปิด LIFF จาก Rich Menu ระบบจะเรียก liff.init() เพื่อดึง userId, displayName และรูปโปรไฟล์มาแสดงต้อนรับอัตโนมัติ
    2. Slot Availability : หน้า UI ดึงรายการเวลาที่ยังว่างจาก Database มาแสดงเป็นปฏิทินและตัวเลือกช่วงเวลา
    3. Save Booking : เมื่อผู้ใช้กด “ยืนยัน” ระบบส่งข้อมูล (User ID, วันที่, เวลา, บริการ) ไปบันทึกใน Database
    4. Confirmation : สั่งงานผ่าน LIFF เพื่อส่ง Flex Message สรุปใบนัดหมายกลับเข้าไปในห้องแชตของลูกค้า แล้วสั่งปิดหน้าต่าง LIFF ด้วย liff.closeWindow()
  3. การเขียนโค้ดส่วนสำคัญ (JavaScript)

ร้านตัดผม HairCare Booking

จากโครงการระบบจองคิว HairCare Booking ที่เราได้สร้างไฟล์ index.html และอัปโหลดขึ้น GitHub Pages เรียบร้อยแล้ว สามารถนำมาประกอบเข้ากับ LINE LIFF ได้ตามขั้นตอนดังนี้:

ไฟล์ index.html และอัปโหลดขึ้น GitHub Pages

1. สมัครและตั้งค่าใน LINE Developers Console

  • เข้าไปที่ LINE Developers Console แล้วเข้าสู่ระบบด้วยบัญชี LINE
LINE Developers Console หน้าจอเข้าไปที่ LINE Developers Console แล้วเข้าสู่ระบบด้วยบัญชี LINE
  • กดปุ่ม Console ที่มุมขวาบน เพื่อเข้าสู่หน้าจัดการหลัก
หน้าจอเข้าสู่หน้าจัดการหลักLINE Developers Console
  • เลือก Provider ของคุณ (หรือสร้างใหม่) หากเป็นการเข้าใช้งานครั้งแรก ระบบจะให้ตั้งชื่อ Provider ให้ระบุชื่อแบรนด์หรือองค์กร

2. สร้าง Channel ประเภท LINE Login (หรือใช้ Messaging API Channel ที่มีอยู่)

สร้าง-Channel-ประเภท-LINE-Login
  • กรอกข้อมูล Channel:
    1. Channel name: HairCare Booking
    2. Channel description: ระบบจองคิวร้านตัดผม
    3. App types: ติ๊กเลือก Web app หรือ Mobile app
  • ติ๊กยอมรับข้อตกลงแล้วกด Create
กรอกข้อมูล-Channel

3. สร้าง LIFF App

  • คลิกเข้าไปที่ Channel แล้วเลือกแท็บ LIFF จากนั้นกด Add
หน้าจอการสร้าง LIFF application
  • กรอกข้อมูลการตั้งค่า:
    1. LIFF app name: HairCare Booking
    2. Size: เลือก Full หรือ Tall
    3. Endpoint URL: ใส่ลิงก์ GitHub Pages ของร้าน เช่น https://xxx.xx/HairCare-Booking-App/ หรือ ใส่ URL ทดสอบชั่วคราว เช่น https://google.com หรือ Netlify/Vercel URL ไปก่อนได้
    4. Scopes: ติ๊กเลือก profile, openid, และที่สำคัญคือ chat_message.write (เพื่อให้ส่ง Flex Message ยืนยันการจอได้)
    5. กด Add เมื่อเสร็จสิ้น
หน้าจอกรอกรายละเอียดการสร้าง LIFF app

4. นำ LIFF ID และ LIFF URL มาใช้งาน

หน้าจอแสดง LIFF ID และ LIFF URL มาใช้งาน
  • เมื่อสร้างเสร็จ ระบบจะให้ LIFF ID (เช่น 200xxxxxxx-xxxxxxx) และ LIFF URL (เช่นhttps://liff.line.me/200xxxxxxxxxxxxxx)
  • อัปเดตโค้ด: นำ LIFF ID ไปวางแทนที่ในไฟล์ index.html : JavaScript const LIFF_ID = “200xxxxxxx-xxxxxxx”;
  • กด Commit changes เพื่อบันทึกไฟล์
หน้าจอส่วนของโค้ดที่ต้องนำLIFF ID ไปแทนที่
const LIFF_ID = "YOUR_LIFF_ID_HERE";

5. เชื่อมต่อเข้ากับ LINE Official Account (LINE OA)

หน้าจอ LINE Official Account (LINE OA)
  • นำ LIFF URL (https://liff.line.me/200xxxxxxx-xxxxxxx) ไปผูกไว้กับปุ่มใน Rich Menu ของร้าน หรือใส่ไว้ในข้อความตอบกลับอัตโนมัติ (Auto-response Message)
หน้าจอแสดงLIFF URL
หน้าจอการนำ LIFF URL ไปผูกไว้กับปุ่มใน Rich Menu ของร้าน
  • เมื่อลูกค้าเปิดแอป LINE ของร้านแล้วกดปุ่ม “จองคิวทำผม” ระบบจะเปิดหน้าเว็บ LIFF ขึ้นมา ให้ลูกค้าเลือกวัน เวลา และบริการ เมื่อกด “ยืนยันการจองคิว” ระบบจะส่ง Flex Message ใบยืนยันการจองกลับเข้าไปในแชทของลูกค้าทันที
ตัวอย่างหน้าจอการเข้าใช้งาน LIFF application

เมื่อทุกคนได้ทำความรู้จักว่า LINE LIFF คืออะไร รวมถึงทราบว่าตัวระบบ ใช้งานฟรีมั้ย และเข้าใจ ข้อจำกัด LINE LIFF แล้ว จะเห็นได้ว่าการนำ ตัวอย่างการใช้งาน LINE LIFF ไปปรับใช้จะช่วยเปลี่ยน LINE OA ให้กลายเป็น Super App ที่จะสร้างประสบการณ์ที่ดีให้กับลูกค้าที่เข้ามาใช้งานได้