Как установить попап при попытке закрыть страницу

Этот скрипт позволяет показать посетителю специальное окно в тот момент, когда он собирается уйти со страницы.

Например, в попапе можно предложить скидку, подарок, подписку или перейти на другую страницу.

Устанавливается он очень просто — дополнительный плагин не нужен.

Шаг 1. Откройте страницу в Elementor

Зайдите в админку WordPress и откройте страницу, на которой хотите установить попап.

Нажмите «Редактировать в Elementor».

Шаг 2. Добавьте виджет HTML

В панели Elementor найдите виджет HTML.

Перетащите его на страницу.

Лучше всего поставить его в самый низ страницы, после основного содержимого.

Само расположение HTML-виджета на странице не имеет значения: попап всё равно будет отображаться поверх всей страницы.

Шаг 3. Вставьте код

Скопируйте весь код попапа целиком и вставьте его в поле HTML.

Важно: не удаляйте части кода и не вставляйте его в текстовый редактор. Нужен именно виджет HTML.

Шаг 4. Измените текст и ссылку

В коде можно изменить несколько элементов под своё предложение.

Например:

<div id="lb-popup-label">
    Только сейчас
</div>

Здесь можно написать небольшую надпись над заголовком:

Только сейчас

или:

Специальное предложение

Заголовок находится здесь:

<h2 id="lb-popup-title">
    Не уходите с пустыми руками!
</h2>

Например:

Подождите! У меня есть для вас подарок

Текст попапа:

<div id="lb-popup-text">
    У меня есть для вас небольшой подарок.
    Заберите его прямо сейчас.
</div>

Здесь напишите своё предложение.

Текст кнопки:

Забрать подарок

Можно заменить на:

Получить скидку

Подробнее

Забрать бонус

Получить подарок

И обязательно измените ссылку кнопки:

href="https://marketbox.vip/"

Вместо неё поставьте URL страницы, на которую должен перейти посетитель.

Например:

href="https://ваш-сайт.ru/podarok/"

Шаг 5. Сохраните страницу

Нажмите «Обновить» в Elementor.

После этого попап уже установлен.

Шаг 6. Проверьте работу

Откройте страницу не в редакторе Elementor, а в обычном браузере.

Затем наведите мышку к самому верхнему краю экрана, как будто собираетесь закрыть вкладку.

Попап должен появиться.

Если он не появляется, попробуйте открыть страницу в режиме инкогнито.

Это важно, потому что скрипт запоминает, что попап уже показывался, и не демонстрирует его повторно в рамках одной сессии.

Важный момент

Попап в первую очередь рассчитан на компьютеры и ноутбуки.

На них он появляется, когда посетитель перемещает курсор к верхней границе окна браузера — то есть демонстрирует намерение уйти со страницы.

На телефоне такого движения мыши нет, поэтому такой вариант exit-попапа работает иначе. Если вам нужен попап именно для мобильных посетителей, используйте отдельную настройку показа для мобильных устройств.

Что можно менять, а что лучше не трогать

Можно спокойно менять:

• заголовок;
• текст;
• надпись над заголовком;
• текст кнопки;
• ссылку кнопки.

CSS и JavaScript лучше не изменять, если вы не разбираетесь в коде.

Особенно не удаляйте строки <style> и <script> — без них попап работать не будет.

И ещё: один и тот же код можно установить на несколько страниц сайта. Например, на страницу курса, страницу услуги или продающий лендинг.

Важно! Перед установкой сохраните исходный код в отдельный файл или блокнот. Если вы случайно что-то удалите в коде, его можно будет восстановить.