كيفية استخدام رابط نصي أو زر

لفتح واجهة الدردشة

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

إتبع الخطوات التالية:

١.أضف رمز الواجهة إلى موقعك قبل علامة الإغلاق </body>.

٢.أضف نصًا مخصصًا أو صورة إلى الخادم الخاص بك مع حدث النقر.

٣. قم بتعديل الواجهة ، حتى تتمكن من إخفاء الواجهة عند التحميل (اختياري).

٤.اعرض صورة مخصصة أو نصًا بناءً على حالة الاتصال (اختياري).

اتبع هذه التعليمات خطوة بخطوة:

الخطوة ١ - انسخ كود الواجهة

ملاحظة: إذا قمت بالفعل بتثبيت المكون الإضافي tawk.to والواجهة على موقعك ، فيمكنك تخطي هذه الخطوة والبدء بالخطوة ٢.

١.قم بتسجيل الدخول إلى لوحة التحكم .

٢.انتقل إلى قسم المشرف أسفل الشريط الجانبي الأيمن.

٣.اختر الموقع من قائمة الخاصيات (إذا كان لديك أكثر من موقع واحد).

٤.حدد خيار واجهة الدردشة من القائمة.

٥.حرك المؤشر إلى قسم كود القطعة. حدد نسخ إلى الحافظة لنسخ الرمز.

٦.الصق كود الواجهة في HTML موقع الويب الخاص بك مباشرة قبل </body>. 

٧.قم بتحديث موقع الويب الخاص بك للتأكد من أنك ترى الواجهة.


الخطوة ٢ - قم بإنشاء زر أو نص على موقعك

أنشئ زرًا أو نصًا وأضف الكود التالي قبله:

إتبع الخطوات التالية:

للحصول على رابط نصي ، استخدم:

لاستخدام صورة:


الخطوة ٣ - إخفاء الواجهة عند التحميل والخروج

١.قم بتسجيل الدخول إلى لوحة التحكم.

٢.انتقل إلى قسم المشرف أسفل الشريط الجانبي الأيمن.

٣.حدد الخاصية من القائمة المنسدلة (في حال لديك أكثر من موقع واحد).

٤.انقر على خيار واجهة الدردشة.

٥. ابحث عن سلوك القطعة - إعدادات الرؤية.

٦.قم بتشغيل من إخفاء الواجهة عند التحميل لإخفاء الواجهة قبل النقر فوقها.


الخطوة ٤ - اعرض صورة أو نصًا مخصصًا بناءً على حالة الإتصال

إذا اتبعت الخطوات من ١ إلى ٣ ، فيجب أن يكون لديك الآن صورة أو نص على موقعك ينبثق من الدردشة عند النقر فوقه.

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

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

٢.قم بإضافة وتعديل هذا الرمز بالصور المخصصة والنصوص ووضعه مباشرة قبل علامة </body>.

انقر هنا للحصول على مثال عملي لكود الحالة المستندة إلى النصوص.

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

159 من 250 أعجب بهذا المقال