وردپرس: استفاده از jQuery برای باز کردن پنجره LiveChat با کلیک کردن روی پیوند یا دکمه با استفاده از Elementor

استفاده از jQuery برای باز کردن پنجره LiveChat با کلیک کردن روی پیوند یا دکمه با استفاده از Elementor

یکی از مشتریان ما دارد Elementor، یکی از قوی ترین پلتفرم های صفحه سازی برای وردپرس. ما در چند ماه گذشته به آنها کمک کرده‌ایم تا تلاش‌های بازاریابی ورودی خود را پاک کنند، سفارشی‌سازی‌هایی را که پیاده‌سازی کرده‌اند به حداقل برسانند، و سیستم‌ها را بهتر با هم ارتباط برقرار کنند - از جمله با تجزیه و تحلیل.

مشتری دارد livechat در، یک سرویس چت فوق العاده که دارای یکپارچه سازی قوی Google Analytics برای هر مرحله از فرآیند چت است. LiveChat یک API بسیار خوب برای ادغام آن در سایت شما دارد، از جمله داشتن قابلیت باز کردن پنجره چت با استفاده از یک رویداد onClick در یک تگ لنگر. در اینجا چگونه به نظر می رسد:

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

اگر توانایی ویرایش کد اصلی یا اضافه کردن HTML سفارشی را دارید، مفید است. با Elementorبا این حال، پلتفرم به دلایل امنیتی قفل شده است، بنابراین شما نمی توانید آن را اضافه کنید رویداد onClick به هر شی اگر رویداد سفارشی onClick را به کد خود اضافه کرده باشید، هیچ نوع خطایی دریافت نمی کنید ... اما کد حذف شده را از خروجی خواهید دید.

استفاده از jQuery Lister

یکی از محدودیت های روش onClick این است که شما باید تک تک لینک های سایت خود را ویرایش کنید و آن کد را اضافه کنید. یک روش جایگزین، گنجاندن یک اسکریپت در صفحه ای است که گوش می کند برای یک کلیک خاص روی صفحه شما و کد را برای شما اجرا می کند. این را می توان با جستجوی هر یک انجام داد برچسب لنگر با یک خاص کلاس CSS. در این مورد، ما یک تگ anchor با یک کلاس به نام تعیین می کنیم openchat.

در پاورقی سایت، من فقط یک فیلد HTML سفارشی با اسکریپت لازم اضافه می کنم:

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

اکنون، آن اسکریپت گسترده است، بنابراین بدون توجه به صفحه، اگر کلاسی از آن داشته باشم openchat که کلیک کنید، پنجره چت باز می شود. برای شی Elementor، ما فقط پیوند را به # و کلاس را به عنوان تنظیم می کنیم openchat.

لینک عنصر

کلاس های تنظیمات پیشرفته elementor

البته، کد را می توان تقویت کرد یا می توان برای هر نوع رویداد دیگری مانند a رویداد 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 وجود دارد که قابلیت‌ها را افزایش می‌دهد.

با المنتور شروع کنید با LiveChat شروع کنید

افشا: من از پیوندهای وابسته برای استفاده می کنم Elementor و livechat در در این مقاله. سایتی که ما راه حل را توسعه دادیم یک است تولید کننده هات وان در مرکز ایندیانا.