Возможности
- Картинка акции из медиатеки — слева, справа, сверху баннером или без картинки.
- Промокод, который посетитель копирует одним нажатием.
- Дата начала и окончания — окно само включится и само выключится в нужный момент.
- Таймер обратного отсчёта до конца акции.
- Три способа показа: через N секунд, после прокрутки страницы на N% или при попытке уйти с сайта (exit-intent).
- Не надоедает: после закрытия окно не показывается тому же человеку заданное число часов. Когда вы меняете акцию, новое окно снова увидят все.
- Где показывать: на всех страницах, только на главной, только на выбранных или везде, кроме выбранных. Отдельно — только на компьютерах или только на телефонах.
- Свои цвета кнопки, плашки и фона, скругление углов.
- Цели для Яндекс Метрики: показ окна, нажатие кнопки, копирование промокода.
- Предпросмотр для администратора и открытие окна своей кнопкой (например, пунктом меню «Акция»).
- Лёгкий: без jQuery на сайте, файлы подключаются только пока акция активна.
Требования
- WordPress 5.8 или новее.
- PHP 7.4 или новее (работает и на PHP 8.x).
- Подходит для любой темы и обычного хостинга — ничего дополнительно ставить не нужно.
Установка
Шаг 1. Загрузите архив
Скачайте promopop.zip. Архив не распаковывайте. В админке WordPress откройте Плагины → Добавить новый → Загрузить плагин, выберите файл и нажмите «Установить».
Шаг 2. Активируйте плагин
После установки нажмите «Активировать». Плагин появится в списке, рядом будет ссылка «Настройки».
Шаг 3. Заполните акцию
Откройте Настройки → PromoPop. Вверху страницы видно, показывается ли окно сейчас. Кнопка «Предпросмотр на сайте» откроет окно сразу, но увидите его только вы.
Основное. Поставьте галочку «Включить окно», напишите плашку («Только до воскресенья», «−20%»), заголовок и текст, выберите картинку. Лучше квадратную, от 600×600 px.
Условия, промокод и кнопка. «Карточка условия» — короткий факт под текстом: «Сумма заказа — от 1 100 ₽», «Скидка — 15%». Если нужен промокод, впишите его. У главной кнопки укажите текст и ссылку: каталог, меню, страницу акции, WhatsApp (https://wa.me/79…) или телефон (tel:+79…).
Сроки. Укажите дату окончания, и после неё окно перестанет показываться само. Дату начала можно поставить заранее: окно включится в нужный день. Таймер показывает, сколько осталось до конца акции.
Когда показывать. Выберите момент появления и через сколько часов показывать окно снова тому, кто его закрыл: 24 — раз в сутки, 168 — раз в неделю.
Где и кому показывать. Например, только в каталоге: режим «Только на страницах из списка» и строка /catalog/*. Звёздочка означает «все страницы внутри раздела».
Оформление. Подберите цвет кнопки под свой сайт.
Нажмите «Сохранить настройки», а затем «Предпросмотр на сайте».
Шаг 4. Проверьте результат
На телефоне окно поднимается снизу экрана и не закрывает весь сайт. Промокод копируется по нажатию.
Своя кнопка «Акция» в меню
Чтобы посетитель мог открыть окно сам, добавьте в меню (Внешний вид → Меню) «Произвольную ссылку» с адресом #promopop. Можно также добавить любому элементу CSS-класс promopop-open. Такое открытие работает, пока акция активна, даже если человек уже закрывал окно.
Статистика в Яндекс Метрике
Впишите номер счётчика в настройках плагина и создайте в Метрике цели типа «JavaScript-событие» с идентификаторами:
promopop_show— окно показано;promopop_click— нажата главная кнопка;promopop_copy— скопирован промокод.
Устранение проблем
Я закрыл окно и больше его не вижу. Так и должно быть: окно не показывается повторно столько часов, сколько указано в настройке «Показывать снова через». Для проверки используйте «Предпросмотр на сайте» или режим инкогнито.
Окно не появляется совсем. Проверьте статус вверху страницы настроек: включено ли окно и не закончилась ли акция. Затем проверьте, подходят ли страница и устройство. Если на сайте стоит кэширующий плагин (WP Super Cache, LiteSpeed Cache и т. п.), очистите кэш после сохранения.
Акция закончилась не в то время. Время считается по часовому поясу сайта (Настройки → Общие → Часовой пояс). Выберите там свой город.
Окно появляется под шапкой сайта. Такое бывает с темами, у которых очень высокий z-index. Откройте Внешний вид → Настроить → Дополнительные стили и добавьте строку .promopop{z-index:2147483000!important}.