كيف تضيف الدردشة المباشرة من هدهد إلى موقعك خطوة بخطوة

في هذا الدليل ستُعدّ أداة الدردشة المباشرة من هدهد على موقعك، بدءًا من إنشاء قناة التواصل في اللوحة حتى وصول أول رسالة من عميل. لا يستغرق الأمر سوى دقائق، ولا تحتاج إلى تثبيت أي شيء على خادمك؛ كل ما عليك هو لصق سطر كود قصير في موقعك.

قبل أن تبدأ

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

الخطوة ١: أنشئ قناة للموقع

في اللوحة انتقل إلى «الإعدادات ← قنوات التواصل» واضغط «إضافة قناة تواصل». ومن قائمة القنوات اختر «الموقع الإلكتروني» (Create a live-chat widget).

الخطوة ٢: املأ نموذج «قناة الموقع»

• اسم الموقع: الاسم الذي يراه العملاء أعلى أداة الدردشة، مثل اسم متجرك أو علامتك التجارية.
• نطاق الموقع: النطاق الذي ستعمل عليه أداة الدردشة، مثل example.com.
• لون صندوق الدردشة: اختر لون علامتك التجارية لتبدو الأداة جزءًا من موقعك.
• العنوان الترحيبي وافتتاحية الترحيب: النص الذي يراه العملاء في الشاشة الأولى لأداة الدردشة.
• تفعيل رسالة الترحيب التلقائية (اختياري): رسالة تُرسل تلقائيًا عند بدء المحادثة.

ثم اضغط «إنشاء قناة تواصل».

الخطوة ٣: أضف الموظفين إلى قناة التواصل

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

الخطوة ٤: انسخ الكود

تعرض شاشة «أصبحت قناة التواصل جاهزة الآن!» كود التثبيت. اضغط «نسخ».

يبدو الكود على هذا النحو، إلا أن قيمة websiteToken خاصة بقناتك؛ لذا انسخ الكود دائمًا من لوحتك أنت:

<script>
  (function(d,t) {
    var BASE_URL="https://hodhod.chat";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: 'YOUR_WEBSITE_TOKEN',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

هل تحتاج إلى الكود لاحقًا؟ افتح قناة التواصل، وابحث عن معاينة أداة الدردشة في تبويب «الإعدادات»، ثم بدّلها إلى «النص».

الخطوة ٥: الصق الكود في موقعك

الصق الكود قبل وسم </body> الختامي مباشرة في القالب الرئيسي لموقعك، ليُحمَّل في كل الصفحات:

• موقع HTML عادي: في كل صفحة، أو في التذييل المشترك إن وُجد.
• قوالب PHP: غالبًا في footer.php أو في ملف التخطيط الرئيسي.
• تطبيقات الصفحة الواحدة (React وVue وغيرها): مرة واحدة في index.html، لا داخل المكوّنات.
• ووردبريس: راجع دليل ووردبريس المنفصل.
• شوبيفاي أو ويكس أو سكوير سبيس أو ويب فلو أو Google Tag Manager: راجع دليل منشئات المواقع.

يُحمَّل الكود بشكل غير متزامن، فلا يعطّل عرض صفحتك.

الخطوة ٦: اختبر الأداة

افتح موقعك (ويُفضَّل في نافذة تصفح خاصة). يجب أن يظهر زر الدردشة في الزاوية السفلية. أرسل رسالة تجريبية وتأكد من وصولها إلى «المحادثات» في اللوحة. هذا كل شيء؛ أداة الدردشة تعمل الآن على موقعك.

إعدادات موصى بها بعد التثبيت

طابق لغة أداة الدردشة ومظهرها مع موقعك

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

<script>
  window.chatwootSettings = {
    locale: 'en',
    darkMode: 'auto',
  };
</script>

• قيمة locale هي لغة أداة الدردشة؛ مثلًا ar للصفحات العربية وen للصفحات الإنجليزية.
• يمكن أن تكون قيمة darkMode هي light أو dark أو auto.
• إذا كان في موقعك زر لتبديل المظهر أو اللغة، فاستدعِ window.$chatwoot.setColorScheme('dark') أو window.$chatwoot.setLocale('ar') عند التغيير، لتتبعه أداة الدردشة فورًا.

اعرض الطابور ووقت الانتظار المتوقع

في قناة التواصل، ضمن قسم «Widget features» في تبويب «الإعدادات»، فعّل خيارَي «Show estimated wait time» و«Show live queue position». عندها يرى العميل المنتظر عدد من ينتظرون قبله ومدة الانتظار التقريبية. ولا يظهر التقدير إلا عندما تتوفر للقناة بيانات حديثة كافية تجعله ذا معنى.

إعدادات أخرى تستحق نظرة

• تبويب «ساعات العمل»: حدّد ساعات عمل فريقك ليعرف العملاء متى يتوقعون الرد خارجها.
• تبويب «نموذج ما قبل الدردشة»: اطلب الاسم أو البريد الإلكتروني أو رقم الهاتف قبل بدء الدردشة، إن احتجت إلى ذلك (ماذا تطلب؟).
• تبويب «تقييم رضاء العملاء»: فعّل استبيان الرضا بعد الدردشة، ويمكنك إضافة أسئلة متابعة أيضًا.
• تبويب «الإعدادات» الثاني ← «Allowed Domains»: تأكد من أن أداة الدردشة لا تعمل إلا على نطاقاتك. في اللوحة العربية يحمل تبويبان اسم «الإعدادات»، والمقصود هنا التبويب الذي يلي «نموذج ما قبل الدردشة».
• «تفعيل صندوق جمع البريد الإلكتروني» في تبويب «الإعدادات»: ليصل الرد عبر البريد إلى العملاء الذين يغادرون الصفحة.

تظهر بعض أقسام هدهد، مثل «Widget features» و«Allowed Domains»، بأسمائها الإنجليزية في اللوحة العربية.

إذا لم تظهر أداة الدردشة

1. امسح ذاكرة التخزين المؤقت. قد تعرض إضافات التخزين المؤقت أو شبكة CDN نسخة قديمة من الصفحة.
2. تحقق من مكان الكود. يجب أن يكون في قالب يُحمَّل في كل الصفحات.
3. راجع «Allowed Domains». إذا حددت قائمة نطاقات، فيجب أن يكون نطاق موقعك فيها (والنطاقات الفرعية أيضًا إن لزم).
4. افحص وحدة تحكم المتصفح. اضغط F12 وافتح وحدة التحكم (Console) وابحث عن الأخطاء. وإذا كنت تستخدم مانع إعلانات، فجرّب مرة بدونه.

هل ما زالت المشكلة قائمة؟ راسلنا من أداة الدردشة أسفل هذه الصفحة.

الأسئلة الشائعة