تتيح أداة دردشة الموقع لزوار الموقع الاتصال بك عبر الدردشة المباشرة أو من خلال قنوات الرسائل الأخرى التي قمت بتوصيلها.

ربط أداة الدردشة بموقع الويب

شاهد الفيديو أدناه للحصول على دليل خطوة بخطوة حول كيفية توصيل دردشة الموقع بـ Respond.io.

How to Connect Website Chat to respond.io

الخطوة 1: انتقل إلى الإعدادات > القنوات

الخطوة 2: انقر فوق إضافة قناة > دردشة الموقع > الاتصال

الخطوة 3: املأ الموقع (المواقع) التي سيتم إضافة الأداة إليها.

يرجى الرجوع إلى ما يلي لمعرفة كيفية إدراج مواقع الويب في القائمة البيضاء.

إذا أضاف المستخدمhttps://app.respond.io، فسيتم إدراجhttps://app.respond.ioفقط في القائمة البيضاء. لا ينبغي لأي نطاق فرعي أو جذر آخر أن يعمل.
إذا أضاف المستخدمhttps://*.respond.io، فسيتم إدراج جميع النطاقات الفرعية بما في ذلك النطاق الجذر في القائمة البيضاء.
إذا أضاف المستخدمhttps://respond.io، فسيتم إدراج المجال الجذر فقط في القائمة البيضاء.

الخطوة 4:حدد لون السمة للأداة باستخدام أداة اختيار الألوان التفاعلية.

اختر اللون الذي يتناسب مع علامتك التجارية اللون وموقع الويب الخاص بك.

الخطوة 5:حدد أيقونة للأداة لعرضها على موقع الويب. إذا كنت تفضل تحميل أيقونة مخصصة، فيمكنك تحميل أيقونة مربعة بالحجم الموصى به وهو 256 بكسل × 256 بكسل.

يمكن تخصيص الأدوات بشكل أكبر بمجرد الاتصال.

الخطوة 6: انقر فوقالتالي> أضف البرنامج النصي إلى موقع الويب المفضل لديك. وبدلاً من ذلك، يمكنك إرسال تعليمات التثبيت إلى شخص آخر عبر البريد الإلكتروني.

تثبيت أداة الدردشة

قد تحتاج إلى مشرف موقع أو مسؤول فني للمساعدة في تثبيت أداة الدردشة على موقع الويب. يرجى طلب المساعدة إذا لزم الأمر.

اعتمادًا على النظام الذي تستخدمه لإنشاء موقع الويب الخاص بك وإدارته، فقد أنشأنا دليلًا خطوة بخطوة لإرشادك خلال عملية تثبيت أداة الدردشة على موقع الويب الخاص بك.

بالنسبة للمنصات أو الخدمات الأخرى، انتقل إلى مصدر HTML للصفحة. قم بلصق النص قبل العلامة </body> .

<body>
...
...
...
<Paste Script Here>
</body>

إذا كنت بحاجة إلى مساعدة، فيمكنك اختيار إرسال البرنامج النصي مع تعليمات التثبيت إلى مسؤول موقع الويب الخاص بك. قم بتحديد مربع الاختيار المناسب وأدخل عنوان البريد الإلكتروني للشخص الذي يمكنه مساعدتك في تثبيت البرنامج الإضافي للدردشة.

ستظهر أداة الدردشة الخاصة بموقع Response.io على موقعك بمجرد تثبيت البرنامج النصي بنجاح.

تخصيص أداة الدردشة

الخطوة 1: في مساحة العمل الخاصة بك، انتقل إلى الإعدادات > القناة.

الخطوة 2: حدد موقع قناة الدردشة الخاصة بالموقع الإلكتروني > انقر فوق تخصيص

قم بتخصيص أداة موقع الويب لتتناسب مع مظهر الموقع حتى تبدو الأداة سلسة. على الجانب الأيمن من الصفحة، هناك معاينة لأداة الدردشة الخاصة بالموقع. سوف ينعكس أي تخصيص يتم إجراؤه على الأداة على الأداة لمساعدتك في الحصول على فكرة أفضل عما تقوم بتخصيصه.

عرض & المظهر

