كيف تضيف الدردشة المباشرة إلى Shopify وWix وSquarespace وWebflow

أداة الدردشة المباشرة من هدهد مقتطف قصير من JavaScript، أي أنها تعمل على أي منشئ مواقع يتيح إضافة كود مخصص. يوضح هذا الدليل بالضبط أين تلصقه في Shopify وWix وSquarespace وWebflow، وكيف تضيفه عبر Google Tag Manager إن كنت تفضّل ألا تلمس كود الموقع إطلاقًا.

هل تستخدم ووردبريس أو ووكومرس؟ ابدأ بـدليل ووردبريس: فهناك إضافة جاهزة.

قبل أن تبدأ

تحتاج إلى مقتطف التثبيت الخاص بقناتك. إذا لم تنشئ قناة للموقع بعد، فإن الخطوات من ١ إلى ٤ في دليل تثبيت الدردشة على الموقع تستغرق دقائق قليلة. ويمكنك نسخ الكود مجددًا في أي وقت: افتح «الإعدادات ← قنوات التواصل» ثم قناة موقعك، وفي تبويب «الإعدادات» بدّل معاينة أداة الدردشة إلى «النص».

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

Shopify

1. في لوحة إدارة Shopify، انتقل إلى «Online Store» ثم «Themes».
2. بجوار القالب الذي تريد تعديله، اضغط زر «…» واختر «Duplicate». العمل على نسخة يتيح لك الاختبار بأمان.
3. على النسخة، اضغط «…» مجددًا واختر «Edit code».
4. في مجلد «Layout»، افتح theme.liquid.
5. مرّر إلى الأسفل والصق مقتطف هدهد فوق وسم الإغلاق </body> مباشرة.
6. احفظ، وعاين النسخة، وعندما يعمل كل شيء انشرها.

ملاحظات:

• الكود موجود داخل القالب. فإذا بدّلت القالب، فأضفه إلى القالب الجديد أيضًا. كما يحذّر Shopify من أن التغييرات في كود القالب قد تضيع عند تحديث القالب.
• القالب الذي تجرّبه فقط لا يمكن تعديله.
• صفحة الدفع في Shopify منفصلة عن قالبك، لذلك تظهر الأداة في صفحات متجرك (الرئيسية والمجموعات والمنتجات والسلة) لكن ليس في خطوات الدفع نفسها.

Wix

1. في لوحة تحكم موقعك، انتقل إلى «Settings» وافتح «Custom Code» ضمن «Development & integrations».
2. اضغط «+ Add Custom Code» والصق مقتطف هدهد.
3. امنحه اسمًا يسهل تمييزه، مثل «Hodhod chat».
4. ضمن «Add Code to Pages» اختر «All pages»، وضمن «Place Code in» اختر «Body – end».
5. قرّر هل يُحمَّل الكود مرة واحدة في كل زيارة أم في كل صفحة، ثم اضغط «Apply».

ملاحظات:

• يجب أن يكون الموقع منشورًا ومربوطًا بنطاق، وهذا بدوره يتطلب خطة Premium.
• المقتطفات مرتبطة بالنطاق: إذا عيّنت للموقع نطاقًا مختلفًا فإنها تُحذف.
• لا يقدّم Wix دعمًا للأكواد الخارجية. فإذا لم تظهر الأداة بعد النشر، فراجع إرشادات Wix للكود المخصص بحثًا عن قيود حديثة.

Squarespace

1. افتح لوحة موقعك وانتقل إلى «Website Tools» ثم «Code Injection». (غيّر Squarespace أسماء القوائم ومواضعها بين الإصدارات، فابحث عن «Code Injection» إن اختلف المسار.)
2. الصق مقتطف هدهد في حقل «Footer».
3. اضغط «Save».

ملاحظات:

• «Code Injection» متاح في خطط Core وPlus وAdvanced (وبعض الخطط الأقدم)، وليس في الخطة Basic.
• يُضاف كود التذييل قبل وسم الإغلاق </body> في كل صفحة.
• قد لا ينفّذ Squarespace السكربتات المحقونة وأنت مسجّل الدخول، لذا تحقق من النتيجة في نافذة تصفح خاصة على موقعك المنشور.

Webflow

1. افتح «Site settings» لمشروعك وانتقل إلى تبويب «Custom code».
2. الصق مقتطف هدهد في «Footer code» ليُحمَّل قبل وسم الإغلاق </body> مباشرة، واضغط «Save changes».
3. انشر موقعك. يظهر الكود المخصص في المعاينة، لكنه لا يعمل على الموقع الحي إلا بعد النشر.

ملاحظات:

• لإضافة الأداة إلى صفحة واحدة فقط، استخدم إعدادات تلك الصفحة، في المربع «Before </body> tag».
• إذا لم تجد الإعداد، فراجع مساعدة Webflow لمعرفة ما تتيحه خطتك ودورك.

أي موقع، عبر Google Tag Manager

إذا كان Google Tag Manager موجودًا على موقعك، فيمكنك إضافة الأداة دون تعديل الموقع إطلاقًا:

1. في Tag Manager، انتقل إلى «Tags» واضغط «New».
2. اختر نوع الوسم «Custom HTML» والصق مقتطف هدهد.
3. ضمن «Triggering» اختر «All Pages».
4. احفظ، ثم اضغط «Submit» و«Publish» للحاوية (container).

تحتفظ الأداة بملف تعريف ارتباط (cookie) صغير في متصفح الزائر ليتمكن من متابعة المحادثة نفسها من صفحة إلى أخرى. وإذا كان موقعك يطلب موافقة على ملفات تعريف الارتباط، فاستخدم مشغّل (trigger) أداة الموافقة لديك كي لا يُنفَّذ الوسم إلا بعد الموافقة.

اختبر الأداة

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

إذا ضبطت «Allowed Domains» في تبويب «الإعدادات» الثاني للقناة (الذي يلي «نموذج ما قبل الدردشة»)، فأضف كل نطاق تعمل عليه الأداة، مفصولة بفاصلة لاتينية (,): نطاقك الحي، وكذلك أي نطاق معاينة أو نطاق افتراضي تختبر عليه (مثل your-store.myshopify.com أو yoursite.wixsite.com أو yourproject.webflow.io). وإلا ستبقى الأداة مخفية على النطاقات الناقصة.

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

1. تأكد من النشر. لا ينفّذ Wix وWebflow الكود المخصص إلا على الموقع المنشور.
2. تأكد من موضع الكود. يجب أن يكون المقتطف في منطقة التذييل أو «Body – end» التي تُحمَّل في كل الصفحات.
3. تأكد من «Allowed Domains». يجب أن يكون النطاق الذي تختبر عليه ضمن القائمة.
4. ابحث عن نسخة ثانية. إذا رأيت زرّي دردشة، فقد أُضيف الكود مرتين، مثلًا في القالب وفي مدير الوسوم. أبقِ نسخة واحدة.
5. جرّب دون مانع إعلانات، وانظر إلى وحدة تحكم المتصفح (F12) بحثًا عن أخطاء.

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