WordPress: Користење jQuery за отворање прозорец за разговор во живо со кликнување на врска или копче користејќи Elementor

Користење на jQuery за отворање прозорец за разговор во живо со кликнување на врска или копче користејќи Elementor

Еден од нашите клиенти има Elementor, една од најцврстите платформи за градење страници за WordPress. Им помагаме да ги исчистат нивните напори за влезен маркетинг во последните неколку месеци, минимизирајќи ги приспособувањата што ги имплементираа и подобрување на комуникацијата на системите – вклучително и со аналитика.

Клиентот има 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 слушател

Едно ограничување на методологијата 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 напредни поставки класи

Се разбира, кодот може да се подобри или може да се користи и за кој било друг вид на настан, како што е Настан за 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 Започнете со разговор во живо

Откривање: Јас користам придружни врски за Elementor livechat во оваа статија. Сајтот каде што го развивме решението е a Производител на топла када во централна Индијана.