WordPress: Hapni një dritare LiveChat duke klikuar një lidhje ose buton duke përdorur Elementor
Një nga klientët tanë ka Elementor, një nga platformat më të fuqishme të ndërtimit të faqeve për WordPress. Ne i kemi ndihmuar ata të pastrojnë përpjekjet e tyre të marketingut hyrës gjatë muajve të fundit, duke minimizuar personalizimet që kanë zbatuar dhe duke i bërë sistemet të komunikojnë më mirë – duke përfshirë analitikën.
Klienti ka LiveChat, një shërbim fantastik bisede që ka një integrim të fuqishëm të Google Analytics për çdo hap të procesit të bisedës. LiveChat ka një API shumë të mirë për ta integruar atë në faqen tuaj, duke përfshirë mundësinë për të hapur dritaren e bisedës duke përdorur një ngjarje onClick në një etiketë ankorimi. Ja si duket kjo:
<a href="#" onclick="parent.LC_API.open_chat_window();return false;">Chat Now!</a>
Kjo është e dobishme nëse keni aftësinë për të modifikuar kodin bazë ose të shtoni HTML të personalizuar. Me Elementor, megjithatë, platforma është e kyçur për arsye sigurie në mënyrë që të mos mund të shtoni një ngjarje onClick ndaj çdo objekti. Nëse keni atë ngjarje të personalizuar onClick të shtuar në kodin tuaj, nuk do të merrni asnjë lloj gabimi… por do të shihni kodin të hequr nga dalja.
Duke përdorur një dëgjues jQuery
Një kufizim i metodologjisë onClick është se do t'ju duhet të redaktoni çdo lidhje të vetme në faqen tuaj dhe të shtoni atë kod. Një metodologji alternative është përfshirja e një skripti në faqen që dëgjon për një klikim specifik në faqen tuaj dhe ai ekzekuton kodin për ju. Kjo mund të bëhet duke kërkuar ndonjë tag spirancë me një specifike Klasa CSS. Në këtë rast, ne po caktojmë një etiketë ankorimi me një klasë të quajtur openchat
.
Brenda fundit të faqes, shtova këtë HTML të personalizuar me skriptin e nevojshëm:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('.openchat a').click(function(){
parent.LC_API.open_chat_window();return false;
});
});
</script>
Duke përdorur një dëgjues JavaScript
Përndryshe, këtu është kodi duke përdorur 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>
Tani, ai skript është në të gjithë faqen, kështu që pavarësisht nga faqja, nëse kam një klasë të
openchat që është klikuar, do të hapet dritarja e bisedës. Për objektin Elementor, ne thjesht vendosëm lidhjen në # dhe klasën si openchat.Sigurisht, kodi mund të përmirësohet ose përdoret për çdo lloj ngjarjeje tjetër, si p.sh Ngjarja e Google Analytics. Sigurisht, LiveChat ka një integrim të jashtëzakonshëm me Google Analytics që shton këto ngjarje, por unë po e përfshij atë më poshtë vetëm si shembull:
<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>
Ndërtimi i një siti me Elementor është i thjeshtë, dhe unë rekomandoj shumë platformën. Ka një komunitet të shkëlqyeshëm, shumë burime dhe mjaft shtesa Elementor që rrisin aftësitë.