Настройки плагина

Не забывайте при тестировании и изменении настроек — сбрасывать кеш сайта (если у вас стоят плагины кеширования) и кеш браузера (т.к. в cookie хранится информация о показанных попап).

Основные настройки

Расположение и размеры попап на странице

Всплывающее окно можно выровнять по 9 точкам, с каждой стороны экрана и посередине.

Ширина и высота всплывающего окна может быть в пикселях (px) и вьюпортах (vw и vh).

Вьюпорт — это проценты от размеров окна браузера, vw — viewport width (ширина), vh — viewport height (высота). 100vw — обозначает 100% от ширины браузера, то есть окно будет растянуто на всю ширину. 50vh — это 50% от высоты браузера, то есть всплывающее окно будет занимать половину высоты браузера.

Показать повторно через

Повторно отобразить всплывающее окно после закрытия. Можно установить время, через которое мы опять покажем попап посетителю. Например, мы можем показывать 1 раз в месяц посетителям всплывающее окно с предложением подписаться на наши страницы в социальных сетях.

Если установлено 0, окно будет показано 1 раз и после закрытия будет установлена cookie на 10 лет, которая запретит показ данного всплывающего окна.

Запретить закрытие попап по клику на подложку

У всплывающего окна может быть фоновая подложка, обычно это темный фон под попап окном, который затеняет сам сайт (он настраивается во вкладке Внешний вид). По умолчанию по клику на этот фон попап окно закрывается. Данной настройкой вы можете отключить это.

Запретить закрытие попап по клавише ESC

Запрещаем пользователю закрывать всплывающее окно по нажатию кнопки ESC на клавиатуре. Данную опцию нужно использовать, когда нам нужно максимально захватить внимание пользователя.

Отключить прокрутку страницы

Во время показа попап окна мы можем запретить прокрутку страницы, пока пользователь ее не закроет. Если попап окно занимает большую часть экрана, лучше прокрутку страницы отключить. Если у вас небольшой всплывающее окно в углу экрана, которое не сильно мешает просмотру контента, прокрутку страницы лучше оставить.

Закрыть попап через

Если всплывающее окно нужно показать на небольшое ограниченное время, можно установить автоматическое закрытие окна через определенное количество секунд.

Отображение на устройствах

Каждое всплывающее окно можно отображать только на определенном устройстве. Например, показать всплывающее окно только для мобильных устройств или только для ПК.

Мобильные устройства определяются встроенной в WP функцией wp_is_mobile(), планшеты из библиотеки Mobile-Detect. Определение происходит в PHP по заголовкам HTTP_USER_AGENT.

Внешний вид

В этом разделе расположены почти все настройки по внешнему виду (дизайну) всплывающего окна.

Внутренний отступ

Внутренний отступ у попап от края окна до контента в пикселях.

Рамка

Рамка у попап, поля по порядку: толщина рамки в пикселях, стиль рамки (сплошная, пунктир, точки, двойная), цвет и скругление углов.

Тень

Тень у попап, поля по порядку: смещение по X, смещение по Y, размытие и растяжение, цвет и прозрачность.

Выравнивание контента по вертикали

Выравнивание содержимого всплывающего окна по вертикали. Работает, когда высота попап больше высоты содержимого.

Цвет текста

Цвет текста и цвет ссылок во всплывающем окне. Если вам нужно для какого-то участка текста задать другой цвет, это можно сделать во вкладке Контент в визуальном редакторе.

Анимация

Эффект с которым появляется попап окно. Все анимации можно посмотреть по ссылке.

Фон

Фоновый цвет

Возможность задать фоновый цвет для попап окна.

Фоновая картинка

Фоновая картинка для попап окна, можно указать расположение фоновой картинки, повторение и размер.

auto — фоновая картинка вставляется как есть, в том размере, в котором была загружена.
contain — фоновая картинка вписывается в попап, но при этом не обрезается, а подгоняется под максимальную ширину или высоту.
cover — масштабирует фоновую картинку так, чтобы она заняла весь попап. При этом часть изображения может пропасть.