بإمكانك تخصيص ما يلي لتغيير مظهر عرض الأداة على موقع الويب.

مجال	وصف
لون السمة	سيتم استخدام اللون المختار كلون أساسي لأداتك.
لون النص	سيتم استخدام اللون المختار كلون النص الأساسي لأداتك.
أيقونة الدردشة على الموقع	يتم استخدام الرمز المحدد داخل فقاعة الأداة مع لون السمة. يمكنك تحميل أيقونة مخصصة إذا لزم الأمر.
رسالة منبثقة	تظهر الرسالة المنبثقة لزوار الموقع مرة واحدة يوميًا بعد 5 ثوانٍ من تحميل الصفحة. إذا لم يتم تحديد ذلك، فلن تظهر أي رسالة منبثقة لزوار الموقع.

التحقق من صحة أيقونة الدردشة على الموقع الإلكتروني:

الحد الأقصى لحجم الملف: 1 ميجا بايت
الحد الأقصى لأبعاد الملف: 256 × 256 بكسل
الشكل: مربع

موضع

مجال	وصف
محاذاة إلى	يمكن للمستخدمين اختيار تحديد موضع عرض الأداة على يسار المنصة أو يمينها.
التباعد الرأسي	يمكن للمستخدمين تحديد مقدار المسافة الرأسية بين عنصر واجهة مستخدم الدردشة على موقع الويب وأسفل الشاشة.
التباعد الأفقي	يمكن للمستخدمين تحديد مقدار المسافة الأفقية بين عنصر واجهة مستخدم الدردشة على موقع الويب وجانب الشاشة.
حجم الأداة	يمكن للمستخدمين اختيار حجم الأداة من صغير أو قياسي أو كبير.
خيارات العرض	يمكن للمستخدمين اختيار عرض هذه الأداة على سطح المكتب أو الأجهزة المحمولة أو كليهما.

عناصر الرأس

مجال	وصف
عنوان	سيظهر العنوان في الجزء العلوي من أداة الدردشة الخاصة بك.
الشعار	سيتم عرض الشعار أسفل العنوان.
شعار الدردشة على الموقع	قم بإسقاط صورة شعارك هنا حتى تظهر في أعلى الدردشة على موقع الويب. يمكن أن يكون التنسيق إما PNG أو SVG أو JPG وحجم الملف لا يزيد عن 4.0 ميجا بايت.
أيقونات القنوات	سيسمح هذا الخيار لجهات الاتصال بالتواصل معك عبر القناة المفضلة لديهم بشرط توفير الخيارات. يمكنك إضافة ما يصل إلى ست قنوات وسيتم عرضها في الجزء العلوي من أداة الدردشة الخاصة بالموقع الإلكتروني.
لون أيقونات القناة	يمكن عرض أيقونات القناة باللون الأبيض أو الملون على أداة الدردشة الخاصة بك. حدد اللون الأبيض أو الملون ليتناسب مع لون المظهر الخاص بأداة الدردشة الخاصة بك.

التحقق من صحة شعار الدردشة على الموقع الإلكتروني:

الحد الأقصى لحجم الملف: 4 ميجا بايت
الحد الأقصى لأبعاد الملف: 1024 × 1024 بكسل
الشكل: مربع

أيقونات القنوات

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

بإمكانك إضافة روابط القنوات الخاصة بالأداة وتحديد المعلومات اللازمة للقناة المحددة.

فيما يلي قائمة بحقول الإدخال المطلوبة لكل رابط قناة مدعوم.

روابط القنوات	حقل الإدخال مطلوب
واتساب	رقم هاتف واتساب
فيسبوك ماسنجر	معرف صفحة الفيسبوك
برقية	اسم بوت تيليجرام
تغريد	معرف تويتر
خط	معرف الخط
فايبر	اسم حساب فايبر العام
رسالة قصيرة	رقم هاتف الرسائل القصيرة
بريد إلكتروني	عنوان البريد الإلكتروني
مكالمة هاتفية	رقم التليفون
رابط مخصص	عنوان URL والأيقونة
رمز الاستجابة السريعة المخصص	صورة ورمز QR

التحقق من صحة رمز القناة:

الحد الأقصى لحجم الملف: 1 ميجا بايت
الحد الأقصى لأبعاد الملف: 256 × 256 بكسل
الشكل: مربع

