WordPress: JQuery brûke om in LiveChat-finster te iepenjen troch op in keppeling of knop te klikken mei Elementor

JQuery brûke om in LiveChat-finster te iepenjen troch op in keppeling of knop te klikken mei Elementor

Ien fan ús kliïnten hat Elementor, ien fan 'e meast robúste sidebouplatfoarms foar WordPress. Wy hawwe har holpen har ynbound marketing-ynspanningen de lêste moannen op te romjen, de oanpassingen te minimalisearjen dy't se ymplementearre hawwe, en de systemen better kommunisearjen krije - ynklusyf mei analytics.

De klant hat LiveChat, in fantastyske peteartsjinst dy't robúste Google Analytics-yntegraasje hat foar elke stap fan it petearproses. LiveChat hat in heul goede API foar it yntegrearjen yn jo side, ynklusyf it hawwen fan de mooglikheid om it petearfinster te iepenjen mei in onClick-evenemint yn in ankertag. Hjir is hoe't dat derút sjocht:

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

Dit is handich as jo de mooglikheid hawwe om kearnkoade te bewurkjen of oanpaste HTML ta te foegjen. Mei Elementor, lykwols, it platfoarm is beskoattele om feiligens redenen, sadat jo net tafoegje in onClick evenemint oan elk objekt. As jo ​​dat oanpaste onClick-evenemint hawwe tafoege oan jo koade, krije jo gjin type flater ... mar jo sille sjen dat de koade fan 'e útfier is stript.

Mei help fan in jQuery Listener

Ien beheining fan 'e onClick-metodology is dat jo elke keppeling op jo side moatte bewurkje en dy koade tafoegje. In alternative metodyk is om in skript op te nimmen yn 'e side dat harket foar in spesifike klik op jo side en it útfiert de koade foar jo. Dit kin dien wurde troch te sykjen nei eltse anker tag mei in spesifyk CSS klasse. Yn dit gefal, wy oanwize in anker tag mei in klasse neamd iepenchat.

Binnen de foettekst fan 'e side foegje ik gewoan in oanpast HTML-fjild ta mei it nedige skript:

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

No, dat skript is side breed dus nettsjinsteande de side, as ik in klasse fan haw iepenchat dat is oanklikt, it sil it petearfinster iepenje. Foar it Elementor-objekt sette wy de keppeling gewoan op # en de klasse as iepenchat.

elementor keppeling

elementor avansearre ynstellingsklassen

Fansels kin koade wurde ferbettere of kin ek brûkt wurde foar in oar type evenemint, lykas in Google Analytics -evenemint. Fansels hat LiveChat in treflike yntegraasje mei Google Analytics dy't dizze eveneminten tafoeget, mar ik nim it hjirûnder allinich op as foarbyld:

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

It bouwen fan in side mei Elementor is frij ienfâldich en ik advisearje it platfoarm tige oan. D'r is in geweldige mienskip, tonnen boarnen, en nochal wat Elementor-tafoegings dy't de mooglikheden ferbetterje.

Begjin mei Elementor Te begjinnen mei LiveChat

Bekendmakking: ik brûk oansletten keppelings foar Elementor en LiveChat yn dit artikel. De side dêr't wy ûntwikkele de oplossing is in Hot Tub fabrikant yn sintraal Indiana.