WordPress: выкарыстанне jQuery, каб адкрыць акно LiveChat, націснуўшы на спасылку або кнопку з дапамогай Elementor

Выкарыстанне jQuery, каб адкрыць акно LiveChat, націснуўшы на спасылку або кнопку з дапамогай Elementor

У аднаго з нашых кліентаў ёсць факір, адна з самых надзейных платформаў для стварэння старонак для WordPress. За апошнія некалькі месяцаў мы дапамагаем ім навесці парадак у маркетынгавых намаганнях па ўваходжанні, звесці да мінімуму ўведзеныя імі налады і палепшыць сувязь сістэм, у тым ліку з дапамогай аналітыкі.

Заказчык мае LiveChat, фантастычны сэрвіс чата, які мае надзейную інтэграцыю Google Analytics на кожным этапе працэсу чата. LiveChat мае вельмі добры API для інтэграцыі яго ў ваш сайт, у тым ліку магчымасць адкрыць акно чата з дапамогай падзеі onClick у тэгу прывязкі. Вось як гэта выглядае:

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

Гэта зручна, калі ў вас ёсць магчымасць рэдагаваць асноўны код або дадаваць карыстальніцкі HTML. З факір, аднак платформа заблакіравана з меркаванняў бяспекі, так што вы не можаце дадаць файл падзея onClick на любы аб'ект. Калі ў ваш код дададзена гэта карыстальніцкая падзея onClick, вы не атрымаеце памылак... але вы ўбачыце, што код выдалены з вываду.

Выкарыстанне jQuery Listener

Адным з абмежаванняў метадалогіі onClick з'яўляецца тое, што вам прыйдзецца рэдагаваць кожную асобную спасылку на вашым сайце і дадаваць гэты код. Альтэрнатыўнай метадалогіяй з'яўляецца ўключэнне сцэнарыя на старонку, якая слухае для пэўнага кліку на вашай старонцы, і ён выконвае код для вас. Гэта можна зрабіць, пашукаўшы любы якарная бірка з канкрэтным Клас CSS. У гэтым выпадку мы пазначаем якарны тэг з названым класам openchat.

У ніжні калантытул сайта я проста дадаю карыстальніцкае поле HTML з неабходным скрыптам:

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

Цяпер гэты скрыпт распаўсюджваецца на ўвесь сайт, таму незалежна ад старонкі, калі ў мяне ёсць клас openchat калі націснуць, адкрыецца акно чата. Для аб'екта Elementor мы проста ўсталёўваем спасылку на # і клас як openchat.

спасылка на элемент

Elementor класы пашыраных налад

Вядома, код можа быць палепшаны або можа быць выкарыстаны для любога іншага тыпу падзей, а таксама, як a Падзея Google Analytics. Вядома, LiveChat мае выдатную інтэграцыю з Google Analytics, якая дадае гэтыя падзеі, але я ўключаю гэта ніжэй у якасці прыкладу:

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

Стварыць сайт з дапамогай Elementor даволі проста, і я настойліва рэкамендую платформу. Ёсць выдатнае супольнасць, мноства рэсурсаў і даволі шмат дадатковых кампанентаў Elementor, якія пашыраюць магчымасці.

Пачніце з Elementor Пачніце з LiveChat

Раскрыццё інфармацыі: Я выкарыстоўваю партнёрскія спасылкі для факір і LiveChat у гэтым артыкуле. Сайт, на якім мы распрацавалі рашэнне, гэта a Вытворца гарачай ванны ў цэнтральнай Індыяне.