WordPress: Použití jQuery k otevření okna LiveChat kliknutím na odkaz nebo tlačítko pomocí Elementoru

Použití jQuery k otevření okna LiveChat kliknutím na odkaz nebo tlačítko pomocí Elementoru

Jeden z našich klientů má Elementor, jedna z nejrobustnějších platforem pro vytváření stránek pro WordPress. Během posledních několika měsíců jsme jim pomohli vyčistit jejich příchozí marketingové aktivity, minimalizovat přizpůsobení, která implementovali, a zajistit, aby systémy lépe komunikovaly – včetně analýzy.

Zákazník má Živý chat, fantastická chatovací služba, která má robustní integraci Google Analytics pro každý krok procesu chatu. LiveChat má velmi dobré API pro integraci do vašeho webu, včetně možnosti otevřít okno chatu pomocí události onClick v kotevní značce. Takto to vypadá:

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

To je užitečné, pokud máte možnost upravit základní kód nebo přidat vlastní HTML. S Elementorplatforma je však z bezpečnostních důvodů uzamčena, takže nemůžete přidat událost onClick na jakýkoli předmět. Pokud jste do svého kódu přidali tuto vlastní událost onClick, neobjeví se žádný typ chyby... ale kód se z výstupu odstraní.

Použití jQuery Listener

Jedním z omezení metodologie onClick je, že byste museli upravit každý jednotlivý odkaz na vašem webu a přidat tento kód. Alternativní metodikou je zahrnout na stránku skript, který poslouchá pro konkrétní kliknutí na vaši stránku a spustí kód za vás. To lze provést vyhledáním jakéhokoli kotevní značka s konkrétním CSS třída. V tomto případě označujeme značku ukotvení s názvem třídy openchat.

Do zápatí webu přidám vlastní pole HTML s potřebným skriptem:

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

Nyní je tento skript široký na celý web, takže bez ohledu na stránku, pokud mám třídu openchat po kliknutí se otevře okno chatu. Pro objekt Elementor nastavíme odkaz na # a třídu jako openchat.

odkaz elementor

třídy pokročilého nastavení elementor

Kód lze samozřejmě vylepšit nebo jej lze použít i pro jakýkoli jiný typ události, jako je např Událost Google Analytics. LiveChat má samozřejmě vynikající integraci s Google Analytics, která přidává tyto události, ale níže to uvádím jen jako pří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>

Vytváření stránek pomocí Elementoru je poměrně jednoduché a platformu vřele doporučuji. Existuje skvělá komunita, spousta zdrojů a několik doplňků Elementor, které rozšiřují možnosti.

Začněte s Elementorem Začněte s LiveChatem

Zveřejnění: Používám affiliate odkazy pro Elementor a Živý chat v tomto článku. Místo, kde jsme vyvinuli řešení, je a Výrobce vířivek v centrální Indianě.