Как создать первый виджет на сайт в Нотифлоу

Если разбираетесь, как создать виджет на сайт без разработчика, в Нотифлоу он собирается в визуальном конструкторе за 10 минут. Доступно 6 типов: попап, чек-лист, тултип, продуктовый тур, NPS-опрос и квиз. Шаги одинаковые для всех — выбираете тип, наполняете контентом, настраиваете условия показа, нажимаете «Опубликовать». Скрипт уже стоит на сайте — отдельной интеграции не требуется.

Какие виджеты доступны и под какие задачи

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

• Попап — модальное окно поверх контента. Подходит для сбора email, акций, exit-intent.
• Чек-лист — список из 3–5 шагов с прогресс-баром. Используется для онбординга в продукте.
• Тултип — точечная подсказка с привязкой к элементу страницы. Хорошо работает в кабинетах и SaaS.
• Продуктовый тур — последовательность шагов с подсветкой UI. Объясняет интерфейс новому пользователю.
• NPS-опрос — вопрос «Насколько вы готовы рекомендовать продукт» по шкале 0–10.
• Квиз — серия вопросов с ветвлением, результат — рекомендация или лид-форма.

Если не знаете, с чего начать — соберите попап-приветствие на главной и чек-лист из 3 шагов в личном кабинете. Это базовая связка, с которой работает большинство SaaS-продуктов.

Как создать виджет в конструкторе — пошагово

Откройте кабинет и пройдите по шагам:

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

Время на сборку первого попапа из шаблона — 5 минут, чек-листа на 4 шага — 10 минут.

Как настроить внешний вид и текст

В Нотифлоу есть две точки кастомизации: фирменные стили проекта и настройки конкретного виджета.

Фирменные стили задаются один раз в «Настройки → Бренд»:

• основной и акцентный цвета;
• шрифт (загрузка .woff2 или выбор из системных);
• радиус кнопок;
• логотип, который будет показан в шапке виджетов.

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

Текст пишите коротко и по делу. Заголовок — 6–8 слов с конкретным глаголом. Кнопка — глагол + объект: «Подключить домен», «Посмотреть тарифы», «Запустить тест». Без «Подробнее», «Узнать больше», «Подождите минутку» — это выглядит пустым.

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

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

• Где. Список URL — точное совпадение, contains, regex.
• Когда. Триггер: открытие страницы, после N секунд, на N% скролла, exit-intent, клик по селектору.
• Кому. Сегмент: новые vs вернувшиеся, авторизованные vs гости, свойства из user-properties (роль, тариф, регион).
• Как часто. Cooldown в днях между показами одному пользователю и лимит на сессию.

Минимальная разумная конфигурация для попапа-приветствия: URL = «главная страница», триггер = «через 3 секунды», сегмент = «новые посетители».

Подробный разбор всех опций таргетинга — в статье «Таргетинг виджетов: где, когда и кому показывать».

Как опубликовать виджет и проверить работу

После публикации виджет уходит в очередь обновления CDN — в продакшне он появится через 30–60 секунд.

Чтобы убедиться, что все работает:

1. Откройте сайт в режиме инкогнито (без cookie-истории).
2. Дождитесь срабатывания триггера — виджет должен появиться.
3. Откройте «Аналитика → Виджеты» в кабинете — на карточке виджета через 1–2 минуты появится первый показ.
4. Кликните по кнопке внутри виджета — в аналитике появится событие click.

Если виджет не появляется, частые причины:

• триггер «exit-intent» не срабатывает в режиме предпросмотра — это нормально, протестируйте на боевом сайте;
• сегмент «новые посетители» не совпадает с вашей сессией — почистите cookie или зайдите с другого браузера;
• скрипт еще не успел перечитать конфиг — подождите 60 секунд после публикации;
• частотный cooldown сработал и виджет уже показывался вам сегодня.

Что делать дальше: аналитика и A/B-тесты

В аналитике виджета смотрите четыре основные метрики:

• Conversion rate. Доля показов, в которых пользователь дошел до целевого действия (клик, отправка формы, завершение тура).
• Drop-off по шагам. Где люди отваливаются — последний шаг чек-листа или второй вопрос квиза.
• Время до первого взаимодействия. Сколько секунд между показом и первым кликом.
• Closed rate. Доля закрытий через крестик — если выше 80%, виджет ощущается как раздражитель.

A/B-тест запускается из карточки виджета — кнопка «Создать вариант». Нотифлоу дублирует виджет с возможностью править текст, цвета и триггеры в копии. Трафик делится 50/50, через 7 дней (или 1 000 показов) видно статистически значимый победитель.

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

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

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