كيفية إضافة عدة واجهات (widgets) إلى موقع إلكتروني باستخدام JavaScript

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

 إذا كنت تدير عدة خصائص (properties) في tawk.to وتريد عرض أكثر من واجهة الدردشة على نفس الموقع، يمكنك القيام بذلك باستخدام حل مخصص بـ JavaScript. يتيح لك هذا تشغيل عدة واجهات بشكل مستقل — وهو مثالي لدعم عدة علامات تجارية أو فرق منفصلة.


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

ما الفرق بين الخاصية (property) والواجهة (widget)؟

فهم الفرق بين الخاصية والواجهة أمر أساسي لإدارة إعداد tawk.to بشكل فعال.


الخاصية (Property)


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


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

  • واجهات الدردشة

  • رسائل المشغل

  • قاعدة المعرفة

  • الاختصارات

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

  • الوكلاء


ملاحظة: يتم شراء الوظائف الإضافية (مثل AI Assist وإزالة العلامة التجارية) لكل خاصية بشكل مستقل ولا يمكن نقلها بين الخصائص.


الواجهة (Widget)


الواجهة هي نافذة الدردشة التي يراها زوار موقعك. وهي تتيح للمستخدمين:

  • بدء محادثة مباشرة

  • ترك رسائل في وضع عدم الاتصال

  • عرض المحتوى المشترك عبر بطاقات الواجهة


يمكن أن تحتوي كل خاصية على ما يصل إلى 20 واجهة، ويمكنك تخصيص كل واحدة منها بشكل مستقل، بما في ذلك:

  • التصميم والألوان

  • لغة العرض

  • قواعد الرؤية

  • طريقة عمل الواجهة


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

لماذا لا يمكنني استخدام الشيفرة الافتراضية لإضافة عدة واجهات؟

 بشكل افتراضي، يدعم كود التضمين في tawk.to تحميل واجهة واحدة فقط في كل صفحة. إذا أضفت أكثر من كود تضمين قياسي، فسوف يحدث تعارض. السبب هو أن كل كود واجهة يستخدم نفس الكائن العام (Tawk_API) ومستمعي الأحداث العامة، واللذين لا يمكن تكرارهما في نفس الصفحة.


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

أولاً، احصل على معرف الخاصية ومعرف الواجهة

1. سجّل الدخول إلى حسابك في tawk.to.

2. اختر الخاصية الصحيحة.
3. انقر على الإدارة في القائمة العلوية.

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

تعديل كود الواجهة الخاصة بك لتضمين عدة واجهات

 To dynamically load different interfaces, you will need to update the standard include code by specifying the correct property ID and interface ID .


قم بتحديث رابط الكود كما يلي:

To change both the property and the interface, update both identifiers in the link. Example using actual identifiers:

Here's an example of a tawk.to interface implementation that dynamically loads an interface based on the chat ID you specify:

الغرض من دالة getChatId() هو توفير معرف الخاصية ومعرف الواجهة الصحيحين بالصيغة المطلوبة.


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


حالات الاستخدام:

قم بتغيير الواجهة أو الخاصية بناءً على لغة الصفحة

قم بتغيير الواجهة بناءً على لغة الزائر

بتغيير الواجهة بناءً على موقع الزائر باستخدام الموقع الجغرافي IP الخاص بـ Cloudflare الشروط المسبقة

اعتبارات هامة

  • يعتمد هذا الحل على JavaScript ويتطلب فهمًا أساسيًا لكيفية تعديل كود موقعك.


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


  • لن تتمكن من استخدام كائن Tawk_API بشكل عام لكلا الواجهتين. قد تحتاج إلى برمجة مخصصة للتحكم المتقدم.

إذا كان لديك ملاحظات حول هذه المقالة، أو إذا كنت بحاجة إلى مزيد من المساعدة:


هل كان هذا المقال مفيداً؟

69 من 103 أعجب بهذا المقال