WordPress: Gebruik jQuery om 'n LiveChat-venster oop te maak deur op 'n skakel of knoppie te klik met Elementor

Een van ons kliënte het Elementor, een van die mees robuuste bladsybouplatforms vir WordPress. Ons het hulle die afgelope paar maande gehelp om hul inkomende bemarkingspogings skoon te maak, die aanpassings wat hulle geïmplementeer het te minimaliseer en die stelsels beter te laat kommunikeer – insluitend met analise.

Die kliënt het Live Chat, 'n fantastiese kletsdiens wat robuuste Google Analytics-integrasie het vir elke stap van die kletsproses. LiveChat het 'n baie goeie API om dit in jou werf te integreer, insluitend die vermoë om die kletsvenster oop te maak met 'n onClick-gebeurtenis in 'n ankermerker. Hier is hoe dit lyk:

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

Dit is handig as jy die vermoë het om kernkode te wysig of persoonlike HTML by te voeg. Met ElementorDie platform is egter vir sekuriteitsredes gesluit sodat jy nie 'n onClick gebeurtenis na enige voorwerp. As jy daardie persoonlike onClick-gebeurtenis by jou kode gevoeg het, kry jy geen tipe fout nie ... maar jy sal sien dat die kode van die uitvoer gestroop word.

Gebruik 'n jQuery Luisteraar

Een beperking van die onClick-metodologie is dat jy elke enkele skakel op jou werf sal moet wysig en daardie kode moet byvoeg. 'n Alternatiewe metodologie is om 'n skrif in die bladsy in te sluit wat luister vir 'n spesifieke klik op jou bladsy en dit voer die kode vir jou uit. Dit kan gedoen word deur te soek na enige ankerplaatjie met 'n spesifieke CSS klas. In hierdie geval wys ons 'n ankermerker aan met 'n klas genaamd oopgesels.

Binne die voetskrif van die werf voeg ek net 'n pasgemaakte HTML-veld by met die nodige skrif:

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

Nou, daardie skrif is werfwyd, so ongeag die bladsy, as ek 'n klas van het oopgesels wat geklik is, sal die kletsvenster oopmaak. Vir die Elementor-objek stel ons net die skakel na # en die klas as oopgesels.

Natuurlik kan kode verbeter word of kan dit ook vir enige ander tipe gebeurtenis gebruik word, soos 'n Google Analytics -geleentheid. Natuurlik het LiveChat 'n uitstekende integrasie met Google Analytics wat hierdie gebeurtenisse byvoeg, maar ek sluit dit hieronder net as 'n voorbeeld in:

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

Die bou van 'n webwerf met Elementor is redelik eenvoudig en ek beveel die platform sterk aan. Daar is 'n wonderlike gemeenskap, tonne hulpbronne en 'n hele paar Elementor-byvoegings wat die vermoëns verbeter.

Begin met Elementor Kom aan die gang met LiveChat

Openbaarmaking: ek gebruik geaffilieerde skakels vir Elementor en Live Chat in hierdie artikel. Die webwerf waar ons die oplossing ontwikkel het, is a Warmbadvervaardiger in Sentraal-Indiana.