WordPress: utilizzo di jQuery per aprire una finestra di LiveChat facendo clic su un collegamento o un pulsante utilizzando Elementor

Utilizzo di jQuery per aprire una finestra di LiveChat facendo clic su un collegamento o un pulsante utilizzando Elementor

Uno dei nostri clienti ha Elementor, una delle piattaforme di creazione di pagine più robuste per WordPress. Li abbiamo aiutati a ripulire i loro sforzi di marketing inbound negli ultimi mesi, riducendo al minimo le personalizzazioni che hanno implementato e migliorando la comunicazione dei sistemi, anche con l'analisi.

Il cliente ha Chat dal vivo, un fantastico servizio di chat che ha una solida integrazione con Google Analytics per ogni fase del processo di chat. LiveChat ha un'ottima API per integrarla nel tuo sito, inclusa la possibilità di aprire la finestra della chat usando un evento onClick in un tag di ancoraggio. Ecco come appare:

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

Questo è utile se hai la possibilità di modificare il codice principale o aggiungere HTML personalizzato. Insieme a Elementor, tuttavia, la piattaforma è bloccata per motivi di sicurezza in modo che non sia possibile aggiungere un evento onClick a qualsiasi oggetto. Se hai aggiunto quell'evento personalizzato onClick al tuo codice, non riceverai alcun tipo di errore... ma vedrai il codice rimosso dall'output.

Utilizzo di un listener jQuery

Una limitazione della metodologia onClick è che dovresti modificare ogni singolo link sul tuo sito e aggiungere quel codice. Una metodologia alternativa consiste nell'includere uno script nella pagina che ascolta per un clic specifico sulla tua pagina ed esegue il codice per te. Questo può essere fatto cercando qualsiasi tag di ancoraggio con uno specifico Classe CSS. In questo caso, stiamo designando un tag di ancoraggio con una classe denominata apri chat.

All'interno del footer del sito, aggiungo semplicemente un campo HTML personalizzato con lo script necessario:

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

Ora, quello script è a livello di sito, quindi indipendentemente dalla pagina, se ho una classe di apri chat cliccato, si aprirà la finestra della chat. Per l'oggetto Elementor, impostiamo semplicemente il collegamento su # e la classe come apri chat.

collegamento elemento

classi di impostazioni avanzate degli elementi

Naturalmente, il codice può essere migliorato o utilizzato anche per qualsiasi altro tipo di evento, come a Evento di Google Analytics. Ovviamente, LiveChat ha un'eccezionale integrazione con Google Analytics che aggiunge questi eventi, ma lo includo di seguito solo come esempio:

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

Costruire un sito con Elementor è abbastanza semplice e consiglio vivamente la piattaforma. C'è una grande comunità, tonnellate di risorse e alcuni componenti aggiuntivi di Elementor che migliorano le capacità.

Inizia con Elementor Inizia con LiveChat

Divulgazione: utilizzo link di affiliazione per Elementor e Chat dal vivo in questo articolo. Il sito dove abbiamo sviluppato la soluzione è a Produttore di vasche idromassaggio nell'Indiana centrale.