WordPress: Verwenden von jQuery zum Öffnen eines LiveChat-Fensters durch Klicken auf einen Link oder eine Schaltfläche mit Elementor

Verwenden von jQuery zum Öffnen eines LiveChat-Fensters durch Klicken auf einen Link oder eine Schaltfläche mit Elementor

Einer unserer Kunden hat Elementor, eine der robustesten Seitenerstellungsplattformen für WordPress. Wir haben ihnen in den letzten Monaten geholfen, ihre Inbound-Marketing-Bemühungen zu bereinigen, die von ihnen implementierten Anpassungen zu minimieren und die Kommunikation der Systeme zu verbessern – auch mit Analysen.

Der Kunde hat Live-Chat, ein fantastischer Chat-Dienst, der über eine robuste Google Analytics-Integration für jeden Schritt des Chat-Prozesses verfügt. LiveChat verfügt über eine sehr gute API zur Integration in Ihre Website, einschließlich der Möglichkeit, das Chatfenster mithilfe eines onClick-Ereignisses in einem Anker-Tag zu öffnen. So sieht das aus:

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

Dies ist praktisch, wenn Sie den Kerncode bearbeiten oder benutzerdefiniertes HTML hinzufügen können. Mit Elementor, die Plattform ist jedoch aus Sicherheitsgründen gesperrt, sodass Sie keine hinzufügen können onClick-Ereignis zu jedem Objekt. Wenn Sie dieses benutzerdefinierte onClick-Ereignis zu Ihrem Code hinzugefügt haben, erhalten Sie keinerlei Fehler … aber Sie sehen, dass der Code aus der Ausgabe entfernt wird.

Verwenden eines jQuery-Listeners

Eine Einschränkung der onClick-Methodik besteht darin, dass Sie jeden einzelnen Link auf Ihrer Website bearbeiten und diesen Code hinzufügen müssten. Eine alternative Methode besteht darin, ein Skript in die Seite einzufügen, das hört zu für einen bestimmten Klick auf Ihre Seite und führt den Code für Sie aus. Dies kann durch die Suche nach beliebigen erfolgen Ankertag mit einem bestimmten CSS-Klasse. In diesem Fall benennen wir ein Anker-Tag mit einer benannten Klasse Chat öffnen.

In der Fußzeile der Website füge ich einfach ein benutzerdefiniertes HTML-Feld mit dem erforderlichen Skript hinzu:

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

Nun, dieses Skript ist seitenweit, also unabhängig von der Seite, wenn ich eine Klasse von habe Chat öffnen darauf geklickt wird, öffnet sich das Chatfenster. Für das Elementor-Objekt setzen wir einfach den Link auf # und die Klasse als Chat öffnen.

Element oder Link

elementor erweiterte Einstellungsklassen

Natürlich kann der Code erweitert oder auch für jede andere Art von Ereignis verwendet werden, z Google Analytics-Ereignis. Natürlich hat LiveChat eine hervorragende Integration mit Google Analytics, die diese Ereignisse hinzufügt, aber ich füge es unten nur als Beispiel hinzu:

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

Das Erstellen einer Website mit Elementor ist recht einfach und ich kann die Plattform nur wärmstens empfehlen. Es gibt eine großartige Community, jede Menge Ressourcen und einige Elementor-Add-Ons, die die Fähigkeiten erweitern.

Beginnen Sie mit Elementor Beginnen Sie mit LiveChat

Offenlegung: Ich verwende Affiliate-Links für Elementor und Live-Chat In diesem Artikel. Der Standort, an dem wir die Lösung entwickelt haben, ist a Hersteller von Whirlpools in Zentral-Indiana.