ปลั๊กอินแชท

เอกสารฉบับนี้จะแสดงวิธีเพิ่มปลั๊กอินแชทลงในประสบการณ์การใช้งาน Messenger ของคุณบนเว็บไซต์โดยใช้โปรแกรม

หากคุณต้องการใช้ Meta Business Suite เพื่อเพิ่มปลั๊กอินแชทลงในเว็บเพจของคุณ (แนะนำ) โปรดดูข้อมูลเพิ่มเติมที่ศูนย์ช่วยเหลือทางธุรกิจของ Meta

วิธีการทำงาน

เมื่อคุณติดตั้ง Facebook SDK สำหรับ JavaScript บนเว็บเพจของคุณ ปลั๊กอินแชทจะแสดงอยู่บนเว็บเพจดังกล่าว โดยค่าเริ่มต้นแล้ว กล่องโต้ตอบคำทักทายจะแสดงอยู่บนเดสก์ท็อปและมือถือ และผู้ใช้สามารถคลิกที่ปุ่มปิดเพื่อย่อขนาดกล่องโต้ตอบได้ คุณสามารถปรับแต่งคำทักทาย, รูปลักษณ์ เช่น สี และประสบการณ์การส่งข้อความ เช่น เมนูและข้อความตอบกลับด่วน ของปลั๊กอินนี้ได้ โดยสถานะของกล่องโต้ตอบจะได้รับการแคช ย่อหรือขยายขนาด และจะคงอยู่จากเซสชั่นหนึ่งไปยังอีกเซสชั่นหนึ่ง

การเข้าสู่ระบบ

หากผู้ใช้เข้าสู่ระบบ Facebook แล้ว ปลั๊กอินจะแสดงปุ่ม "ดำเนินการต่อในฐานะ [NAME]" และ "ดำเนินการต่อในฐานะผู้ใช้ภายนอก" แต่หากผู้ใช้ยังไม่ได้เข้าสู่ระบบ Facebook ปลั๊กอินจะแสดงปุ่ม "เข้าสู่ระบบ Messenger" และ "ดำเนินการต่อในฐานะผู้ใช้ภายนอก"

การแจ้งเตือน Webhooks

เมื่อผู้ใช้คลิกที่ปลั๊กอินเพื่อเริ่มหรือทำการแชทกับธุรกิจของคุณต่อ ระบบจะส่งการแจ้งเตือน Webhook ไปยังเซิร์ฟเวอร์ของคุณซึ่งประกอบด้วยข้อมูลต่อไปนี้

• ข้อมูลเกี่ยวกับผู้ใช้ เช่น ID ในเพจ (PSID) หรือ ID อ้างอิงผู้ใช้
• ระบุแหล่งที่มาของข้อความเป็นปลั๊กอินแชท
• ข้อมูลอ้างอิงที่รวมอยู่ในการแจ้งเตือน

หากคุณใช้หน้าจอต้อนรับ ในปลั๊กอิน และผู้ใช้คลิกปุ่ม "เริ่มต้นใช้งาน" เพื่อเริ่มต้นการสนทนากับธุรกิจของคุณ ระบบจะส่งการแจ้งเตือนจาก Webhook messaging_postbacks ไปยังเซิร์ฟเวอร์ของคุณ จากนั้นธุรกิจของคุณจะสามารถใช้ ID อ้างอิงผู้ใช้ เพื่อส่งข้อความถึงผู้ใช้ภายในช่วงเวลาการส่งข้อความมาตรฐาน 24 ชั่วโมงได้

การสนทนาที่มีอยู่แล้ว

หากผู้ใช้มีการสนทนากับธุรกิจของคุณอยู่แล้ว ประวัติการแชทจะโหลดลงในปลั๊กอินโดยอัตโนมัติ เมื่อผู้ใช้ทำการสนทนาต่อ ไม่ว่าจะเป็นการส่งข้อความ คลิกปุ่ม หรือดำเนินการอื่นๆ ที่คุณใช้ในการสนทนา ระบบจะส่งการแจ้งเตือนจาก Webhook messaging ไปยังเซิร์ฟเวอร์ของคุณ หรือส่งการแจ้งเตือนจาก Webhook messaging_referral หากคุณต้องการระบุข้อมูลอ้างอิงรวมเข้าไปด้วย จากนั้นธุรกิจของคุณจะสามารถใช้ PSID เพื่อส่งข้อความถึงผู้ใช้ภายในช่วงเวลาการส่งข้อความมาตรฐาน 24 ชั่วโมงได้

