المكون الإضافي "دردشة"

يوضح لك هذا المستند كيفية إضافة المكون الإضافي "دردشة" برمجيًا إلى تجربة Messenger على موقع الويب.

إذا كنت ترغب في استخدام Meta Business Suite لإضافة المكون الإضافي "دردشة" إلى صفحة الويب (موصى به)، فيُرجى زيارة مركز مساعدة الأعمال من Meta للحصول على مزيد من المعلومات.

طريقة العمل

عند تثبيت مجموعة Facebook SDK للغة JavaScript على صفحة الويب، سيتم عرض المكون الإضافي "دردشة" على صفحة الويب. بشكل افتراضي، سيتم عرض مربع حوار الرسالة الترحيبية على الكمبيوتر والهاتف المحمول ويمكن للشخص النقر على زر الإغلاق لتصغير مربع الحوار. ويمكنك تخصيص الرسالة الترحيبية والمظهر، مثل اللون وكذلك تخصيص تجربة المراسلة، مثل القوائم والردود السريعة للمكون الإضافي. يتم تخزين حالة مربع الحوار مؤقتًا أو تكبيرها أو تصغيرها وتستمر من جلسة إلى أخرى.

عمليات تسجيل الدخول

إذا قام الشخص بتسجيل الدخول إلى فيسبوك، فسيعرض المكون الإضافي الزر "متابعة باسم [NAME]" والزر "متابعة كضيف". وإذا لم يقم الشخص بتسجيل الدخول إلى فيسبوك، فسيعرض المكون الإضافي الزر "تسجيل الدخول إلى Messenger" والزر "متابعة كضيف".

إشعارات حدث Webhook

عندما ينقر شخص ما على المكون الإضافي لبدء دردشة مع النشاط التجاري أو متابعة دردشة حالية، سيتم إرسال إشعار webhook إلى الخادم والذي يحتوي على:

• معلومات حول الشخص، مثل المعرفات على مستوى الصفحة (PSID) أو معرفات الإشارة إلى المستخدم
• تحديد مصدر الرسالة كالمكون الإضافي "دردشة"
• معلومات الإحالة المضمنة في الإشعار

إذا قمت بتنفيذ شاشة الترحيب في المكون الإضافي ونقر الشخص على زر "بدء الاستخدام" لبدء محادثة مع النشاط التجاري، فسيتم إرسال إشعار webhook بحدث messaging_postbacks إلى الخادم. يمكن للنشاط التجاري بعد ذلك استخدام معرف الإشارة إلى المستخدم لإرسال رسائل إلى الشخص خلال فترة المراسلة القياسية التي تبلغ 24 ساعة.

المحادثات الحالية

إذا كان الشخص لديه محادثة حالية مع نشاطك التجاري، فسيتم تحميل سجل الدردشة تلقائيًا في المكون الإضافي. عندما يتابع الشخص المحادثة، عن طريق إرسال رسالة أو النقل على زر أو اتخاذ أي إجراء آخر قمت بتنفيذه في المحادثة، سيتم إرسال إشعار webhook بحدث messaging إلى الخادم لديك أو إرسال إشعار webhook بحدث messaging_referral إذا قمت بتضمين معلومات الإحالة. يمكن للنشاط التجاري بعد ذلك استخدام المعرف على مستوى الصفحة لإرسال رسائل إلى الشخص خلال فترة المراسلة القياسية التي تبلغ 24 ساعة.

أنواع الرسائل المدعومة بواسطة المكون الإضافي "دردشة"

لا يدعم المكون الإضافي العناصر التالية:

قبل البدء

ستحتاج إلى ما يلي:

• الإذن pages_messaging
• رمز وصول الصفحة المطلوب من جانب شخص يمكنه تنفيذ المهمة MODERATE على صفحة فيسبوك
• التطبيق المرتبط بصفحة فيسبوك المشتركة في حقول webhooks لحدث messaging وmessaging_postbacks وmessaging_referrals
• نطاق موقع الويب الذي تمت إضافته إلى قائمة السماح باستخدام API الملف الشخصي على Messenger أو Meta Business Suite

تنطبق شروط أدوات Meta للأعمال فيما يتعلق باستخدامك للمكون الإضافي "دردشة".

التقييدات

• يجب أن يكون موقع الويب في وضع النشر أو مدرج ضمن قائمة السماح حتى يتم تنفيذ المكون الإضافي "دردشة" بنجاح
• إذا تم تعيين تقييدات حسب العمر أو البلد في صفحة فيسبوك لنشاطك التجاري ضمن إعدادات الصفحة، فلن يظهر المكون الإضافي "دردشة" للأشخاص الذين لم يسجّلوا الدخول إلى حساباتهم على فيسبوك عند زيارة موقع الويب لديك.
• لا يتم تخزين مربع حوار الرسالة الترحيبية مؤقتًا متصفح Safari بالإصدار 12 والإصدارات الأحدث ومتصفح Firefox

إضافة المكون الإضافي "دردشة"

الخطوة الأولى. إضافة مجموعة 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> 

الخطوة الثانية. تخصيص المكون الإضافي

استخدام API

أرسل طلب POST إلى نقطة النهاية /PAGE-ID/chat_plugin لتخصيص الرسالة الترحيبية واللون والأيقونة والمزيد للمكون الإضافي لديك.

مثال على الطلب

curl -i -X POST "https://graph.facebook.com/v21.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 عندما يرسل شخص ما رسالة ضمن محادثة قائمة مع نشاطك التجاري. سيتضمن الإشعار معرف الشخصي على مستوى الصفحة مع تعيين المعلمة 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",
                    }
                }
            ]
        }
    ]
}

طلبات الاشتراك في الرسائل التسويقية

تفضل بزيارة دليل الرسائل التسويقية لكيفية إنشاء طلبات الاشتراك في الرسائل التسويقية.

التقييدات

لا يتم دعم سوى موضوع التحديثات والعروض الترويجية للرسائل التسويقية في المكون الإضافي "دردشة".

إشعار طلبات الاشتراك في المراسلة

سيتم إرسال إشعار حدث webhook 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 إلى قيمة المعرف في الكائن recipient لإرسال الرسائل التسويقية إلى الشخص.

نصائح لاستكشاف الأخطاء وإصلاحها

• رفض العرض...

  • تأكد من إضافة نطاقك إلى القائمة البيضاء
  • تأكد من تعيين عنوان Referrer-Policy، بحيث يتم إرسال عنوان URL للمُحيل

• عدم عرض المكون الإضافي "دردشة" على Firefox

  • قم بإزالة ملحق حاوية فيسبوك على Firefox.
  • أوقف تشغيل حجب المحتوى (انقر على الدرع الرمادي في شريط البحث) للاطلاع على عرض المكون الإضافي.

الخطوات التالية

• إرسال رد
• إرسال الرسائل التسويقية

راجع أيضًا

• تعطيل القائمة الثابتة
• مجموعة Facebook SDK للغة JavaScript
• وضع الضيف - يتيح للمستخدمين بدء المحادثات دون تسجيل الدخول إلى فيسبوك.
• أدوات التفاعل - تتيح للمستخدمين بدء محادثة مع النشاط التجاري من خلال قائمة تتضمن الأسئلة المتكررة.
• القائمة الثابتة - تساعد الأشخاص في اكتشاف الوظائف التي توفرها والوصول إليها بسهولة أكبر خلال المحادثة.