جدول المحتويات

البدء السريع لأداة الدردشة على موقع الويب

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

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

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

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

الخطوة 2: أضف قناة > دردشة موقع الويب > انقر فوق التالي

الخطوة 3: تحديد موقع الويب

املأ موقع (مواقع) الويب حيث ستتم إضافة الأداة. راجع ما يلي حول كيفية إدراج مواقع الويب في القائمة البيضاء.

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

الخطوة 4: حدد لون السمة لعنصر واجهة المستخدم للدردشة باستخدام منتقي الألوان التفاعلي

اختر لونًا يتوافق مع لون علامتك التجارية وموقعك الإلكتروني.

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

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

الخطوة 6: بمجرد الانتهاء، انقر فوق التالي لمتابعة الخطوات التالية.

الخطوة 7. قم بتثبيت البرنامج النصي

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

العثور على رمز أداة الدردشة على موقع الويب بعد توصيل القناة

إذا كانت لديك قناة متصلة بالفعل على منصة Response.io وتحتاج إلى استرداد مقتطف الرمز الذي تم إنشاؤه، فانتقل إلى الإعدادات > القنوات > قناة الدردشة على موقع الويب الخاص بك > انقر فوق تكوين > قم بتوسيع مفتاح تبديل رمز الدردشة على موقع الويب > انسخ الرمز.

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

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

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

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

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

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

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

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

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

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

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

العرض والمظهر

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

مجال

وصف

لون الموضوع

سيتم استخدام اللون المختار باعتباره اللون الأساسي لعنصر واجهة المستخدم الخاص بك.

لون الخط

سيتم استخدام اللون المختار باعتباره لون النص الأساسي لعنصر واجهة المستخدم الخاص بك.

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

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

رسالة منبثقة

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

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

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

موضع

مجال

وصف

محاذاة إلى

يمكن للمستخدمين اختيار تحديد موضع لعرض الأداة على يسار أو يمين النظام الأساسي.

التباعد العمودي

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

التباعد الأفقي

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

حجم القطعة

يمكن للمستخدمين اختيار حجم الأداة من صغير أو قياسي أو كبير.

خيارات العرض

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

عناصر الرأس

مجال

وصف

عنوان

سيظهر العنوان أعلى أداة الدردشة الخاصة بك.

سطر الوصف

سيتم عرض سطر الوصف تحت العنوان.

شعار موقع الدردشة

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

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

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

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

يمكن عرض أيقونات القناة باللون الأبيض أو الملون على أداة الدردشة الخاصة بك. حدد White أو Colored لتتناسب مع لون السمة الخاص بأداة الدردشة الخاصة بك.

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

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

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

تخصيص أيقونات قناة أداة الدردشة

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

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

روابط القناة

حقل الإدخال مطلوب

WhatsApp

رقم هاتف WhatsApp

Facebook ماسنجر

معرف صفحة Facebook

Telegram

اسم بوت Telegram

Twitter

معرف Twitter

LINE

معرف LINE

Viber

اسم الحساب العام Viber

رسالة قصيرة

رقم هاتف الرسائل القصيرة

بريد إلكتروني

عنوان البريد الإلكتروني

مكالمة هاتفية

رقم التليفون

رابط مخصص

عنوان URL والرمز

ريال قطري مخصص

صورة QR وأيقونة

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

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

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

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

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

يمكن تخصيص تسميات الحقول بلغة مختلفة لتتناسب مع لغة موقع الويب.
نموذج نموذج ما قبل الدردشة

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

مجال

وصف

نص شريط الإدخال

سيعمل هذا النص كعنصر نائب في منطقة الكتابة.

خط النص

الخط الذي سيتم استخدامه لعرض الخط في أداة الدردشة على موقع الويب.

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

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

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

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

#webchat_widget

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

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

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

تكوين القناة

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

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

الخطوة 3: قم بإجراء التكوين اللازم.

يمكنك تكوين ما يلي:

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

الخطوة 4: انقر فوق تم لتحديث تكوين القناة.

تحديد المستخدمين الذين قاموا بتسجيل الدخول

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

ملاحظة : يتم استخدام مصطلح "المستخدم" في سياق موقع الويب الخاص بك. في منصة Response.io، نواصل الإشارة إليهم باسم "جهات الاتصال".
<script>
window.__respond_settings = {
identifier: 'customer@example.com',
firstName: 'Jane',
lastName: 'Doe',
phone: '60123456789',
email: 'customer@example.com',
profilePic: '<https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg>',
countryCode: 'MY',
language: 'en',
// Custom Fields
custom_fields: {
// slugs of custom fields
number: 123,
description: 'some text',
},
};
</script>


<script id="respondio__widget" src="https://cdn-staging. respond.io /webchat/widget/widget.js?cId=ac37d6ced587cab720c5b05a1bc209c331c66c19b1e7e6069e5807491fb2a7dc"></script>

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

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

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

التحكم البرمجي (واجهة برمجة التطبيقات للمستخدمين)

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

أجراءات

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

مستمعو الأحداث

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

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

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

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

فشل إرسال الرسائل إلى جهة الاتصال

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

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

القطعة لا تظهر على الموقع

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

يشعر بالضيق؟ لا تخف.

احتاج مساعدة؟ اتصل بنا للحصول على الدعم. المساعدة هنا!

عرض Widget دردشة الموقع

تثبيت واجهة دردشة الموقع على WordPress

Powered by HelpDocs (opens in a new tab)

Powered by HelpDocs (opens in a new tab)