WordPress: Paggamit ng jQuery Upang Magbukas ng LiveChat Window Sa pamamagitan ng Pag-click sa Link o Button Gamit ang Elementor

Gamit ang jQuery para magbukas ng LiveChat Window Sa pamamagitan ng Pag-click sa Link o Button Gamit ang Elementor

Isa sa aming mga kliyente ay mayroon Elementor, isa sa pinakamatatag na platform ng pagbuo ng page para sa WordPress. Tinutulungan namin silang linisin ang kanilang mga papasok na pagsusumikap sa marketing sa nakalipas na ilang buwan, pinapaliit ang mga pagpapasadyang ipinatupad nila, at ginagawang mas mahusay ang pakikipag-ugnayan ng mga system – kasama ang analytics.

Ang customer ay mayroon LiveChat, isang kamangha-manghang serbisyo sa chat na may matatag na pagsasama ng Google Analytics para sa bawat hakbang ng proseso ng chat. Ang LiveChat ay may napakahusay na API para sa pagsasama nito sa iyong site, kabilang ang pagkakaroon ng kakayahang buksan ang chat window gamit ang isang onClick na kaganapan sa isang tag ng anchor. Ganito ang hitsura nito:

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

Ito ay madaling gamitin kung mayroon kang kakayahang mag-edit ng core code o magdagdag ng custom na HTML. Sa Elementor, gayunpaman, ang platform ay naka-lock para sa mga kadahilanang pangseguridad upang hindi ka makapagdagdag ng isang onClick kaganapan sa anumang bagay. Kung mayroon kang custom na onClick event na idinagdag sa iyong code, hindi ka makakakuha ng anumang uri ng error... ngunit makikita mo ang code na natanggal mula sa output.

Gamit ang isang jQuery Listener

Ang isang limitasyon ng pamamaraan ng onClick ay kailangan mong i-edit ang bawat solong link sa iyong site at idagdag ang code na iyon. Ang isang alternatibong pamamaraan ay ang pagsasama ng isang script sa pahinang iyon nakikinig para sa isang partikular na pag-click sa iyong pahina at ito ay nagpapatupad ng code para sa iyo. Magagawa ito sa pamamagitan ng paghahanap ng anuman tag ng anchor na may isang tukoy klase ng CSS. Sa kasong ito, nagtatalaga kami ng anchor tag na may pangalang klase openchat.

Sa loob ng footer ng site, nagdaragdag lang ako ng custom na HTML field na may kinakailangang script:

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

Ngayon, ang script na iyon ay malawak na site kaya anuman ang pahina, kung mayroon akong klase ng openchat na na-click, ito ay magbubukas ng chat window. Para sa object ng Elementor, itinakda lang namin ang link sa # at ang klase bilang openchat.

link ng elemento

elementor mga advanced na setting ng mga klase

Siyempre, maaaring pahusayin ang code o magagamit din para sa anumang iba pang uri ng kaganapan, tulad ng a Kaganapan sa Google Analytics. Siyempre, ang LiveChat ay may namumukod-tanging pagsasama sa Google Analytics na nagdaragdag sa mga kaganapang ito, ngunit isinasama ko ito sa ibaba bilang isang halimbawa:

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

Ang pagbuo ng isang site gamit ang Elementor ay medyo simple at lubos kong inirerekomenda ang platform. Mayroong isang mahusay na komunidad, tonelada ng mga mapagkukunan, at medyo ilang Elementor Add-On na nagpapahusay sa mga kakayahan.

Magsimula Sa Elementor Magsimula Sa LiveChat

Pagbubunyag: Gumagamit ako ng mga link ng kaakibat para sa Elementor at LiveChat sa artikulong ito. Ang site kung saan binuo namin ang solusyon ay a Tagagawa ng Hot Tub sa gitnang Indiana.