WordPress: jQuery gebruiken om een ​​LiveChat-venster te openen door op een link of knop te klikken met Elementor

jQuery gebruiken om een ​​LiveChat-venster te openen door op een link of knop te klikken met Elementor

Een van onze klanten heeft Elementor, een van de meest robuuste platforms voor het bouwen van pagina's voor WordPress. We hebben ze de afgelopen maanden geholpen bij het opschonen van hun inkomende marketinginspanningen, het minimaliseren van de aanpassingen die ze hebben doorgevoerd en het beter laten communiceren van de systemen, ook met analyses.

De klant heeft Live chat, een fantastische chatservice met robuuste Google Analytics-integratie voor elke stap van het chatproces. LiveChat heeft een zeer goede API om het in uw site te integreren, inclusief de mogelijkheid om het chatvenster te openen met behulp van een onClick-gebeurtenis in een ankertag. Zo ziet dat eruit:

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

Dit is handig als u de kerncode kunt bewerken of aangepaste HTML kunt toevoegen. Met Elementor, het platform is echter om veiligheidsredenen vergrendeld, zodat u geen onClick evenement aan een willekeurig object. Als je die aangepaste onClick-gebeurtenis aan je code hebt toegevoegd, krijg je geen enkele fout... maar je zult zien dat de code uit de uitvoer wordt verwijderd.

Een jQuery-luisteraar gebruiken

Een beperking van de onClick-methodologie is dat u elke afzonderlijke link op uw site moet bewerken en die code moet toevoegen. Een alternatieve methode is om een ​​script op de pagina op te nemen dat: luistert voor een specifieke klik op uw pagina en het voert de code voor u uit. Dit kan gedaan worden door te zoeken naar een anker-tag met een specifieke CSS-klasse. In dit geval wijzen we een ankertag aan met een klasse met de naam open chat.

In de voettekst van de site voeg ik gewoon een aangepast HTML-veld toe met het benodigde script:

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

Nu, dat script is de hele site, dus ongeacht de pagina, als ik een klasse van heb open chat waarop is geklikt, wordt het chatvenster geopend. Voor het Elementor-object stellen we de link in op # en de klasse als open chat.

elementor-link

elementor geavanceerde instellingen klassen

Natuurlijk kan code worden verbeterd of kan ook worden gebruikt voor elk ander type evenement, zoals een Google Analytics-evenement. Natuurlijk heeft LiveChat een uitstekende integratie met Google Analytics die deze gebeurtenissen toevoegt, maar ik neem het hieronder op als voorbeeld:

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

Een site bouwen met Elementor is vrij eenvoudig en ik raad het platform ten zeerste aan. Er is een geweldige community, heel veel bronnen en een flink aantal Elementor-add-ons die de mogelijkheden verbeteren.

Aan de slag met Elementor Aan de slag met LiveChat

Openbaarmaking: ik gebruik affiliate links voor Elementor en Live chat in dit artikel. De site waar we de oplossing hebben ontwikkeld, is een Hot Tub-fabrikant in het centrum van Indiana.