Быстрый старт: первое окно за 10 минут

Что понадобится

Магазин на Webasyst Shop-Script и Установщик Webasyst.
Доступ к шаблонам темы оформления: хелпер вывода вставляется в .html-шаблон.
Для начала — картинка для окна (png, jpg, svg, gif или webp). Её можно добавить позже.

Шаг 1. Установите плагин

Установите «Всплывающие уведомления PRO» через Установщик Webasyst в разделе «Плагины» Shop-Script. После установки откройте «Магазин → Плагины → Всплывающие уведомления PRO»: настройки находятся на отдельной странице.

Страница настроек плагина: блок окна с хелпером вывода и разделами настроек

Шаг 2. Выберите тип окна

В блоке «Номер всплывающего окна: 1» откройте раздел «Основные настройки». В поле «Тип» выберите «Акция (медиаконтент сверху)». Остальные поля можно оставить по умолчанию: положение «Центр», эффект «Fade», ширина 650 px, высота 450 px.

Основные настройки окна: идентификатор, тип, положение, эффект, размеры

Шаг 3. Заполните содержимое

Откройте раздел «Текстовый контент» и введите «Заголовок модального окна» и «Текст модального окна». Разделы «Медиа-контент» и «Кнопки» задают картинку и до двух кнопок: введите текст кнопки и ссылку на страницу акции.

Подробности — в главе Содержимое и оформление.

Шаг 4. Задайте условия показа

Откройте раздел «Условия показа» и введите в поле «Через сколько секунд показать» число, например 5. Затем ограничьте показы: в поле «Сессионное количество показов» введите 1, чтобы окно появлялось один раз за визит.

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

Условия показа: секунды, клик, якорь, ограничения показов

Шаг 5. Сохраните настройки

Нажмите зелёную кнопку «Сохранить» внизу страницы.

Шаг 6. Вставьте хелпер в шаблон темы

В верхней части блока окна показаны две строки «Хелпер вывода»: для приложения «Магазин» и для других приложений Webasyst. Скопируйте строку для вашего случая. Для окна №1 в магазине она выглядит так:

{shopStartpopupnotificationsPlugin::setPopup(1)}

Вставьте её в шаблон темы перед закрывающим тегом </body> — плагин рекомендует размещать хелпер внизу страницы. Если окно нужно на всех страницах, это общий шаблон темы (обычно index.html). Подробности о других приложениях — в главе Условия показа.

Шаг 7. Проверьте на сайте

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

Акция с таймером на странице магазина

Несколько окон

Кнопки под последним окном:

«Добавить всплывающее окно» — новое окно со значениями по умолчанию;
«Копировать всплывающее окно» — копия последнего окна со всеми настройками;
«Удалить всплывающее окно» — удаление последнего окна (доступна, когда окон больше одного).

Каждому окну соответствует свой хелпер: число в скобках — номер окна. Если в шаблоне нужны два окна, вставьте две строки. У разных окон должны быть разные значения поля «Идентификатор всплывающего окна» (подробнее — в главе Типы окон). После удаления окна уберите его хелпер из шаблона.