WordPress: использование jQuery для открытия окна LiveChat нажатием ссылки или кнопки с помощью Elementor

Использование jQuery для открытия окна LiveChat путем нажатия ссылки или кнопки с помощью Elementor

У одного из наших клиентов Факир, одна из самых надежных платформ для создания страниц для WordPress. За последние несколько месяцев мы помогли им навести порядок в их усилиях по входящему маркетингу, сведя к минимуму реализованные ими настройки и улучшив взаимодействие систем, в том числе с помощью аналитики.

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

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

Это удобно, если у вас есть возможность редактировать основной код или добавлять собственный HTML. С участием Факир, тем не менее, платформа заблокирована по соображениям безопасности, поэтому вы не можете добавить onClick событие к любому объекту. Если к вашему коду добавлено это пользовательское событие onClick, вы не получите никаких ошибок… но вы увидите, что код удален из вывода.

Использование прослушивателя jQuery

Одним из ограничений методологии onClick является то, что вам придется редактировать каждую ссылку на вашем сайте и добавлять этот код. Альтернативный метод заключается в том, чтобы включить на страницу сценарий, который слушает для определенного клика на вашей странице, и он выполняет код для вас. Это можно сделать, найдя любой якорный тег с определенным CSS класс. В этом случае мы обозначаем тег привязки с классом с именем открытый чат.

В нижнем колонтитуле сайта я просто добавляю пользовательское HTML-поле с необходимым скриптом:

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

Теперь этот сценарий распространяется на весь сайт, поэтому независимо от страницы, если у меня есть класс открытый чат при нажатии откроется окно чата. Для объекта Elementor мы просто устанавливаем ссылку на # и класс как открытый чат.

элементор ссылка

классы расширенных настроек elementor

Конечно, код можно улучшить или использовать для любого другого типа событий, например Событие 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, которые расширяют возможности.

Начать работу с Элементором Начните с LiveChat

Раскрытие информации: я использую партнерские ссылки для Факир и Живой чат в этой статье. Сайт, на котором мы разработали решение, является Производитель джакузи в центральной Индиане.