WordPress: jQuery kasutamine LiveChati akna avamiseks, klõpsates Elementori abil lingil või nupul

jQuery kasutamine LiveChati akna avamiseks, klõpsates Elementori abil lingil või nupul

Ühel meie klientidest on Elementor, mis on WordPressi üks tugevamaid lehtede koostamise platvorme. Oleme aidanud neil viimaste kuude jooksul oma sissetulevat turundust puhastada, minimeerida nende rakendatud kohandusi ja parandada süsteemide suhtlemist – sealhulgas analüütikaga.

Kliendil on LiveChat, fantastiline vestlusteenus, mis sisaldab tugevat Google Analyticsi integratsiooni vestlusprotsessi igas etapis. LiveChatil on selle saidile integreerimiseks väga hea API, sealhulgas võimalus avada vestlusaken, kasutades ankrusildis olevat onClicki sündmust. See näeb välja järgmiselt:

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

See on mugav, kui teil on võimalus põhikoodi redigeerida või kohandatud HTML-i lisada. Koos Elementor, kuid platvorm on turvakaalutlustel lukustatud, nii et te ei saa lisada onClick sündmus mis tahes objektile. Kui olete oma koodile selle kohandatud sündmuse onClick lisanud, ei kuvata te mingit tüüpi tõrkeid, kuid näete, et kood eemaldatakse väljundist.

jQuery kuulaja kasutamine

Üks onClicki metoodika piirang on see, et peate muutma oma saidil iga linki ja lisama selle koodi. Alternatiivne metoodika on lisada lehele skript, mis kuulab konkreetse klõpsu jaoks teie lehel ja see käivitab koodi teie eest. Seda saab teha mis tahes otsides ankru silt konkreetsega CSS klass. Sel juhul määrame ankrumärgise klassi nimega avatud vestlus.

Saidi jaluses lisan lihtsalt kohandatud HTML-välja koos vajaliku skriptiga:

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

Nüüd on see skript kogu saidi ulatuses, nii et olenemata lehest, kui mul on klass avatud vestlus sellel klõpsamisel avaneb vestlusaken. Elementori objekti jaoks määrasime lingi väärtuseks # ja klassiks as avatud vestlus.

elementor link

elementor täpsemate seadete klassid

Muidugi saab koodi täiustada või kasutada ka mis tahes muud tüüpi sündmuste jaoks, näiteks a Google Analyticsi sündmus. Muidugi on LiveChatil suurepärane integratsioon Google Analyticsiga, mis lisab need sündmused, kuid lisan selle allpool lihtsalt näitena.

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

Elementoriga saidi loomine on üsna lihtne ja ma soovitan seda platvormi väga. Seal on suurepärane kogukond, palju ressursse ja üsna palju Elementori lisandmooduleid, mis täiustavad võimalusi.

Alustage Elementoriga Alustage LiveChatiga

Avalikustamine: ma kasutan domeeni jaoks sidusettevõtte linke Elementor ja LiveChat selles artiklis. Sait, kus me lahenduse välja töötasime, on a Mullivannide tootja Indiana keskosas.