„WordPress“: „jQuery“ naudojimas norint atidaryti „LiveChat“ langą spustelėjus nuorodą arba mygtuką naudojant „Elementor“

„JQuery“ naudojimas norint atidaryti „LiveChat“ langą spustelėjus nuorodą arba mygtuką naudojant „Elementor“.

Vienas iš mūsų klientų turi Elementor, viena iš patikimiausių „WordPress“ puslapių kūrimo platformų. Per pastaruosius kelis mėnesius padėjome jiems sutvarkyti gaunamos rinkodaros pastangas, sumažindami pritaikytus pritaikymus ir pagerindami sistemų ryšį, įskaitant analizę.

Klientas turi LiveChat, fantastiška pokalbių paslauga, kuri turi tvirtą „Google Analytics“ integraciją kiekviename pokalbio proceso etape. „LiveChat“ turi labai gerą API, leidžiančią ją integruoti į jūsų svetainę, įskaitant galimybę atidaryti pokalbio langą, naudojant „onClick“ įvykį prierašo žymoje. Štai kaip tai atrodo:

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

Tai patogu, jei turite galimybę redaguoti pagrindinį kodą arba pridėti pasirinktinį HTML. Su Elementor, tačiau platforma užrakinta saugumo sumetimais, kad negalėtumėte pridėti onClick įvykis bet kuriam objektui. Jei prie kodo pridėjote pasirinktinį onClick įvykį, negausite jokios klaidos, bet pamatysite, kad kodas bus pašalintas iš išvesties.

Naudojant jQuery Listener

Vienas iš onClick metodologijos apribojimų yra tas, kad turėsite redaguoti kiekvieną savo svetainės nuorodą ir pridėti tą kodą. Alternatyvi metodika – į puslapį įtraukti scenarijų, kuris klauso tam tikram puslapio spustelėjimui ir jis įvykdys kodą už jus. Tai galima padaryti ieškant bet kokio inkaro žymė su konkrečiu CSS klasė. Šiuo atveju mes skiriame inkaro žymą su pavadinta klase atviras pokalbis.

Svetainės poraštėje tiesiog pridedu tinkintą HTML lauką su reikiamu scenarijumi:

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

Dabar šis scenarijus yra visoje svetainėje, todėl nepriklausomai nuo puslapio, jei turiu klasę atviras pokalbis spustelėjus, bus atidarytas pokalbio langas. Objekto „Elementor“ nuorodą mes tiesiog nustatėme į # ir klasę kaip atviras pokalbis.

elementor nuoroda

elementor išplėstinių nustatymų klasės

Žinoma, kodas gali būti patobulintas arba gali būti naudojamas bet kokio kito tipo įvykiams, pvz., a „Google Analytics“ įvykis. Žinoma, „LiveChat“ puikiai integruota su „Google Analytics“, kuri prideda šiuos įvykius, tačiau toliau pateikiau tai kaip pavyzdį:

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

Svetainės kūrimas naudojant „Elementor“ yra gana paprastas ir aš labai rekomenduoju šią platformą. Yra puiki bendruomenė, daugybė išteklių ir nemažai „Elementor“ priedų, kurie pagerina galimybes.

Pradėkite naudotis „Elementor“. Pradėkite naudotis „LiveChat“.

Atskleidimas: Aš naudoju filialo nuorodas Elementor ir LiveChat šiame straipsnyje. Svetainė, kurioje sukūrėme sprendimą, yra a Kubilų gamintojas centrinėje Indianos valstijoje.