Как сделать попап на сайте — гайд для SaaS и B2B

Попап — это всплывающее окно поверх контента сайта, которое появляется по триггеру: время на странице, exit-intent, скролл, клик. Хороший попап дает конверсию 3–8% от показов и не получает закрытий «Х» на первом взгляде. Плохой режет посещаемость и собирает жалобы. Разбираемся, как сделать попап на сайте за 10 минут в визуальном конструкторе Нотифлоу — без программиста и верстальщика. Эта статья — про SaaS и B2B-сценарии, потому что 90% русских гайдов про попапы покрывают только e-commerce со скидками.

Когда попап работает, а когда раздражает

Попап работает, когда дает пользователю одно из четырех:

• Полезное действие в нужный момент. «Подписаться на блог» через 60 секунд чтения статьи.
• Экономию времени. «Получить демо за 15 минут» вместо чтения 5 страниц лендинга.
• Релевантное предложение по поведению. Пользователь смотрит тарифы 2 минуты — попап «Помочь подобрать тариф?».
• Явный сигнал ухода. Exit-intent с альтернативой: «Не уходите без звонка с экспертом».

Попап раздражает, когда:

• появляется через 2 секунды после загрузки, до того как пользователь увидел сайт;
• предлагает что-то, не связанное с текущей страницей;
• закрывается мелким крестиком, который трудно нажать;
• появляется снова и снова в одной сессии;
• блокирует чтение, требуя email до того, как ценность ясна.

Самая ядовитая форма — попап на главной с предложением «Подпишитесь на рассылку» через 1 секунду. Конверсия — 0,5–1%, отказов и закрытий — десятки.

Какие бывают попапы и под какие задачи

Шесть типов попапов, которые реально работают в B2B и SaaS:

• Попап-приветствие. Через 3–5 секунд на главной. «Здравствуйте, расскажите о вашем сайте — подберем решение».
• Попап-апсейл. Авторизованному пользователю на тарифе Старт — «Перейти на Рост, чтобы снять лимит».
• Попап-NPS. «Насколько вы готовы рекомендовать продукт» через 7 дней использования.
• Попап-уведомление. «В среду обновление, кабинет недоступен с 14:00 до 14:30».
• Попап exit-intent. На странице тарифов, при движении к закрытию вкладки.
• Попап после действия. «Вы создали первый виджет — подключим аналитику?».

В e-commerce еще работают «брошенная корзина» и «скидка по промокоду», но для SaaS они нерелевантны. Не копируйте e-commerce-сценарии в B2B-продукт — они выглядят неуместно.

Как сделать попап в Нотифлоу — пошагово

В кабинете на cp.notiflow.ru:

1. «Виджеты → Создать → Попап». Выберите тип из 6 шаблонов или начните с пустого.
2. Назовите попап. Например, «Попап-приветствие на главной» — имя видите только вы.
3. Соберите контент в конструкторе. Заголовок, подзаголовок, поле email или просто кнопка. Drag-and-drop, без верстки.
4. Настройте кнопку. Текст — глагол + объект. Действие — отправка формы, переход по ссылке, закрытие, отправка события.
5. Перейдите на вкладку «Показ». URL = главная страница, триггер = «через 5 секунд», сегмент = «новые посетители».
6. Установите частоту. Cooldown 7 дней — стандарт для попапа-приветствия.
7. Превью на боевом сайте. Кнопка «Открыть превью» — попап появится только для вас.
8. «Опубликовать». Пушится в продакшн через 30–60 секунд.

Время на сборку первого попапа из шаблона — 10 минут. С нуля — 20 минут.

Как написать текст и оформить попап

Заголовок — главный элемент. Он должен помещаться в 6–8 слов и содержать конкретный глагол или конкретное число.

Подзаголовок — одно предложение, которое объясняет «зачем кликать». Не пересказ заголовка другими словами, а добавление контекста: «Покажем на вашем сайте, отвечу на вопросы, дам рекомендации».

