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

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

Вот как это выглядит:

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

Это удобно, когда вы можете редактировать основной код или добавлять собственный HTML. Однако в Elementor платформа заблокирована по соображениям безопасности, поэтому вы не можете добавить событие onClick к какому-либо объекту. Если к вашему коду прикреплено специальное событие onClick, вы не получите никакой ошибки, но увидите, что код удаляется из вывода.

Использование кликера на уроке

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

Мы не хотим, чтобы наша кнопка отображалась до тех пор, пока не будет загружен Livechat, поэтому мы добавим в тему класс, чтобы изначально скрыть любую кнопку с помощью этого класса:

.openchat { display: none; }

Класс элементов

Для любого объекта Elementor, который мы хотим открыть чат, нам просто нужно установить класс как openchat.

JavaScript для онлайн-чата для открытия OnClick

Теперь мы можем добавить скрипт в наш нижний колонтитул или Диспетчер тегов Google, чтобы загружать LiveChat, показывать кнопки после его загрузки, а затем открывать окно чата, если какой-либо элемент с openchat класс нажимается.

<!-- Start of LiveChat code -->
<script async="true">
    (function() {
        var lc = document.createElement('script');
        lc.type="text/javascript";
        lc.async = true;
        lc.src=" domain}/widgets-main.js";
        lc.onload = function() {
            // Once the script is loaded, check for LC_API availability
            waitForLCAPILoad(function() {
                // Display .openchat elements
                displayOpenChatElements();
                // Add click listeners to .openchat elements
                addChatButtonListeners();
            });
        };
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(lc, s);
    })();

    // Wait until LiveChat is open before displaying the button
    function waitForLCAPILoad(callback) {
        if (window.LC_API) {
            callback();
        } else {
            setTimeout(function() {
                waitForLCAPILoad(callback);
            }, 100); // Check every 100 milliseconds
        }
    }

    // Display the button
    function displayOpenChatElements() {
        var openchatElements = document.querySelectorAll('.openchat');
        openchatElements.forEach(function(element) {
            element.style.display = 'block'; // Adjust this to fit how you want these elements to appear
        });
    }

    // Open the chat window if a button is clicked
    function addChatButtonListeners() {
        var openchatElements = document.querySelectorAll('.openchat');
        openchatElements.forEach(function(element) {
            element.addEventListener('click', function() {
                if (window.LC_API) {
                    if (!window.LC_API.chat_window_minimized()) {
                        return false; // If the chat window is already open, do nothing
                    }
                    window.LC_API.open_chat_window();
                }
                return false; // Prevent default action
            });
        });
    }
</script>
<!-- End of LiveChat code -->

Создать веб-сайт с помощью Elementor легко, и я настоятельно рекомендую эту платформу. Здесь отличное сообщество, множество ресурсов и немало дополнений Elementor, которые расширяют возможности.

Начало работы с Elementor Начало работы с LiveChat