Создать попап
Как устроен попап в Нотифлоу
Карточка виджета в кабинете — минимальная админка: имя, тумблер публикации, кнопка «Открыть редактор виджета», поле «Открыть на странице», вкладки «Статистика» и «Ответы». Само содержимое попапа собирается в отдельном редакторе, который открывается на странице вашего сайта в новом окне — либо на тестовой странице cp.notiflow.ru без установки на сайт («Попробовать в Нотифлоу»). Все изменения в редакторе сохраняются автоматически.
Шаг 1. Создайте виджет типа «Попап»
- Откройте раздел «Виджеты» в боковом меню и нажмите «Создать виджет».
- В модалке «Новый виджет» заполните поле «Название» (плейсхолдер «Например: Приветствие на странице цен») и выберите в сетке «Тип» карточку «Попап».
- В сегменте «Откуда начать» выберите «С нуля» или «Шаблон».
- Нажмите «Перейти к сборке».
Стартовый шаблон попапа уже содержит заголовок «Подпишитесь на рассылку», абзац, обязательное поле email и кнопку «Подписаться»; после отправки формы посетитель увидит сообщение «✓ Вы подписаны…». От этого набора удобно оттолкнуться и заменить тексты на свои.
На тарифе «Старт» доступно до 3 попапов. На тарифах «Команда», «Бизнес» и «Масштаб» ограничения по количеству нет; копия существующего попапа тоже учитывается в квоту.
Шаг 2. Соберите содержимое в редакторе
На карточке созданного виджета нажмите «Открыть редактор виджета» — он откроется на странице вашего сайта в новом окне.
Редактор — конструктор блоков: строки, колонки и блоки внутри них добавляются через слеш-меню. Доступны заголовки трех уровней, абзац, разделитель, картинка, встраивание, кнопка, файл на скачивание и разрыв страницы, а также поля ввода — текст, многострочный текст, email, телефон, имя, ссылка, число — плюс варианты выбора (один из списка, несколько, выпадающий, рейтинг), дата, время, файл и ползунок.
У кнопки задается действие: отправить форму, перейти по ссылке (в этой или новой вкладке), закрыться или скопировать текст в буфер. Для действия «отправить форму» отдельно настраивается поведение после отправки (afterSubmit) — показать сообщение благодарности, перейти по ссылке или просто закрыть попап, а также анимация-праздник: конфетти, галочка, искры, фейерверк или без нее.
В настройках контейнера выберите «Тип» — «Попап» или «Баннер» — и задайте «Радиус скругления» (0-100, по умолчанию 15), «Цвет фона» (по умолчанию белый), «Цвет текста» и тумблер «Показывать крестик» (включен по умолчанию). У попапа размер по умолчанию 400×300; у баннера вместо радиуса — «Ширина контента» (20-100%) и «Тип размещения»: перекрытие или смещение.
Если в модалке создания выбрать тип «Веб-пуш», это тот же попап, только с фиксированной позицией снизу-справа — отдельного типа виджета для него нет.
Шаг 3. Настройте показ и опубликуйте
- В редакторе откройте панель «Правила показа» и настройте, когда и кому показывать попап — подробнее в статье про таргетинг виджетов.
- Вернитесь на карточку виджета и включите тумблер публикации.
После публикации новые правки сохраняются как черновик: на карточке появится баннер «Есть неопубликованные правки» с кнопками «Опубликовать правки» и «Отменить правки». Хранится и история версий — старую версию можно восстановить кнопкой «Восстановить».
Если это ваш первый виджет в кабинете, общий порядок действий описан в статье про первый виджет.