WordPress: Utilizarea jQuery pentru a deschide o fereastră LiveChat făcând clic pe un link sau pe un buton folosind Elementor

Folosind jQuery pentru a deschide o fereastră LiveChat făcând clic pe un link sau pe un buton folosind Elementor

Unul dintre clienții noștri are Elementor, una dintre cele mai robuste platforme de creare de pagini pentru WordPress. I-am ajutat să își curățeze eforturile de inbound marketing în ultimele luni, minimizând personalizările pe care le-au implementat și făcând ca sistemele să comunice mai bine, inclusiv prin analize.

Clientul are LiveChat, un serviciu de chat fantastic care are o integrare robustă Google Analytics pentru fiecare pas al procesului de chat. LiveChat are un API foarte bun pentru integrarea acestuia în site-ul dvs., inclusiv posibilitatea de a deschide fereastra de chat folosind un eveniment onClick într-o etichetă de ancorare. Iată cum arată:

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

Acest lucru este util dacă aveți posibilitatea de a edita codul de bază sau de a adăuga HTML personalizat. Cu Elementor, totuși, platforma este blocată din motive de securitate, astfel încât să nu puteți adăuga un eveniment onClick la orice obiect. Dacă aveți acel eveniment personalizat onClick adăugat la cod, nu primiți niciun tip de eroare... dar veți vedea codul scos din rezultat.

Folosind un jQuery Listener

O limitare a metodologiei onClick este că ar trebui să editați fiecare link de pe site-ul dvs. și să adăugați acel cod. O metodologie alternativă este includerea unui script în pagina care ascultă pentru un anumit clic pe pagina ta și execută codul pentru tine. Acest lucru se poate face căutând oricare etichetă ancoră cu un specific Clasa CSS. În acest caz, desemnăm o etichetă de ancorare cu o clasă numită openchat.

În subsolul site-ului, adaug doar un câmp HTML personalizat cu scriptul necesar:

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

Acum, acel script este la nivelul întregului site, deci indiferent de pagină, dacă am o clasă de openchat dacă faceți clic, se va deschide fereastra de chat. Pentru obiectul Elementor, am stabilit linkul la # și clasa ca openchat.

elementar link

elementor clase de setări avansate

Desigur, codul poate fi îmbunătățit sau poate fi folosit și pentru orice alt tip de eveniment, cum ar fi a Eveniment Google Analytics. Desigur, LiveChat are o integrare remarcabilă cu Google Analytics care adaugă aceste evenimente, dar o includ mai jos doar ca exemplu:

<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>

Crearea unui site cu Elementor este destul de simplă și recomand cu căldură platforma. Există o comunitate grozavă, tone de resurse și destul de multe suplimente Elementor care îmbunătățesc capacitățile.

Începeți cu Elementor Începeți cu LiveChat

Divulgare: folosesc linkuri afiliate pentru Elementor și LiveChat în acest articol. Site-ul unde am dezvoltat soluția este a Producător de cada cu hidromasaj din centrul Indianei.