Кнопка — глагол + объект. Никаких «Подробнее», «Узнать больше», «OK». Конкретно: «Записаться на демо», «Получить файл», «Подключить amoCRM».

Закрывающий «Х» делайте видимым — 24×24 пикселя, с подсветкой при наведении. Скрытый или мелкий крестик увеличивает раздражение пользователя и портит метрики бренда сильнее, чем плохой попап как таковой.

Условия показа: где, когда и кому

Стандартная конфигурация для попапа-приветствия:

• URL. Главная страница, исключая страницы кабинета.
• Триггер. Через 5 секунд на странице.
• Сегмент. Новые посетители (cookie notiflow_uid отсутствует).
• Cooldown. 7 дней — повторно одному пользователю не покажется неделю.

Для exit-intent на тарифах:

• URL. /pricing.
• Триггер. Exit-intent (десктоп) или 60 секунд бездействия (мобильный).
• Сегмент. Все, кто не авторизован.
• Cooldown. 14 дней.

Для апсейла авторизованному пользователю:

• URL. Кабинет, исключая страницу биллинга.
• Триггер. Через 30 секунд + событие limit_reached_30_percent.
• Сегмент. Авторизованные на тарифе Старт.
• Cooldown. 30 дней.

Подробнее о всех опциях — в статье «Таргетинг виджетов».

Попапы без раздражения: частота и приоритет

Если у проекта 5+ виджетов, важно настраивать приоритеты, иначе пользователь получит 3 попапа подряд. В Нотифлоу есть два механизма:

• Cooldown на уровне виджета. «Не показывать одному пользователю чаще, чем раз в N дней». Базовые значения: попап-приветствие — 7 дней, exit-intent — 14 дней, апсейл — 30 дней.
• Глобальный лимит на сессию. «Не показывать второй виджет в течение 30 секунд после закрытия первого». Включается в «Настройки → Виджеты → Глобальные правила».

Дополнительно у каждого виджета есть поле «Приоритет» от 0 до 100. Когда несколько виджетов претендуют на один и тот же триггер, побеждает тот, у кого приоритет выше.

Хорошее правило: на одной странице — максимум 1 попап в первые 30 секунд и максимум 2 за всю сессию. Если у вас 4 разных попапа на главной, ставьте им разные триггеры (один — через 5 секунд, второй — exit-intent, третий — после клика по Тарифы) и cooldown по 7 дней. Так одна сессия увидит максимум один из них.

Как измерить эффективность

В разделе «Аналитика → Виджеты → конкретный попап» доступно:

• Conversion rate. Доля показов, в которых пользователь сделал целевое действие (отправил форму, нажал кнопку с действием).
• Closed rate. Доля закрытий через «Х». Если closed rate выше 80%, попап выглядит как раздражитель — пересмотрите триггер и текст.
• Average time to interaction. Сколько секунд от показа до первого клика. Если меньше 1 секунды, и conversion rate высокий — это бот или пользователь жмет «закрыть» рефлекторно.
• A/B-тест. Дублируйте попап в вариант B и меняйте текст или цвет кнопки. Через 7 дней или 1 000 показов будет видно статистически значимый победитель.

Контрольные значения для B2B SaaS-попапа:

• conversion rate 3–8% — норма;
• 1–3% — попап работает, но текст или таргетинг можно улучшить;
• меньше 1% — пересоберите с нуля или вообще удалите;
• больше 10% — поздравляю, проверьте данные на дубли отправок.

Подробный разбор аналитики — в статье «Как отслеживать прогресс виджета».

Часто задаваемые вопросы

Готовы собрать попап — заходите в cp.notiflow.ru/auth/register, регистрация занимает 2 минуты. После создания виджета настройте таргетинг по гайду «Таргетинг виджетов», а для онбордингового сценария соберите чек-лист. Подробно про возможности — на странице виджетов-попапов.