WordPress: Bruke jQuery for å åpne et LiveChat-vindu ved å klikke på en lenke eller knapp ved å bruke Elementor

Bruke jQuery for å åpne et LiveChat-vindu ved å klikke på en lenke eller knapp ved å bruke Elementor

En av våre kunder har Elementor, en av de mest robuste sidebyggingsplattformene for WordPress. Vi har hjulpet dem med å rydde opp i inngående markedsføringstiltak i løpet av de siste månedene, minimert tilpasningene de har implementert, og fått systemene til å kommunisere bedre – inkludert med analyser.

Kunden har Live chat, en fantastisk chattjeneste som har robust Google Analytics-integrasjon for hvert trinn i chatteprosessen. LiveChat har en veldig god API for å integrere den på nettstedet ditt, inkludert å ha muligheten til å åpne chatvinduet ved å bruke en onClick-hendelse i en ankertag. Slik ser det ut:

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

Dette er nyttig hvis du har muligheten til å redigere kjernekode eller legge til tilpasset HTML. Med Elementor, men plattformen er låst av sikkerhetsgrunner slik at du ikke kan legge til en onClick-hendelse til enhver gjenstand. Hvis du har den egendefinerte onClick-hendelsen lagt til koden din, får du ingen type feil ... men du vil se koden fjernet fra utdataene.

Bruke en jQuery Listener

En begrensning ved onClick-metoden er at du må redigere hver eneste lenke på nettstedet ditt og legge til den koden. En alternativ metodikk er å inkludere et skript på siden som lytter for et spesifikt klikk på siden din, og den kjører koden for deg. Dette kan gjøres ved å se etter evt ankermerke med en spesifikk CSS klasse. I dette tilfellet utpeker vi en ankermerke med en klasse kalt openchat.

I bunnteksten på nettstedet legger jeg bare til et tilpasset HTML-felt med det nødvendige skriptet:

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

Nå, det skriptet er hele nettstedet, så uavhengig av siden, hvis jeg har en klasse med openchat som er klikket, vil det åpne chattevinduet. For Elementor-objektet setter vi bare lenken til # og klassen som openchat.

elementor-lenke

elementor avanserte innstillinger klasser

Selvfølgelig kan koden forbedres eller kan brukes til alle andre typer arrangementer, som en Google Analytics -arrangement. LiveChat har selvfølgelig en enestående integrasjon med Google Analytics som legger til disse hendelsene, men jeg tar med det nedenfor bare som et eksempel:

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

Å bygge et nettsted med Elementor er ganske enkelt, og jeg anbefaler plattformen på det sterkeste. Det er et flott fellesskap, tonnevis av ressurser og ganske mange Elementor-tillegg som forbedrer mulighetene.

Kom i gang med Elementor Kom i gang med LiveChat

Offentliggjøring: Jeg bruker tilknyttede lenker for Elementor og Live chat i denne artikkelen. Siden der vi utviklet løsningen er en Boblebad-produsent i sentrale Indiana.