WordPress: Brug af jQuery til at åbne et LiveChat-vindue ved at klikke på et link eller en knap ved hjælp af Elementor

Brug af jQuery til at åbne et LiveChat-vindue ved at klikke på et link eller en knap ved hjælp af Elementor

En af vores kunder har Elementor, en af ​​de mest robuste sidebygningsplatforme til WordPress. Vi har hjulpet dem med at rydde op i deres inbound marketing-indsats i løbet af de sidste par måneder, minimere de tilpasninger, de implementerede, og få systemerne til at kommunikere bedre – også med analyser.

Kunden har LiveChat, en fantastisk chattjeneste, der har robust Google Analytics-integration til hvert trin i chatprocessen. LiveChat har en meget god API til at integrere den på dit websted, herunder muligheden for at åbne chatvinduet ved hjælp af en onClick-begivenhed i et ankertag. Sådan ser det ud:

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

Dette er praktisk, hvis du har mulighed for at redigere kernekode eller tilføje tilpasset HTML. Med Elementor, dog er platformen låst af sikkerhedsmæssige årsager, så du ikke kan tilføje en onClick begivenhed til enhver genstand. Hvis du har tilføjet den tilpassede onClick-hændelse til din kode, får du ikke nogen form for fejl ... men du vil se koden fjernet fra outputtet.

Brug af en jQuery Listener

En begrænsning ved onClick-metoden er, at du bliver nødt til at redigere hvert enkelt link på dit websted og tilføje den kode. En alternativ metode er at inkludere et script på siden, der lytter for et specifikt klik på din side, og det udfører koden for dig. Dette kan gøres ved at lede efter evt ankermærke med en specifik CSS klasse. I dette tilfælde designer vi et ankermærke med en klasse med navnet openchat.

I sidefoden tilføjer jeg bare et brugerdefineret HTML-felt med det nødvendige script:

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

Nu, det script er hele webstedet, så uanset siden, hvis jeg har en klasse af openchat der er klikket, vil det åbne chatvinduet. For Elementor-objektet sætter vi bare linket til # og klassen som openchat.

elementor link

elementor avancerede indstillinger klasser

Selvfølgelig kan kode forbedres eller kan også bruges til enhver anden type begivenhed, som f Google Analytics -begivenhed. Naturligvis har LiveChat en enestående integration med Google Analytics, der tilføjer disse begivenheder, men jeg inkluderer det nedenfor 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>

Det er ret simpelt at bygge et websted med Elementor, og jeg anbefaler stærkt platformen. Der er et fantastisk fællesskab, tonsvis af ressourcer og en hel del Elementor-tilføjelser, der forbedrer mulighederne.

Kom godt i gang med Elementor Kom godt i gang med LiveChat

Offentliggørelse: Jeg bruger tilknyttede links til Elementor og LiveChat i denne artikel. Siden hvor vi udviklede løsningen er en Hot Tub-producent i det centrale Indiana.