WordPress: Uporaba jQuery za odpiranje okna LiveChat s klikom na povezavo ali gumb z uporabo Elementorja

Uporaba jQuery za odpiranje okna LiveChat s klikom na povezavo ali gumb z uporabo Elementorja

Ena od naših strank ima Elementor, ena najbolj robustnih platform za gradnjo strani za WordPress. Pomagali smo jim očistiti svoja prizadevanja za vhodno trženje v zadnjih nekaj mesecih, zmanjšati prilagoditve, ki so jih implementirali, in izboljšati komunikacijo sistemov – vključno z analitiko.

Stranka ima Live Chat, fantastična storitev za klepet, ki ima robustno integracijo Google Analytics za vsak korak procesa klepeta. LiveChat ima zelo dober API za integracijo v vaše spletno mesto, vključno z možnostjo odpiranja okna za klepet z uporabo dogodka onClick v sidrni oznaki. Evo, kako to izgleda:

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

To je priročno, če imate možnost urejanja osnovne kode ali dodajanja HTML-ja po meri. Z Elementor, vendar je platforma zaklenjena iz varnostnih razlogov, tako da ne morete dodati datoteke dogodek onClick na kateri koli predmet. Če imate ta dogodek onClick po meri dodan vaši kodi, ne dobite nobene vrste napake ... vendar boste videli, da je koda odstranjena iz izhoda.

Uporaba poslušalnika jQuery

Ena od omejitev metodologije onClick je, da bi morali urediti vsako posamezno povezavo na svojem spletnem mestu in dodati to kodo. Alternativna metodologija je vključiti skript na stran, ki posluša za določen klik na vašo stran in izvede kodo namesto vas. To lahko storite tako, da poiščete katero koli sidrna oznaka z določeno razred CSS. V tem primeru označimo sidrno oznako z imenovanim razredom odprti klepet.

V nogo spletnega mesta samo dodam polje HTML po meri s potrebnim skriptom:

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

Zdaj je ta skript na celotnem spletnem mestu, tako da ne glede na stran, če imam razred odprti klepet ki ga kliknete, se odpre okno za klepet. Za objekt Elementor samo nastavimo povezavo na # in razred kot odprti klepet.

element ali povezava

element ali razrede naprednih nastavitev

Seveda je kodo mogoče izboljšati ali jo uporabiti tudi za katero koli drugo vrsto dogodka, kot je a Dogodek Google Analytics. Seveda ima LiveChat izjemno integracijo s storitvijo Google Analytics, ki dodaja te dogodke, vendar sem jo vključil spodaj samo kot primer:

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

Izdelava spletnega mesta z Elementorjem je precej preprosta in platformo toplo priporočam. Obstaja odlična skupnost, ogromno virov in kar nekaj dodatkov Elementor, ki izboljšujejo zmogljivosti.

Začnite z Elementorjem Začnite uporabljati LiveChat

Razkritje: za. Uporabljam partnerske povezave Elementor in Live Chat v tem članku. Spletno mesto, kjer smo razvili rešitev, je a Proizvajalec vročih kadi v osrednji Indiani.