WordPress: استخدام jQuery لفتح نافذة LiveChat عن طريق النقر فوق ارتباط أو زر باستخدام Elementor

استخدام jQuery لفتح نافذة LiveChat عن طريق النقر فوق ارتباط أو زر باستخدام Elementor

أحد عملائنا لديه Elementor، أحد أقوى منصات بناء الصفحات في WordPress. لقد ساعدناهم في تنظيف جهودهم التسويقية الواردة على مدار الأشهر القليلة الماضية ، وتقليل التخصيصات التي قاموا بتنفيذها ، وجعل الأنظمة تتواصل بشكل أفضل - بما في ذلك التحليلات.

العميل لديه دردشة مباشرة، خدمة دردشة رائعة تتمتع بتكامل قوي مع Google Analytics لكل خطوة في عملية الدردشة. يحتوي LiveChat على واجهة برمجة تطبيقات جيدة جدًا لدمجه في موقعك ، بما في ذلك القدرة على فتح نافذة الدردشة المنبثقة باستخدام حدث onClick في علامة الربط. إليك كيف يبدو ذلك:

<a href="#" onclick="parent.LC_API.open_chat_window();return false;">Chat Now!</a>

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

باستخدام مستمع jQuery

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

داخل تذييل الموقع ، أقوم فقط بإضافة حقل HTML مخصص مع البرنامج النصي الضروري:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
  });
});
</script>

الآن ، هذا البرنامج النصي على مستوى الموقع ، لذا بغض النظر عن الصفحة ، إذا كان لدي فئة من دردشة مفتوحة تم النقر عليه ، سيفتح نافذة الدردشة. بالنسبة لكائن Elementor ، قمنا فقط بتعيين الرابط إلى # والفئة كـ دردشة مفتوحة.

رابط العنصر

فئات الإعدادات المتقدمة elementor

بالطبع ، يمكن تحسين الكود أو يمكن استخدامه لأي نوع آخر من الأحداث أيضًا ، مثل حدث Google Analytics. بالطبع ، تتمتع LiveChat بتكامل رائع مع Google Analytics الذي يضيف هذه الأحداث ، لكني أدرجها أدناه كمثال فقط:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('.openchat a').click(function(){
    parent.LC_API.open_chat_window();return false;
    gtag('event', 'Click', { 'event_category': 'Chat', 'event_action':'Open','event_label':'LiveChat' });
  });
});
</script>

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

ابدأ مع Elementor ابدأ مع LiveChat

الإفصاح: أنا أستخدم الروابط التابعة لـ Elementor و دردشة مباشرة في هذه المقالة. الموقع الذي طورنا فيه الحل هو ملف مُصنِّع لأحواض الاستحمام الساخنة في وسط ولاية إنديانا.