Затемнить фоновую картинку

Если фоновая картинка неоднородная и текст на ней читается плохо, поверх нее можно наложить затемнение. В настройках можно выбрать цвет затемнения и прозрачность.

Иконка

Вы можете задать иконку, которая будет располагаться рядом с контентом.

WordPress по умолчанию блокирует загрузку SVG файлов, чтобы это исправить установите плагин Safe SVG или указывайте уже итоговый путь к .svg файлу в соответствующем поле, если вы хотите работать без этого плагина.

Ширина и высота иконки задается в пикселях, отступ — это отступ между иконкой и контентом.

Подложка

Это затемняющий слой под попап окном, чтобы выделить окно на фоне самого сайта. Можно указать цвет и прозрачность, хорошо сочетается с настройкой “Отключить прокрутку страницы” во вкладке Основные настройки, т.к. блокирует прокрутку страницы и все внимание пользователя уходит на всплывающее окно.

Кнопка закрытия

Показ кнопки закрытия можно отложить по времени, чтобы пользователь не мог сразу закрыть попап. Если указать 0 секунд — кнопка закрытия будет показана сразу.

Можно выбрать подходящую иконку для кнопки закрытия, указать расположение кнопки (внутри попап окна или снаружи), отступ кнопки от края попап окна, размер и цвет кнопки закрытия.

Контент

В этой вкладке находятся настройки содержимого попап окна.

Первое поле — это визуальный редактор WordPress, в котором вы можете разместить необходимый контент и стилизовать его.

Кнопки

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

Таймер обратного отчета

Примеры шорткодов таймера для быстрого копирования и добавления в контент. Таймеру можно задать минуты, часы, дни, определенную дату и настройки по внешнему виду. Подробнее про шорткод таймера обратного отсчета.

Встроенные стили

Продвинутая настройка для тех, кто разбирается в CSS и кому необходимо дополнительно стилизовать попап.

Если вам необходимо добавить какие-то свои свойства CSS для всплывающего окна, вы можете добавить их в это поле. Каждое всплывающее окно обернуто в блок с уникальным ID, все правила привязываются через этот блок, чтобы добавленные свойства работали только для данного попап.

Все правила начинаются с #{{id}}, этот шаблон будет заменен на ID блока, и дальше уже идут необходимые селекторы.

Например:

#{{id}} .mypopup-body p {
    font-weight: 800;
}

Будет выведен как:

#mypopup_9232fe81225bcaef853ae32870a2b0fe .mypopup-body p {
    font-weight: 800;
}

HTML-код

Если вы раньше пробовали вставлять в визуальный редактор HTML-код, то наверняка сталкивались, что в стандартном редакторе подобный код зачастую обрезается и перестает работать. Это относится к рекламе, встроенным картам, iframe, дополнительной верстке.

Чтобы разместить такой код в попап, вы можете создать неограниченное количество шорткодов [mypopup_html id=X] и уже их добавлять в сам контент.

Например, мы создали два HTML-шорткода, в первом выводим свою дополнительную верстку, во втором SVG картинку через тег:

Теперь эти два шорткода можно разместить в поле выше, в Контенте, чтобы вывести HTML:

Также нужно учитывать, что добавлять рекламу от яндекса через это поле не рекомендуется, т.к. правилами Правилами участия в Рекламной сети Яндекса запрещается вывод баннеров во всплывающих окнах:
3.2. При размещении рекламных блоков, которые перекрывают содержимое интернет-страницы (overlay-блоков), необходимо соблюдать следующие требования:
3.2.1. запрещено размещение overlay-блоков на десктопных версиях ресурсов, если они перекрывают содержимое интернет-страницы;
3.2.2. при размещении overlay-блоков должны соблюдаться следующие условия:
3.2.2.1. размещение допустимо только на устройствах с шириной экрана от 320 до 420 px

В данном разделе можно вывести ссылки на профили в социальных сетях.

Иконки социальных сетей не добавляются автоматически в контент. Добавьте шорткод [mypopup_social_buttons], чтобы вывести их в нужном месте.