ประเภทข้อความที่ปลั๊กอินแชทรองรับ

ปลั๊กอินไม่รองรับรายการต่อไปนี้

ก่อนเริ่มต้น

คุณจะต้องมีสิ่งต่อไปนี้

• สิทธิ์การอนุญาต pages_messaging
• โทเค็นการเข้าถึงเพจซึ่งขอโดยผู้ที่สามารถดำเนินงาน MODERATE บนเพจ Facebook ของคุณได้
• แอพที่เชื่อมโยงกับเพจ Facebook ของคุณซึ่งสมัครรับข้อมูลจากช่อง Webhooks messaging, messaging_postbacks และ messaging_referrals
• โดเมนสำหรับเว็บไซต์ของคุณที่เพิ่มลงในรายการที่อนุญาตโดยใช้ API โปรไฟล์ Messenger หรือ Meta Business Suite

ข้อกำหนดเกี่ยวกับเครื่องมือ Meta Business จะมีผลบังคับใช้โดยเชื่อมโยงกับการใช้ปลั๊กอินแชทของคุณ

ข้อจำกัด

• เว็บไซต์ของคุณต้องอยู่ใช้งานอยู่หรืออยู่ในรายการอนุญาตก่อนจึงจะใช้ปลั๊กอินแชทได้สำเร็จ
• หากเพจ Facebook ของธุรกิจของคุณกำหนดการจำกัดอายุหรือประเทศในการตั้งค่าเพจ ปลั๊กอินแชทจะไม่แสดงต่อผู้ใช้ที่ไม่ได้เข้าสู่ระบบบัญชี Facebook ของตนเองเมื่อเข้าเยี่ยมชมเว็บไซต์ของคุณ
• ระบบจะไม่แคชกล่องโต้ตอบคำทักทายสำหรับเบราว์เซอร์ Safari 12+ และ Firefox

เพิ่มปลั๊กอินแชท

ขั้นตอนที่ 1 เพิ่ม SDK

เพิ่ม Facebook SDK สำหรับ Javascript ลงในแต่ละหน้าของเว็บไซต์ที่คุณต้องการให้แสดงปลั๊กอิน

<!-- Messenger Chat Plugin Code --> <div id="fb-root"></div> <div id="fb-customer-chat" class="fb-customerchat"></div> <script> var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "PAGE-ID"); chatbox.setAttribute("attribution", "biz_inbox"); </script> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'API-VERSION' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

ขั้นตอนที่ 2 ปรับแต่งปลั๊กอิน

ใช้ API

ส่งคำขอ POST ไปยังตำแหน่งข้อมูล /PAGE-ID/chat_plugin เพื่อปรับแต่งคำทักทาย, สี, ไอคอน และอื่นๆ ให้กับปลั๊กอินของคุณ

ตัวอย่างคำขอ

curl -i -X POST "https://graph.facebook.com/v20.0/PAGE-ID/chat_plugin
    ?welcome_screen_greeting:YOUR-WELCOME-TEXT
    &theme_color:553399
    &entry_point_icon:MESSENGER-ICON
    &entry_point_label:CHAT
    &access_token=PAGE-ACCESS-TOKEN"

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับช่องที่ใช้เพื่อปรับแต่งปลั๊กอินของคุณที่ข้อมูลอ้างอิงเกี่ยวกับปลั๊กอินแชท

ใช้แอตทริบิวต์ HTML

เราขอแนะนำให้คุณใช้วิธีการนี้เฉพาะสำหรับการปรับแต่งที่ไม่พร้อมใช้งานทางเครื่องมือการตั้งค่าเพจหรือ API

การแจ้งเตือน Webhooks

เมื่อผู้ใช้ส่งข้อความถึงธุรกิจของคุณ ระบบจะส่งการแจ้งเตือน Webhook ไปยังเซิร์ฟเวอร์ของคุณ

การสนทนาที่มีอยู่แล้ว

ระบบจะส่งการแจ้งเตือนจาก Webhook messaging เมื่อผู้ใช้ส่งข้อความในการสนทนากับธุรกิจที่มีอยู่แล้ว การแจ้งเตือนจะประกอบไปด้วย ID ในเพจของผู้ใช้และพารามิเตอร์ source ของอ็อบเจ็กต์ tags ที่ตั้งค่าเป็น customer_chat_plugin

การแจ้งเตือนการส่งข้อความ

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "PSID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

การแจ้งเตือนอ้างอิงการส่งข้อความ

