WordPress: Otevřete okno 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 jsem přidal tento vlastní 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>
Použití JavaScript Listeneru
Případně zde je kód využívající JavaScript:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var openchatElements = document.querySelectorAll('.openchat');
openchatElements.forEach(function(element) {
element.addEventListener('click', function() {
if (parent.LC_API && parent.LC_API.open_chat_window) {
parent.LC_API.open_chat_window();
}
return false;
});
});
});
</script>
Nyní je tento skript pro 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.Kód lze samozřejmě vylepšit nebo použít pro jakýkoli jiný typ události, jako je a 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', 'open_chat_window', {
'event_category': 'Chat Interaction',
'event_label': 'Live Chat Opened'
});
});
});
</script>
Vytvoření webu pomocí Elementoru je jednoduché a platformu vřele doporučuji. Je tu skvělá komunita, spousta zdrojů a nemálo doplňků Elementor, které rozšiřují možnosti.