27

Vue 3

يبسط المكون الإضافي tawk.to لـ Vue 3 التكامل ويجعل من السهل تخصيص سلوك الواجهة في تطبيقك. البرنامج المساعد متوافق مع Nuxt.

جميع طرق API الخاصة بنا متاحة للمكوِّن الإضافي. الق نظرة على قائمة مرجع API الخاص بنا.

تنفيذ Vue.js

١- قم بتحميل البرنامج المساعد من هنا

٢- بعد ذلك ، استخدم أحد الأوامر أدناه لتثبيت التبعية باستخدام العقدة أو مدير الحزم.

استيراد tawk-messenger-vue من ملف JavaScript الرئيسي في المجلد src /. بعد ذلك ، قم بتعيين قيم الواجهة ومعرف الخاصية ، والتي يمكن العثور عليها في لوحة تحكم tawk.to.

ابحث عن معرفات واجهة الدردشة والخاصيات

للعثور على معرفات عناصر واجهة المستخدم والممتلكات الخاصة بك ، قم بتسجيل الدخول إلى حساب tawk.to . ثم شق طريقك إلى ⚙️إدارة> القنوات > واجهة الدردشة.

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

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

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

في المثال أدناه ، معرف الخاصية هو xxxxxxxxxxxxxxxxxxxxxxxx و widgetId هو 123456789

تنفيذ Nuxt.js

إذا كنت ستستخدم المكون الإضافي مع Nuxt.js ، فاتبع الخطوات أدناه.

قم بإنشاء ملف باسم tawk-messenger.client.js في مجلد plugins / الخاص بمشروعك وأضف الكود التالي:

حالة الخاصية

للوصول إلى وظائف API ، اتصل بـ $ tawkMessenger في أي مكان في مكوناتك.

التعامل مع الحدث

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

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

فيما يلي حلول لأكثر الأخطاء شيوعًا التي يرتكبها الأشخاص عند استخدام المكون الإضافي.

الخطأ رقم 1: PropertyId غير محدد في المكون الإضافي

إذا واجهت هذه الرسالة في وحدة التحكم ، فتحقق مما يلي:

  • تم تحديد كل من propertyId و widgetId
  • تتطابق الأحرف في اسم الخاصية تمامًا مع تلك الموجودة في propertyId و widgetId
  • تكتب I في propertyId و widgetId بأحرف كبيرة
  • يجب أن يكون المعرف سلسلة

الحل:

  1. استيراد TawkMessengerVue
  2. اضبط Vue لاستخدام البرنامج المساعد
  3. تعيين معرفات عنصر واجهة المستخدم والممتلكات

الخطأ رقم 2: "TypeError: window.Tawk_API. [اسم الوظيفة] ليس دالة"

يحدث هذا الخطأ عندما يتم استدعاء API قبل تحميل tawk-messenger.

في المثال أدناه ، الوظيفة this. $ tawkMessenger.toggle ()؛ تم استدعاؤه داخل مراحل () التثبيت وإرجاع خطأ

الحل:

١. ضع الكود this. $ tawkMessenger.toggle ()؛ داخل مستمع الحدث إذا كنت تخطط لاستدعاء هذه الوظيفة عند تحميل tawk-messenger للتأكد من أن الواجهة جاهزة قبل استدعاء الوظيفة. ينطبق هذا على جميع الوظائف في واجهة برمجة التطبيقات (تبديل ، تكبير ، تصغير ، إلخ).

٢. يمكنك الاستدعاء مباشرة this.$tawkMessenger.toggle(); أو أي وظيفة أخرى طالما أنك تعلم أنه تم تحميل الواجهة. يمكنك التحقق من ذلك عن طريق الاتصال بهذا.this.$tawkMessenger.onLoaded. سيعيد الأسلوب منطقية صحيحة إذا تم تحميله.

أطر عمل JS الأخرى التي ندعمها

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

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

33 من 44 أعجب بهذا المقال