WordPress: Använda jQuery för att öppna ett LiveChat-fönster genom att klicka på en länk eller knapp med hjälp av Elementor

Använda jQuery för att öppna ett LiveChat-fönster genom att klicka på en länk eller knapp med hjälp av Elementor

En av våra kunder har Elementor, en av de mest robusta sidbyggnadsplattformarna för WordPress. Vi har hjälpt dem att rensa upp sina inkommande marknadsföringsinsatser under de senaste månaderna, minimera de anpassningar de implementerat och få systemen att kommunicera bättre – inklusive med analyser.

Kunden har Livechat, en fantastisk chatttjänst som har robust Google Analytics-integrering för varje steg i chattprocessen. LiveChat har ett mycket bra API för att integrera det på din webbplats, inklusive möjligheten att öppna chattfönstret med en onClick-händelse i en ankartagg. Så här ser det ut:

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

Detta är praktiskt om du har möjlighet att redigera kärnkod eller lägga till anpassad HTML. Med Elementorplattformen är dock låst av säkerhetsskäl så att du inte kan lägga till en onClick-händelse till något föremål. Om du har den anpassade onClick-händelsen tillagd till din kod, får du ingen typ av fel... men du kommer att se att koden tas bort från utgången.

Använda en jQuery Listener

En begränsning av onClick-metoden är att du måste redigera varje enskild länk på din webbplats och lägga till den koden. En alternativ metod är att inkludera ett skript på sidan som lyssnar för ett specifikt klick på din sida och den kör koden åt dig. Detta kan göras genom att leta efter någon ankare med en specifik CSS klass. I det här fallet utser vi en ankartagg med en klass som heter openchat.

I sidfoten på webbplatsen lägger jag bara till ett anpassat HTML-fält med det nödvändiga skriptet:

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

Nu är det skriptet hela webbplatsen så oavsett sida, om jag har en klass av openchat när du klickar, öppnar det chattfönstret. För Elementor-objektet ställer vi bara in länken till # och klassen som openchat.

elementor länk

elementor avancerade inställningar klasser

Naturligtvis kan koden förbättras eller kan användas för alla andra typer av evenemang, som en Google Analytics -evenemang. Naturligtvis har LiveChat en enastående integration med Google Analytics som lägger till dessa händelser, men jag tar med det nedan bara som ett exempel:

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

Att bygga en webbplats med Elementor är ganska enkelt och jag rekommenderar starkt plattformen. Det finns en fantastisk gemenskap, massor av resurser och en hel del Elementor-tillägg som förbättrar kapaciteten.

Kom igång med Elementor Kom igång med LiveChat

Upplysning: Jag använder affiliate-länkar för Elementor och Livechat i den här artikeln. Webbplatsen där vi utvecklade lösningen är en Tillverkare av badtunnor i centrala Indiana.