نموذج ما قبل الدردشة

سيؤدي تمكين هذا الخيار إلى إضافة نموذج محادثة مسبقة إلى دردشة موقع الويب الخاص بك. إذا تم تمكين ذلك، سيتم تقديم نموذج لزوار موقع الويب الخاص بك لملئه قبل بدء الدردشة.

عند تمكين هذا الخيار، يمكنك تضمين حقول مخصصة إضافية عند الضرورة. بالإضافة إلى ذلك، يمكنك أيضًا تخصيص تسمية الحقول الافتراضية حول كيفية ظهورها لجهات الاتصال الخاصة بك.

يمكن تخصيص تسميات الحقول إلى لغة مختلفة لتتناسب مع لغة موقع الويب'.

إعدادات إضافية

مجال	وصف
نص شريط الإدخال	سيعمل هذا النص كعلامة نائبة في منطقة الكتابة.
خط النص	الخط الذي سيتم استخدامه لعرض الخط في أداة الدردشة الخاصة بالموقع.

تقييد المرفقات الواردة

عندما يتم تحديد هذا الخيار، لن يكون لدى زائر الموقع خيار إرفاق مرفق في أداة الدردشة الخاصة بالموقع.

إبقاء الدردشة على الموقع مخفية

عند استخدام هذا الخيار سيتم إخفاء الأداة بالكامل. حتى يتم النقر على مرجع المرساة أو عند فتح الدردشة عبر واجهة برمجة التطبيقات البرمجية.

#أداة_الدردشة_على_الويب

باستخدام المرساة أعلاه، يمكنك إنشاء زر على صفحتك لفتح الأداة بمجرد النقر عليها.

إخفاء العلامة التجارية Respond.io

باستخدام هذا الخيار، يمكنك إزالة العلامة التجارية response.io من عنصر واجهة المستخدم الخاص بك.

تكوين القناة

الخطوة 1: انقر فوق الإعدادات > القنوات

الخطوة 2: حدد موقع دردشة الموقع > انقر فوق إدارة

الخطوة 3: في صفحة تكوين دردشة الموقع ستجد الإعدادات التالية:

رابط الدردشة - رابط URL الخاص بجهة الاتصال الخاصة بك للوصول إلى قناتك.
اسم القناة - يمكن تغيير اسم القناة ويُستخدم داخليًا لتحديد القناة.
نطاقات موقع الويب - مواقع الويب المتصلة بأداة الويب الخاصة بك.
كود الدردشة للموقع - الكود الذي يمكنك لصقه في مصدر HTML لموقعك على الويب إذا كنت بحاجة إلى استرداد مقتطف الكود الناتج.

إذا لم تقم بتضمين موقع الويب الخاص بك في هذه القائمة، فلن يتم تحميل الأداة. يمكنك إضافة عناوين URL متعددة إذا كنت تستخدم البرنامج المساعد على مواقع متعددة على الإنترنت.

الخطوة 4: انقر فوق حفظ التغييرات لتحديث صفحة تكوين دردشة الموقع الإلكتروني

تحديد المستخدمين المسجلين

يمكن التعرف على المستخدمين المسجلين في موقع الويب الخاص بك عن طريق إضافة كود JavaScript بسيط إلى كود موقع الويب الخاص بك. بمجرد مطابقة المعرف الذي تم تمريره مع جهة اتصال موجودة، سيتم استئناف المحادثة الحالية.

يتم استخدام مصطلح "المستخدم" في سياق موقع الويب الخاص بك. في منصة response.io، نستمر في الإشارة إليهم باسم "جهات الاتصال".

window.__respond_settings = {
  المعرف: "customer@example.com"،
  الاسم الأول: "جين"،
  اسم العائلة: "دو"،
  الهاتف: "60123456789"،
  البريد الإلكتروني: "customer@example.com"،
  صورة الملف الشخصي: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
  رمز البلد: "MY",
  اللغة: "en",
  // الحقول المخصصة
  الحقول المخصصة: {
    // عناوين الحقول المخصصة
    الرقم: 123،
    الوصف: "بعض النصوص",
  },
};

دليل حول كيفية استخدام الكود

