WordPress: використання jQuery, щоб відкрити вікно LiveChat, натиснувши посилання або кнопку за допомогою Elementor

Використання jQuery, щоб відкрити вікно LiveChat, натиснувши посилання або кнопку за допомогою Elementor

Один з наших клієнтів має факір, одна з найнадійніших платформ для створення сторінок для WordPress. Протягом останніх кількох місяців ми допомагали їм налагодити вхідний маркетинг, звести до мінімуму впроваджені налаштування та покращити взаємодію систем, зокрема за допомогою аналітики.

Замовник має LiveChat, фантастичний сервіс чату, який має надійну інтеграцію Google Analytics для кожного кроку процесу чату. LiveChat має дуже хороший API для інтеграції його у ваш сайт, включаючи можливість відкривати вікно чату за допомогою події onClick у тегу прив’язки. Ось як це виглядає:

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

Це зручно, якщо у вас є можливість редагувати основний код або додавати власний HTML. З факір, однак платформа заблокована з міркувань безпеки, тому ви не можете додати файл подія onClick до будь-якого об'єкта. Якщо до вашого коду додано цю користувацьку подію onClick, ви не отримаєте жодної помилки… але ви побачите, що код вилучено з виводу.

Використання jQuery Listener

Одним з обмежень методології onClick є те, що вам доведеться редагувати кожне посилання на вашому сайті та додати цей код. Альтернативною методологією є включення сценарію на сторінку, яка слухає за певний клік на вашій сторінці, і він виконає код за вас. Це можна зробити, шукаючи будь-який якірний тег з конкретним Клас CSS. У цьому випадку ми призначаємо тег прив’язки з ім’ям класу відкрити чат.

У нижньому колонтитулі сайту я просто додаю спеціальне поле HTML з необхідним сценарієм:

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

Тепер цей сценарій поширюється на весь сайт, тому незалежно від сторінки, якщо у мене є клас відкрити чат натиснувши, відкриється вікно чату. Для об’єкта Elementor ми просто встановлюємо посилання на #, а клас як відкрити чат.

елемент або посилання

elementабо класи розширених налаштувань

Звичайно, код можна розширити або використовувати для будь-якого іншого типу події, як-от 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, які розширюють можливості.

Почніть роботу з Elementor Почніть роботу з LiveChat

Розкриття інформації: Я використовую партнерські посилання для факір і LiveChat у цій статті. Сайт, на якому ми розробили рішення, це a Виробник гідромасажних ванн у центральній Індіані.