WordPress: Použitie jQuery na otvorenie okna LiveChat kliknutím na odkaz alebo tlačidlo pomocou Elementoru

Použitie jQuery na otvorenie okna LiveChat kliknutím na odkaz alebo tlačidlo pomocou Elementor

Jeden z našich klientov má Elementor, jedna z najrobustnejších platforiem na vytváranie stránok pre WordPress. Počas posledných mesiacov sme im pomáhali vyčistiť ich prichádzajúce marketingové aktivity, minimalizovať prispôsobenia, ktoré implementovali, a zlepšiť komunikáciu systémov – vrátane analýzy.

Zákazník má LiveChat, fantastická služba rozhovoru, ktorá má robustnú integráciu služby Google Analytics pre každý krok procesu rozhovoru. LiveChat má veľmi dobré rozhranie API na integráciu do vašej stránky, vrátane možnosti otvoriť okno rozhovoru pomocou udalosti onClick v značke ukotvenia. Takto to vyzerá:

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

Je to užitočné, ak máte možnosť upraviť základný kód alebo pridať vlastný kód HTML. S Elementorplatforma je však z bezpečnostných dôvodov uzamknutá, takže nemôžete pridať udalosť onClick na akýkoľvek predmet. Ak máte do kódu pridanú vlastnú udalosť onClick, nezobrazí sa vám žiadny typ chyby... ale kód sa z výstupu odstráni.

Použitie jQuery Listener

Jedným z obmedzení metodiky onClick je, že by ste museli upraviť každý jeden odkaz na svojej stránke a pridať tento kód. Alternatívnou metodikou je zahrnúť do stránky skript, ktorý počúva pre konkrétne kliknutie na vašu stránku a spustí kód za vás. Dá sa to urobiť tak, že si vyhľadáte hociktorý kotviaci štítok s konkrétnym CSS trieda. V tomto prípade označujeme značku ukotvenia triedou s názvom openchat.

Do päty stránky pridám vlastné pole HTML s potrebným skriptom:

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

Teraz je tento skript široký na celú stránku, takže bez ohľadu na stránku, ak mám triedu openchat po kliknutí sa otvorí okno rozhovoru. Pre objekt Elementor nastavíme odkaz na # a triedu ako openchat.

elementor odkaz

triedy pokročilých nastavení elementor

Samozrejme, kód môže byť vylepšený alebo môže byť použitý aj pre akýkoľvek iný typ udalosti, ako napr Udalosť Google Analytics. LiveChat má samozrejme vynikajúcu integráciu so službou Google Analytics, ktorá pridáva tieto udalosti, ale nižšie to uvádzam len ako príklad:

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

Vytvorenie stránky pomocou Elementor je pomerne jednoduché a platformu vrelo odporúčam. Existuje skvelá komunita, množstvo zdrojov a pomerne málo doplnkov Elementor, ktoré zlepšujú možnosti.

Začnite s Elementorom Začnite so službou LiveChat

Zverejnenie: Používam odkazy affiliate partnerov pre doménu Elementor a LiveChat v tomto článku. Stránka, na ktorej sme vyvinuli riešenie, je a Výrobca víriviek v centrálnej Indiane.