WordPress: Upotreba jQueryja za otvaranje prozora LiveChata klikom na vezu ili gumb pomoću Elementora

Korištenje jQueryja za otvaranje prozora LiveChata klikom na vezu ili gumb pomoću Elementora

Jedan od naših klijenata ima Elementor, jedna od najrobusnijih platformi za izradu stranica za WordPress. Pomagali smo im očistiti svoje ulazne marketinške napore tijekom posljednjih nekoliko mjeseci, minimizirajući prilagodbe koje su implementirali i omogućili bolju komunikaciju sustava – uključujući i analitiku.

Kupac ima LiveChat, fantastična usluga za chat koja ima robusnu integraciju Google Analyticsa za svaki korak procesa chata. LiveChat ima vrlo dobar API za njegovu integraciju u vašu web-lokaciju, uključujući mogućnost otvaranja prozora za razgovor pomoću događaja onClick u sidrenoj oznaci. Evo kako to izgleda:

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

Ovo je zgodno ako imate mogućnost uređivanja osnovnog koda ili dodavanja prilagođenog HTML-a. S Elementor, međutim, platforma je zaključana iz sigurnosnih razloga tako da ne možete dodati događaj onClick na bilo koji predmet. Ako imate taj prilagođeni događaj onClick dodan svom kodu, nećete dobiti nikakvu vrstu pogreške... ali vidjet ćete da je kod uklonjen iz izlaza.

Korištenje jQuery slušatelja

Jedno ograničenje onClick metodologije je da biste morali urediti svaku vezu na svojoj web-lokaciji i dodati taj kod. Alternativna metodologija je uključivanje skripte na stranicu koja sluša za određeni klik na vašu stranicu i ona izvršava kod umjesto vas. To se može učiniti traženjem bilo kojeg sidrena oznaka s određenim CSS klasa. U ovom slučaju, označavamo sidrišnu oznaku s klasom imenovanom openchat.

U podnožju stranice samo dodajem prilagođeno HTML polje s potrebnom skriptom:

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

Sada, ta skripta je na cijeloj web stranici, pa bez obzira na stranicu, ako imam klasu openchat na koji se klikne, otvorit će se prozor za razgovor. Za objekt Elementor samo smo postavili vezu na # i klasu kao openchat.

elementor link

element ili klase naprednih postavki

Naravno, kod se može poboljšati ili se može koristiti za bilo koju drugu vrstu događaja, kao što je a Događaj Google Analytics. Naravno, LiveChat ima izvanrednu integraciju s Google Analyticsom koja dodaje ove događaje, ali uključujem ga u nastavku samo kao primjer:

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

Izrada stranice s Elementorom je prilično jednostavna i toplo preporučujem platformu. Postoji sjajna zajednica, mnoštvo resursa i dosta Elementor dodataka koji poboljšavaju mogućnosti.

Započnite s Elementorom Započnite s LiveChatom

Otkrivanje podataka: Koristim povezane veze za Elementor i LiveChat u ovom članku. Stranica na kojoj smo razvili rješenje je a Proizvođač vrućih kadica u središnjoj Indiani.