WordPress: Utilizendu jQuery per apre una finestra di LiveChat Cliccà un ligame o buttone cù Elementor

Utilizendu jQuery per apre una Finestra LiveChat Cliccà un Link o Button Utilizendu Elementor

Unu di i nostri clienti hà Elementor, una di e piattaforme di creazione di pagine più robuste per WordPress. L'avemu aiutatu à pulisce i so sforzi di marketing in entrata in l'ultimi mesi, minimizendu e persunalizazione chì anu implementatu, è ottenendu chì i sistemi cumunicanu megliu - ancu cù l'analitiche.

U cliente hà LiveChat, un serviziu di chat fantasticu chì hà una robusta integrazione di Google Analytics per ogni passu di u prucessu di chat. LiveChat hà una API assai bona per integrà in u vostru situ, cumprese a capacità di apre a finestra di chat cù un avvenimentu onClick in una tag di ancora. Eccu cumu si vede:

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

Questu hè utile si avete a capacità di edità u codice core o aghjunghje HTML persunalizatu. Cù Elementor, però, a piattaforma hè chjusa per ragioni di sicurezza in modu chì ùn pudete micca aghjunghje un avvenimentu onClick à ogni ughjettu. Sì avete quellu avvenimentu onClick persunalizatu aghjuntu à u vostru codice, ùn avete micca alcun tipu d'errore ... ma vi vede u codice sguassatu da a pruduzzioni.

Utilizà un listener jQuery

Una limitazione di a metodulugia onClick hè chì avete da edità ogni ligame in u vostru situ è ​​aghjunghje quellu codice. Una metodulugia alternativa hè di include un script in a pagina chì ascolta per un clicu specificu nantu à a vostra pagina è eseguisce u codice per voi. Questu pò esse fattu per circà qualsiasi tag anchor cù un specificu Classe CSS. In questu casu, avemu designatu un tag d'ancora cù una classa chjamata openchat.

In u footer di u situ, aghju solu aghjunghje un campu HTML persunalizatu cù u script necessariu:

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

Avà, quellu script hè largu di u situ, cusì indipendentemente da a pagina, se aghju una classa di openchat chì hè clicatu, apre a finestra di chat. Per l'ughjettu Elementor, avemu solu stabilitu u ligame à # è a classa cum'è openchat.

ligame elementor

Elementor classi di paràmetri avanzati

Di sicuru, u codice pò esse rinfurzatu o pò esse usatu per qualsiasi altru tipu d'avvenimentu, cum'è a Avvenimentu Google Analytics. Di sicuru, LiveChat hà una integrazione eccezziunale cù Google Analytics chì aghjunghje questi avvenimenti, ma l'aghju inclusu quì sottu cum'è un esempiu:

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

Custruì un situ cù Elementor hè abbastanza simplice è ricumandemu assai a piattaforma. Ci hè una grande cumunità, tunnellate di risorse, è un pocu Elementor Add-Ons chì aumentanu e capacità.

Cumincià cù Elementor Cumincià cù LiveChat

Disclosure: Usu ligami affiliati per Elementor e LiveChat in stu articulu. U situ induve avemu sviluppatu a suluzione hè a Produttore di Hot Tub in u centru di l'Indiana.