หากคุณตั้งค่าแอตทริบิวต์ ref ไว้สำหรับปลั๊กอินแชทของคุณ ระบบจะส่งการแจ้งเตือนจาก Webhook messaging_referrals ไปยังเซิร์ฟเวอร์ของคุณ

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598385735,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598385735,
                    "sender": {
                        "user_ref":"USER-REFERENCE-ID"
                    },
                    "referral": {
                        "ref": "REF-PARAMETER-INFORMATION",
                        "source": "CUSTOMER_CHAT_PLUGIN",
                        "type": "OPEN_THREAD",
                        "referer_uri": "REFERRAL-URI"
                    }
                }
            ]
        }
    ]
}

การสนทนาใหม่

ระบบจะส่งการแจ้งเตือนจาก Webhook messaging_postbacks เมื่อผู้ใช้เริ่มต้นการสนทนาโดยคลิกปุ่ม "เริ่มต้นใช้งาน" ที่หน้าจอต้อนรับในปลั๊กอิน

การแจ้งเตือนโพสต์ย้อนกลับการส่งข้อความ

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "user_ref": "USER-REFERENCE-ID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "postback":{
                        "title": "TITLE-FOR-THE-CTA",  
                        "payload": "PAYLOAD-DEFINED-BY-CTA",
                        "referral": {
                            "ref": "ADDITIONAL-INFORMATION",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                    }
                }
            ]
        }
    ]
}

คำขอเลือกใช้ข้อความทางการตลาด

ดูวิธีสร้างคำขอเลือกใช้ข้อความทางการตลาดได้ที่ คู่มือข้อความทางการตลาด

ข้อจำกัด

ข้อความทางการตลาดรองรับเฉพาะหัวข้ออัพเดตและโปรโมชั่นสำหรับปลั๊กอินแชท

การแจ้งเตือนการเลือกรับการส่งข้อความ

ระบบจะส่งการแจ้งเตือน Webhooks messaging_optins ไปยังเซิร์ฟเวอร์ของคุณ เมื่อผู้ใช้เลือกรับข้อความทางการตลาดจากธุรกิจของคุณ

"object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": TIMESTAMP,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": TIMESTAMP,
                    "optin": {
                        "type": "notification_messages",
                        "payload": "empty_payload",
                        "notification_messages_token": "NOTIFICATION-MESSAGE-TOKEN",
                        "notification_messages_frequency": "MESSAGE-FREQUENCY",
                        "topic": "NOTIFICATION-MESSAGE-TOPIC",
                        "token_expiry_timestamp": EXPIRATION-DATE-TIMESTAMP,
                        "ref": "ADDITIONAL-INFORMATION",
                        "user_token_status": "NOT_REFRESHED",
                        "notification_messages_status": "RESUME_NOTIFICATIONS"
                    }
                }
            ]
        }
    ]
}

คุณสามารถกำหนดค่า notification_messages_token ให้เป็นค่า ID ในอ็อบเจ็กต์ recipient เพื่อส่งข้อความทางการตลาดไปยังบุคคล

เคล็ดลับในการแก้ไขปัญหา

• ปฏิเสธที่จะแสดง...

  • ตรวจสอบให้แน่ใจว่าไวท์ลิสต์โดเมนของคุณเรียบร้อยแล้ว
  • ตรวจสอบให้แน่ใจว่ากำหนดส่วนหัว Referrer-Policy เพื่อให้ระบบส่ง URL ผู้อ้างอิงเรียบร้อยแล้ว

• ปลั๊กอินแชทไม่แสดงบน Firefox

  • ลบส่วนเสริม Facebook Container สำหรับ Firefox ออก
  • ปิดการบล็อกเนื้อหา (คลิกที่รูปโล่สีเทาในแถบการค้นหา) เพื่อดูการแสดงปลั๊กอิน

ขั้นตอนถัดไป

• ส่งข้อความตอบกลับ
• ส่งข้อความทางการตลาด

ดูเพิ่มเติม

• ปิดใช้งานเมนูถาวร
• Facebook SDK สำหรับ JavaScript
• โหมดผู้ใช้ภายนอก - อนุญาตให้ผู้ใช้เริ่มการสนทนาได้โดยไม่ต้องเข้าสู่ระบบ Facebook
• ประโยคเริ่มการสนทนา - อนุญาตให้ผู้ใช้เริ่มการสนทนากับธุรกิจได้โดยใช้รายการคำถามที่พบบ่อย
• เมนูถาวร - ช่วยให้ผู้ใช้ค้นพบและเข้าถึงฟังก์ชั่นการทำงานของคุณได้ง่ายขึ้นตลอดการสนทนา