วิธีทำ Custom Action Button ใน LINE MINI App
Custom Action Button ของ LINE MINI App คือปุ่มในส่วนเนื้อหาที่เปิดหน้าจอเลือกผู้รับ เมื่อผู้ใช้เลือกเพื่อน กลุ่ม หรือแชตแล้ว liff.shareTargetPicker() จะส่งการ์ดที่นักพัฒนาสร้างในนามของผู้ใช้ การทำงานที่ถูกต้องต้องใช้รูปแบบ Flex Message ตามข้อกำหนดของ LINE ใช้ Permanent link สำหรับหน้ารายละเอียด และแยกสถานะสำเร็จ ยกเลิก และล้มเหลวออกจากกัน
สรุปสำคัญ
- ปุ่มมาตรฐานบน header แชร์หน้าปัจจุบันอัตโนมัติ ส่วนปุ่มใน body ปรับเนื้อหาการ์ดแชร์ได้
- LINE MINI App ทั้งแบบ Unverified และ Verified ใช้ Custom Action Button ได้ แต่ไม่ได้หมายถึงสิทธิ์ส่ง Service Message บน production
- ผู้ใช้ต้อง login และต้องเปิด share target picker ใน LINE Developers Console
- การ์ดต้องใช้ Flex Message
bubbleหนึ่งชุด ไม่ใช้carousel - เฉพาะ
{ status: "success" }เท่านั้นที่หมายถึงแชร์สำเร็จ หาก Promise resolve โดยไม่มี object แปลว่าผู้ใช้ยกเลิก
Custom Action Button ต่างจากข้อความ LINE แบบอื่นอย่างไร
คู่มือทางการของ LINE แยกปุ่มแชร์สองแบบ ปุ่มบน header แสดงโดย LINE แชร์หน้าที่เปิดอยู่ และปรับพฤติกรรมหรือข้อความไม่ได้ ส่วนปุ่มใน body ส่งการ์ดที่แอปสร้างไปยังหน้าจอเลือกผู้รับ
| หัวข้อ | Custom Action Button | Service Message | Messaging API |
|---|---|---|---|
| ผู้เริ่ม | ผู้ใช้แตะและเลือกผู้รับ | Server แจ้งหลังผู้ใช้ทำ action ที่เข้าเกณฑ์ใน MINI App | Official Account ตอบหรือส่งข้อความ |
| API | liff.shareTargetPicker() ใน MINI App | Service Message API บน server | Messaging API บน server |
| ผู้ส่งที่ผู้รับเห็น | ผู้ใช้ที่แชร์ | ห้องแจ้งเตือน MINI App ตามภูมิภาค | LINE Official Account |
| เงื่อนไขการรับรอง | ใช้ได้ทั้งสองสถานะ | Production ต้องเป็น Verified MINI App | ตามกฎ Official Account |
หากต้องการตรวจสิทธิ์ของแอป ให้ดูข้อจำกัดของ Unverified และ Verified MINI App หากกำลังเลือกวิธีแจ้งเตือน ให้ดูService Message เทียบกับ Messaging API ปุ่มนี้ไม่ได้เพิ่มสิทธิ์ของ API ทั้งสองแบบ
เช็กลิสต์ทำ LINE MINI App Custom Action Button
1. เปิด share target picker
Initialize LIFF ตามปกติ ตรวจว่าผู้ใช้ login แล้ว และเปิด share target picker ใน LINE Developers Console เงื่อนไขทั้งสองอยู่ใน LIFF API Reference
ก่อนเปิดปุ่มให้ตรวจ liff.isApiAvailable("shareTargetPicker") ใน external browser บนมือถือ picker ต้องมี SSO session ด้วย การใช้ auto login อย่างเดียวอาจแสดงหน้าล็อกอินอีเมลแทน ควรทดสอบทั้ง LIFF browser และ external browser ที่ผู้ใช้ไทยเข้าจริง
2. สร้าง Flex Message ตามรูปแบบที่กำหนด
LINE กำหนดให้ใช้ container bubble หนึ่งชุดและห้ามใช้ carousel การ์ดต้องมี title, subtitle หรือ detail, ส่วนปุ่ม และ footer ที่ระบุ MINI App ให้ทำตาม property ในเอกสาร ไม่ปรับตัวอย่างเหมือน Flex canvas ทั่วไป
ใส่ปุ่มได้สูงสุดสามปุ่ม และอย่างน้อยหนึ่งปุ่มต้องเปิดหน้ารายละเอียดของสิ่งที่แชร์ Footer แสดงไอคอน ชื่อ MINI App และลิงก์กลับหน้าหลัก
3. ใช้ Permanent link สำหรับหน้ารายละเอียด
อย่าใส่ endpoint URL ของเว็บโดยตรงหากต้องการเปิดหน้าภายใน MINI App อีกครั้ง เอกสาร Permanent link ให้สูตรดังนี้:
LIFF URL + (URL หน้า MINI App - Endpoint URL) = Permanent link
ถ้า LIFF URL คือ https://miniapp.line.me/123456-abcdefg และหน้าคือ https://example.com/orders/42?from=share ลิงก์จะเป็น:
https://miniapp.line.me/123456-abcdefg/orders/42?from=share
ลิงก์ใช้ path, query และ hash ได้ ทดสอบภายใน LINE ทั้งกรณียังไม่ login รายการหมดอายุ และข้อมูลถูกลบ ปุ่ม header จะสร้างลิงก์ของหน้าปัจจุบันอัตโนมัติ แต่ปุ่มในการ์ดต้องสร้างเอง
4. เรียก API จากการแตะของผู้ใช้
ข้อมูลบนการ์ดควรมาจาก record ที่ server ตรวจสิทธิ์แล้ว ไม่ใช่รับค่าจาก URL โดยตรง
async function shareItem(messages) {
if (!liff.isApiAvailable("shareTargetPicker")) {
return { outcome: "unavailable" };
}
try {
const result = await liff.shareTargetPicker(messages);
return result?.status === "success"
? { outcome: "shared" }
: { outcome: "cancelled" };
} catch (error) {
return { outcome: "failed", error };
}
}
messages ต้องมี Flex Message bubble ที่ตรงกับคู่มือ LINE ปัจจุบัน
5. แยกสำเร็จ ยกเลิก และ error
| ผลลัพธ์ | พฤติกรรม API | การทำงานของหน้าจอ |
|---|---|---|
| แชร์แล้ว | Resolve ด้วย { status: "success" } | แจ้งว่า action เสร็จ แต่ไม่อ้างว่าผู้รับเปิดดูแล้ว |
| ยกเลิก | Resolve โดยไม่มี object | กลับหน้าปกติโดยไม่แสดง error |
| ล้มเหลวก่อนแสดง picker | Reject พร้อม LiffError | บันทึก error code ที่ปลอดภัยและให้ลองใหม่ |
LINE ไม่ให้จำนวนผู้รับ จึงไม่ควรเปลี่ยนผลสำเร็จเป็นตัวเลขการส่งถึง ยอดดู หรือ conversion
6. ทดสอบบนอุปกรณ์จริง
อย่างน้อยให้ทดสอบ login/ไม่ login, LIFF browser/external browser บนมือถือ, เปิด/ปิด picker, ผู้รับหนึ่งคน/หลายคน, ยกเลิก, deep link ที่ใช้ได้/หมดอายุ และข้อความภาษาไทยยาว OpenChat ไม่อยู่ในเป้าหมายที่รองรับ
UnifyPort เหมาะกับส่วนใด
UnifyPort ไม่ได้ทำ liff.shareTargetPicker() หน้าจอเลือกผู้รับ รูปแบบ Flex Message หรือสถิติผู้รับ ทั้งหมดเป็นความสามารถทางการของ LINE MINI App และ LIFF
UnifyPort ดูแล action อีกแบบหนึ่ง คือเมื่อลูกค้าส่งข้อความเข้า LINE account ที่เชื่อมต่อ ข้อความที่รองรับจะมาถึงเป็น event มาตรฐาน message.received หาก webhook endpoint มี signing_secret ระบบตรวจ HMAC-SHA256 ได้จาก X-Device-Timestamp และ X-Device-Signature
หากหน้าที่แชร์นำไปสู่บทสนทนาฝ่ายบริการภายหลัง ให้เก็บ share action, order หรือ campaign ID และ inbound conversation เป็นคนละ record แล้วเชื่อมกันในระบบ ตรวจคู่มือเชื่อมต่อ LINEและตาราง message supportก่อนใช้งานจริง
ข้อจำกัดและสิ่งที่ต้องแลก
- หากแชร์หน้าปัจจุบันอย่างเดียว ปุ่ม header ง่ายกว่าและสร้าง Permanent link ให้อัตโนมัติ
- ใช้ปุ่ม custom เมื่อจำเป็นต้องมีการ์ดแนะนำ เพราะต้องทดสอบ layout, link, login และอุปกรณ์เพิ่ม
- ปุ่มไม่ส่งเอง ไม่เลือกผู้รับอัตโนมัติ ไม่ยืนยัน delivery และไม่คืนจำนวนผู้รับ
- ไม่ใช่ตัวแทน Service Message, Messaging API, Official Account หรือระบบรับคำถามลูกค้า
FAQ
Unverified LINE MINI App ใช้ Custom Action Button ได้ไหม
ได้ ตาราง feature ปัจจุบันของ LINE ให้ทั้ง Unverified และ Verified MINI App ใช้ได้ ส่วน Service Message บน production เป็น feature แยกที่ต้อง Verified
ปุ่มมาตรฐานกับปุ่ม custom ต่างกันอย่างไร
ปุ่ม header แชร์หน้าปัจจุบันและแก้เนื้อหาไม่ได้ ส่วนปุ่มใน body ส่ง message ที่ตรงตามข้อกำหนดไปยัง liff.shareTargetPicker()
ดูจำนวนผู้รับได้ไหม
ไม่ได้ LINE ไม่เก็บและไม่ให้จำนวนผู้รับผ่าน share target picker เพื่อคุ้มครองความเป็นส่วนตัว
ทำไม Promise resolve แต่ไม่มี status
ผู้ใช้ปิด picker ก่อนส่ง API จะ resolve โดยไม่มี result object ให้ถือว่าเป็นการยกเลิก ไม่ใช่ error
ปุ่มรายละเอียดควรใช้ URL แบบใด
ทุกหน้าที่ไม่ใช่หน้าหลักควรใช้ Permanent link ซึ่งใส่ path, query หรือ hash ได้
ขั้นตอนถัดไป
ทำการ์ดและทดสอบตามคู่มือ Custom Action Button ทางการ หากมีความต้องการแยกในการรับข้อความลูกค้า LINE ทั่วไป ให้เริ่มจากคู่มือ LINE authorization ของ UnifyPort
แหล่งข้อมูล
ตรวจสอบเอกสารทางการของ LINE เมื่อ 8 สิงหาคม 2026: