← บทความทั้งหมด
คู่มือ

วิธีทำ 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 ButtonService MessageMessaging API
ผู้เริ่มผู้ใช้แตะและเลือกผู้รับServer แจ้งหลังผู้ใช้ทำ action ที่เข้าเกณฑ์ใน MINI AppOfficial Account ตอบหรือส่งข้อความ
APIliff.shareTargetPicker() ใน MINI AppService Message API บน serverMessaging 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 และลิงก์กลับหน้าหลัก

อย่าใส่ 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
ล้มเหลวก่อนแสดง pickerReject พร้อม 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: