WordPress: Përdorimi i jQuery për të hapur një dritare LiveChat duke klikuar një lidhje ose buton duke përdorur Elementor

Përdorimi i jQuery për të hapur 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, unë thjesht shtoj një fushë të personalizuar HTML 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>

Tani, ai skript është i gjerë në faqe, 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.

elementor lidhje

elementor klasat e cilësimeve të avancuara

Sigurisht, kodi mund të përmirësohet ose mund të përdoret edhe 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', 'Click', { 'event_category': 'Chat', 'event_action':'Open','event_label':'LiveChat' });
  });
});
</script>

Ndërtimi i një siti me Elementor është mjaft i thjeshtë dhe unë rekomandoj shumë platformën. Ka një komunitet të shkëlqyeshëm, mijëra burime dhe mjaft shtesa Elementor që rrisin aftësitë.

Filloni me Elementor Filloni me LiveChat

Zbulimi: Po përdor lidhje filiali për Elementor LiveChat në këtë artikull. Faqja ku kemi zhvilluar zgjidhjen është a Prodhuesi i vaskave në qendër të Indianës.