WordPress: utilitzant jQuery per obrir una finestra de xat en directe fent clic a un enllaç o un botó amb Elementor

Utilitzant jQuery per obrir una finestra de xat en directe fent clic a un enllaç o botó amb Elementor

Un dels nostres clients en té Elementor, una de les plataformes de creació de pàgines més robustes per a WordPress. Els hem estat ajudant a netejar els seus esforços de màrqueting entrant durant els darrers mesos, minimitzant les personalitzacions que van implementar i aconseguir que els sistemes es comuniquin millor, inclòs amb l'anàlisi.

El client té Xat en directe, un fantàstic servei de xat que té una integració robusta de Google Analytics per a cada pas del procés de xat. LiveChat té una API molt bona per integrar-la al vostre lloc, inclosa la possibilitat d'obrir la finestra de xat mitjançant un esdeveniment onClick en una etiqueta d'ancoratge. Així és com es veu:

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

Això és útil si teniu la possibilitat d'editar el codi bàsic o afegir HTML personalitzat. Amb Elementor, però, la plataforma està bloquejada per motius de seguretat, de manera que no podeu afegir un Esdeveniment onClick a qualsevol objecte. Si teniu aquest esdeveniment onClick personalitzat afegit al vostre codi, no rebeu cap tipus d'error... però veureu el codi eliminat de la sortida.

Ús d'un escolta jQuery

Una limitació de la metodologia onClick és que hauríeu d'editar tots els enllaços del vostre lloc i afegir aquest codi. Una metodologia alternativa és incloure un script a la pàgina que escolta per fer un clic específic a la vostra pàgina i executa el codi per vosaltres. Això es pot fer buscant qualsevol etiqueta d'ancoratge amb un específic Classe CSS. En aquest cas, estem designant una etiqueta d'ancoratge amb una classe anomenada xat obert.

Dins del peu de pàgina del lloc, només afegeixo un camp HTML personalitzat amb l'script necessari:

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

Ara, aquest script és a tot el lloc, així que independentment de la pàgina, si tinc una classe de xat obert si feu clic, obrirà la finestra de xat. Per a l'objecte Elementor, només posem l'enllaç a # i la classe com a xat obert.

enllaç elementor

Elementor classes de configuració avançada

Per descomptat, el codi es pot millorar o també es pot utilitzar per a qualsevol altre tipus d'esdeveniment, com ara a Esdeveniment de Google Analytics. Per descomptat, LiveChat té una integració excepcional amb Google Analytics que afegeix aquests esdeveniments, però l'incloc a continuació com a exemple:

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

Crear un lloc amb Elementor és bastant senzill i recomano molt la plataforma. Hi ha una gran comunitat, tones de recursos i uns quants complements Elementor que milloren les capacitats.

Comenceu amb Elementor Comenceu amb LiveChat

Divulgació: faig servir enllaços d'afiliació per a Elementor Xat en directe en aquest article. El lloc on hem desenvolupat la solució és a Fabricant de jacuzzi al centre d'Indiana.