Вы можете настроить Тип кнопок (квадратные, круглые), размеры иконок социальных сетей, расстояние между иконками.

Все ссылки на социальные сети должны быть полными, с указанием протокола (например, https://vk.com/wpshop).

Скрыть ссылки с помощью JS

Чтобы избежать появления внешних ссылок на сайты социальных сетей, вы можете скрыть их с помощью JS, тогда иконки будут отображаться без ссылок, при этом будут работать через скрипты JS. В большинстве случаев лучше включить эту настройку.

Это виджеты, которые предоставляют социальные сети.

Facebook

Вывод активности на странице профиля в социальной сети Facebook.

В настройках виджета нужно добавить полную ссылку на соц. профиль с указанием протокола (например, https://www.facebook.com/wpshopbiz).

Виджет Facebook не добавляется автоматически в контент. Добавьте шорткод [mypopup_social_widget type="fb"], чтобы вывести его в нужном месте.

ВКонтакте

Вывод активности группы в социальной сети ВКонтакте.

В настройках виджета нужно добавить только id группы без протокола и полного вида (например, 137277177). Как узнать id группы можете прочитать здесь или здесь.

Виджет ВКонтакте не добавляется автоматически в контент. Добавьте шорткод [mypopup_social_widget type="vk"], чтобы вывести его в нужном месте.

Одноклассники

Вывод активности группы в социальной сети Одноклассники.

В настройках виджета нужно добавить только id группы без протокола и полного вида (например, 123456789). Как узнать id группы можете прочитать здесь.

Виджет Одноклассники не добавляется автоматически в контент. Добавьте шорткод [mypopup_social_widget type="ok"], чтобы вывести его в нужном месте.

Twitter

Вывод активности группы в социальной сети Twitter.

В настройках виджета нужно добавить полную ссылку на соц. профиль с указанием протокола (например, https://twitter.com/wpshopbiz).

Виджет Twitter не добавляется автоматически в контент. Добавьте шорткод [mypopup_social_widget type="tw"], чтобы вывести его в нужном месте.

Вывод активности группы в социальной сети Pinterest.

В настройках виджета нужно добавить полную ссылку на доску с указанием протокола (например, https://www.pinterest.com/pinterest/official-news).

Виджет Pinterest не добавляется автоматически в контент. Добавьте шорткод [mypopup_social_widget type="pn"], чтобы вывести его в нужном месте.

Вывод записей

Вы можете вывести записи во всплывающем окне.

Записи не добавляются автоматически в контент. Добавьте шорткод [mypopup_output_posts], чтобы вывести их в нужном месте.

Сортировка по просмотрам работает при наличии поля views у записей (это большинство плагинов для подсчета просмотров и тем).

Дополнительно можно указать какие именно ID записей показывать, какие исключить и из каких рубрик показывать, а из каких исключить записи.

Добрать записи

Если в полях “ID записей для вывода”, “ID записей для исключения”, “ID категорий для вывода” и “ID категорий для исключения” не заданы параметры или заданы, но количество записей исходя из данных параметров меньше количества записей, указанных в поле “Количество записей”, недостающие записи можно добрать согласно сортировке.

Правила вывода

В этом разделе можно указать условия отображения всплывающих окон.

События, при которых показывать попап

Показать через X сек. после загрузки страницы

Можно попап отобразить сразу после захода пользователя на страницу или отложить отображение на заданное количество секунд. Часто лучше немного отложить всплывающее окно, чтобы не раздражать пользователя как только он попал на сайт.

Показать после прокрутки % страницы

Попап можно показать после того, как посетитель прокрутит часть страницы. Например, мы показываем окно с предложением скидки, как только пользователь промотал 50% страницы.

Показать по скроллу до элемента

Иногда нужно отобразить попап как только пользователь прокрутил страницу до определенного блока. Например, вы хотите показать записи во всплывающем окне по достижению пользователем комментариев. Блок комментариев на сайте выглядит так: <div id="comments" class="comments-area"> Если идем через ID блока, то в поле указываем #comments (символ решетки вначале), если нужно указать через класс, тогда .comments-area.

В качестве значения используется любой селектор jQuery.

Показать если пользователь не активен X сек.

Если пользователь не двигает мышкой и не нажимает никаких клавиш на странице какое-то время, можно вывести всплывающее окно.

Показать если пользователь уходит со страницы

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

Показать по клику на элементе

Показать попап, если пользователь кликнул на заданном элементе. Клик сработает только если попап подходит для вывода по заданным правилам. Можно эту функцию использовать двумя способами.

С помощью своего скрипта, самый простой способ добавить в свойство onclick вызов функции myPopupShow() с переданным идентификатором попапа, который указан рядом с настройкой. Например, можно создать такую кнопку
```
<button class="button" onclick="myPopupShow('mypopup_38ca89564b2259401518960f7a06f94b')">Button</button>
```
Добавить селектор, по аналогии с пунктом “Показать по скроллу до элемента”.

Подробнее о том, как открыть попап по клику с примерами

На каких страницах выводить попап

Если в этом разделе не задано ни одного правила для вывода — попап не будет работать. По умолчанию добавляется одно правило — Показывать на каждой странице.

В данном разделе вы можете выбрать на каких страницах показывать попап, а на каких скрыть.

Чем выше находится правило, тем выше его приоритет. Проще говоря, правила обрабатываются снизу вверх.

На каждой странице
На главной — проверяется главная страница через is_front_page(), показывает, если на главной последние записи или если на главной статическая страница.
В записях — проверяются только записи (тип поста post). Во втором поле можно задать в каких конкретно записях выводить.
- Записи в категориях — проверяются записи, которые относятся к определенной рубрике
- Записи в тегах — проверяются записи, которые относятся к определенным тегам (меткам)
- Записи в таксономиях — если у вас есть произвольные таксономии, вы можете делать выборку по ним
На страницах — проверяются только страницы (тип записи page). Во втором поле можно задать на каких конкретно страницах выводить.
В типах постов — если у вас есть произвольные типы постов, вы можете выводить попап в них. Во втором поле можно указать в каких конкретно записях выводить.
В рубриках — проверяется именно сама рубрика (не записи в ней).
В тегах — проверяются именно сами метки (не записи в метках).
В таксономиях — если у вас есть произвольные таксономии и именно в них вам нужно вывести попап (не в записях таксономии)
На странице поиска — на странице результатов встроенного поиска WordPress.
На 404 — на любой 404 странице, которую отображает WordPress.
Регулярное выражение для url — можно задать любую часть адреса или регулярку для вывода попап. Например: utm_source=yandex.

Пресеты

Готовые примеры попап окон, которые можно активировать в один клик.

Сейчас пресеты есть только готовые и сохранять свои нельзя. Если у вас есть идеи крутых попап или даже вы сами сделали красивое попап окно — напишите нам в поддержку, добавим.

Импорт и экспорт

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

Экспорт

По нажатию на кнопку Экспортировать данные, все данные попап будут скопированы в буфер обмена в виде зашифрованного кода. Дальше этот код вы можете вставить в поле Импорт на новом сайте или создать новый попап и уже в него импортировать данные.

С помощью настройки Экспортировать с правилами, вы можете указать, необходимо ли в итоговый код для экспорта добавить настройки с вкладки Правила вывода. Например, при переносе на другой сайт эти данные зачастую не нужны, т.к. записи и рубрики на сайтах отличаются. В таком случае, чтобы не было путаницы, можно правила вывода исключить для экспорта.

Импорт

Поле предназначено для ранее экспортированного кода. Вы просто вставляете код и нажимаете кнопку Импортировать данные. Все настройки применятся автоматически без перезагрузки страницы.

Загрузка стилей, скриптов и попап

Стандартные стили и основной скрипт подключаются плагином на всех страницах. Контент попапа запрашивается скриптом асинхронно, сервер отдает данные попапов согласно настроенным правилам в разделе “На каких страницах выводить попап”. Затем скрипт показывает попап в зависимости от настроенных событий в разделе “События, при которых показывать попап”.