WordPress: Използване на jQuery за отваряне на прозорец на LiveChat чрез щракване върху връзка или бутон с помощта на Elementor

Използване на jQuery за отваряне на прозорец на LiveChat чрез щракване върху връзка или бутон с помощта на Elementor

Един от нашите клиенти има Elementor, една от най-стабилните платформи за изграждане на страници за WordPress. Помагахме им да изчистят усилията си за входящ маркетинг през последните няколко месеца, като минимизират персонализациите, които са приложили, и накарат системите да комуникират по-добре – включително с анализи.

Клиентът има чат в реално време, фантастична услуга за чат, която има стабилна интеграция на Google Analytics за всяка стъпка от процеса на чат. LiveChat има много добър API за интегрирането му във вашия сайт, включително възможността за отваряне на прозореца за чат с помощта на събитие onClick в маркер за закрепване. Ето как изглежда това:

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

Това е удобно, ако имате възможност да редактирате основния код или да добавяте персонализиран HTML. С Elementor, въпреки това платформата е заключена от съображения за сигурност, така че не можете да добавите събитие onClick към всеки обект. Ако имате това персонализирано събитие onClick, добавено към вашия код, няма да получите никакъв тип грешка... но ще видите кода изтрит от изхода.

Използване на jQuery Listener

Едно ограничение на методологията onClick е, че ще трябва да редактирате всяка отделна връзка на вашия сайт и да добавите този код. Алтернативна методология е да включите скрипт в страницата, която слушания за конкретно щракване върху вашата страница и тя изпълнява кода вместо вас. Това може да стане, като потърсите всеки котва етикет със специфична CSS клас. В този случай ние обозначаваме котвен маркер с клас, наречен 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 Анализ. Разбира се, 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 и чат в реално време в тази статия. Сайтът, където разработихме решението е a Производител на горещи вани в централна Индиана.