قم بتعديل الكود (الموضح أدناه) لإرسال معرف المستخدم المسجل دخول حاليًا إلى Respond.io. يمكن أن يكون هذا عنوان البريد الإلكتروني أو معرف جهة الاتصال أو بناءً على أي حقل جهة اتصال آخر. يرجى ملاحظة أن المعرف حقل مطلوب.
قم بلصق الكود مباشرة في علامة head في كل صفحة تريد ظهور دردشة الموقع بها.
- يجب وضع البرنامج النصي لتحديد المستخدمين المسجلين فوق كود دردشة الموقع الذي يمكن العثور عليه في مربع حوار تكوين الدردشة على الموقع.
يمكنك أيضًا إرسال حقول جهات اتصال Respond.io المرتبطة بجهات الاتصال الخاصة بك حتى نقوم بتخزين حقل جهة الاتصال أثناء عملية إنشاء جهة الاتصال. يمكن العثور على اسم الحقل (أو slug) في وحدة حقول جهة الاتصال.
يرجى ملاحظة أنه إذا كنت تستخدم هذه الميزة، فسيتم تجاهل نموذج ما قبل الدردشة، مما يعني أن جهات الاتصال ليست بحاجة إلى ملء معلوماتها قبل بدء المحادثة.

المثال أعلاه هو تمرير عنوان بريد إلكتروني كمعرف وأثناء عملية إنشاء جهة اتصال، سيتم تخزين جميع حقول جهة الاتصال التي تم تمريرها.

التحكم البرمجي (API للمستخدمين)

يمكن فتح وإغلاق أداة الدردشة الخاصة بموقع الويب عبر كود JavaScript الخاص بموقع الويب الخاص بك. يتيح لك هذا إنشاء زر "دردشة معنا" مخصص على موقع الويب الخاص بك، وتشغيل أداة دردشة موقع الويب لفتحها عندما ينقر الزائر على الزر.

الإجراءات

فتح الدردشة.
1. الوصف: يفتح أداة الدردشة.
2. بناء الجملة: $respond.do("chat:open")
إغلاق الدردشة
1. الوصف: إغلاق أداة الدردشة.
2. بناء الجملة: $respond.do("chat:close")

مستمعو الحدث

تم فتح صندوق الدردشة
1. الوصف: يتعامل مع حدث فتح أداة الدردشة (يُشغل دالة الاستدعاء الخاصة بك).
2. بناء الجملة:$respond.on("chat:opened", callback)
تم إغلاق صندوق الدردشة
1. الوصف: يتعامل مع حدث إغلاق عنصر واجهة المستخدم للدردشة (يُطلق وظيفة استدعاء الخاصة بك).
2. بناء الجملة:$respond.on("chat:closed", callback)

طرق التحقق من الحالة

هل الدردشة مفتوحة؟
1. الوصف: يعيد true إذا تم فتح أداة الدردشة، وإلا false.
2. بناء الجملة: $respond.is("chat:open")
هل الدردشة مغلقة؟
1. الوصف: يعيد true إذا تم إغلاق أداة الدردشة، وإلا false.
2. بناء الجملة: $respond.is("chat:closed")

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

لماذا لا يتم تسليم رسائلي إلى جهات الاتصال؟

قد يكون هناك عدة أسباب لعدم تسليم الرسائل:

لقد غادر جهة الاتصال الموقع الإلكتروني.
قد يتجاوز عدم نشاط جهة الاتصال مدة المهلة المحددة.
قد يواجه عميل جهة الاتصال مشكلات في الاتصال بالإنترنت.

لماذا لا تظهر الأداة الخاصة بي على موقع الويب الخاص بي؟

تأكد من تثبيت الكود بشكل صحيح. يرجى الرجوع إلى التعليمات هنا حول كيفية تثبيت أداة الدردشة الخاصة بالموقع.
تأكد من إدراج موقع الويب الذي سيتم تثبيت الأداة عليه في القائمة البيضاء. يرجى الرجوع إلى الخطوة 3 من توصيل أداة دردشة الموقع حول كيفية إضافة النطاق الخاص بك إلى القائمة البيضاء.

دليل البدء السريع لويدجت دردشة الموقع