WordPress: Malfermu LiveChat-Fenestron Klakante Ligon aŭ Butonon Uzante Elementor
Unu el niaj klientoj havas Elektorino, unu el la plej fortikaj paĝkonstruaj platformoj por WordPress. Ni helpis ilin purigi siajn enirmerkatajn klopodojn dum la lastaj monatoj, minimumigante la personigojn, kiujn ili efektivigis, kaj plibonigante la sistemojn komuniki - inkluzive per analizoj.
La kliento havas livechat, mirinda babileja servo, kiu havas fortikan integriĝon de Google Analytics por ĉiu paŝo de la babilprocezo. LiveChat havas tre bonan API por integri ĝin en vian retejon, inkluzive de havi la kapablon malfermi la babilejon per onClick-okazaĵo en ankra etikedo. Jen kiel tio aspektas:
<a href="#" onclick="parent.LC_API.open_chat_window();return false;">Chat Now!</a>
Ĉi tio estas oportuna se vi havas la kapablon redakti kernkodon aŭ aldoni kutiman HTML. Kun Elektorino, tamen, la platformo estas ŝlosita pro sekurecaj kialoj, por ke vi ne povas aldoni onClick evento al iu ajn objekto. Se vi havas tiun kutiman onClick-okazaĵon aldonita al via kodo, vi ne ricevas ajnan tipon de eraro... sed vi vidos la kodon nudigita de la eligo.
Uzante jQuery Aŭskultanto
Unu limigo de la metodologio onClick estas, ke vi devus redakti ĉiun ligon en via retejo kaj aldoni tiun kodon. Alternativa metodaro estas inkluzivi skripton en la paĝo kiu aŭskultas por specifa klako sur via paĝo kaj ĝi efektivigas la kodon por vi. Ĉi tio povas esti farita serĉante iun ajn ankro-etikedo kun specifa CSS klaso. En ĉi tiu kazo, ni nomumas ankro-etikedon kun klaso nomita openchat
.
Ene de la piedlinio de la retejo, mi aldonis ĉi tiun kutiman HTML kun la necesa skripto:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('.openchat a').click(function(){
parent.LC_API.open_chat_window();return false;
});
});
</script>
Uzante JavaScript Aŭskultanto
Alternative, jen la kodo uzante JavaScript:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var openchatElements = document.querySelectorAll('.openchat');
openchatElements.forEach(function(element) {
element.addEventListener('click', function() {
if (parent.LC_API && parent.LC_API.open_chat_window) {
parent.LC_API.open_chat_window();
}
return false;
});
});
});
</script>
Nun, tiu skripto estas tutrete do sendepende de la paĝo, se mi havas klason de
malferma babilado tio estas klakita, ĝi malfermos la babilejon. Por la Elementor-objekto, ni simple starigis la ligilon al # kaj la klason kiel malferma babilado.Kompreneble, kodo povas esti plibonigita aŭ uzata por ajna alia tipo de evento, kiel a Evento de Google Analytics. Kompreneble, LiveChat havas elstaran integriĝon kun Google Analytics, kiu aldonas ĉi tiujn eventojn, sed mi inkluzivas ĝin sube nur kiel ekzemplon:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('.openchat a').click(function(){
parent.LC_API.open_chat_window();return false;
gtag('event', 'open_chat_window', {
'event_category': 'Chat Interaction',
'event_label': 'Live Chat Opened'
});
});
});
</script>
Konstrui retejon kun Elementor estas simpla, kaj mi tre rekomendas la platformon. Estas bonega komunumo, tunoj da rimedoj, kaj sufiĉe multaj Elementor-Aldonaĵoj, kiuj plibonigas la kapablojn.