WordPress: Upotreba jQueryja za otvaranje prozora LiveChat-a klikom na vezu ili dugme koristeći Elementor

Korišćenje jQueryja za otvaranje prozora LiveChat-a klikom na vezu ili dugme koristeći Elementor

Jedan od naših klijenata ima Elementor, jedna od najrobusnijih platformi za pravljenje stranica za WordPress. Pomagali smo im da očiste svoje ulazne marketinške napore u posljednjih nekoliko mjeseci, minimizirajući prilagođavanja koja su implementirali i omogućili bolju komunikaciju sistema – uključujući i analitiku.

Kupac ima LiveChat, fantastičan chat servis koji ima robusnu integraciju Google Analytics za svaki korak procesa ćaskanja. LiveChat ima vrlo dobar API za njegovu integraciju u vašu web lokaciju, uključujući mogućnost otvaranja prozora za ćaskanje koristeći onClick događaj 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. With Elementor, međutim, platforma je zaključana iz sigurnosnih razloga tako da ne možete dodati onClick događaj na bilo koji objekat. Ako imate taj prilagođeni događaj onClick dodan u vaš kod, nećete dobiti nikakvu vrstu greške… ali ćete vidjeti da je kod uklonjen iz izlaza.

Korištenje jQuery slušaoca

Jedno ograničenje onClick metodologije je da biste morali urediti svaki pojedinačni link 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 sa određenim CSS klasa. U ovom slučaju, označavamo sidrenu oznaku s klasom imenovanom openchat.

U podnožju stranice samo dodajem prilagođeno HTML polje sa 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 čitava web stranica, tako da bez obzira na stranicu, ako imam klasu openchat na koje se klikne, otvoriće se prozor za ćaskanje. Za objekat Elementor, samo smo postavili vezu na # i klasu kao openchat.

elementor link

elementor 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 sa Google Analytics koja dodaje ove događaje, ali ja to uključujem 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 sajta pomoću Elementora 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 sa LiveChat-om

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