Как сделать попап на сайт для сбора заявок: пошаговый урок

Большинство посетителей уходят с сайта небольшого бизнеса, не оставив следа. Посмотрели цены, пролистали пару фото, закрыли вкладку — и вы так и не узнали, кто это был. Попап, который появляется вовремя, даёт такому человеку понятную причину оставить контакт перед уходом. В этом уроке соберём такой попап в AI SMM: от подключения сайта до работы с заявками.

Что получится в итоге

К концу урока на сайте будет работать один попап: он предлагает что-то полезное — скидку, прайс, бесплатную консультацию — в обмен на email, а при желании и на телефон. Показывается он только нужным посетителям и в нужный момент, а все заявки складываются в один список.

Те же шаги подходят и для других типов попапов в приложении — промокода, объявления, отзыва клиента. Сделав один раз, вы повторите это под любую задачу.

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

• Аккаунт AI SMM с доступом к приложению «Попапы». Доступность зависит от тарифа — проверьте на экране Все приложения.
• Доступ к коду сайта или человек, который вставит короткий фрагмент в шапку страниц. В большинстве конструкторов сайтов для этого есть поле «Свой код» или «Скрипты в head».
• Предложение. До того как открыть редактор, решите, что человек получит за контакт. «Подпишитесь на рассылку» почти никогда не работает, а «−10% на первый заказ» или «пришлём полный прайс на почту» — работает заметно лучше.
• Страница политики конфиденциальности, чтобы люди понимали, как будет использован их контакт.

Шаг 1. Откройте «Попапы» и инструкцию по запуску

Перейдите в Все приложения → Попапы. Меню слева разбито на разделы: Обзор и Инструкция по запуску, затем Сайты, Кампании, Шаблоны, A/B-эксперименты, Лиды, Аналитика, Продажи из попапов и инструменты интеграций.

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

1. Подключите сайт
2. Подтвердите пиксель
3. Отправьте подтверждённое событие
4. Подготовьте кампанию
5. Опубликуйте и посмотрите на показы

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

Шаг 2. Подключите сайт и поставьте пиксель

Нажмите Подключить сайт (или откройте раздел Сайты) и добавьте адрес сайта. AI SMM выдаст фрагмент кода — пиксель попапов. Вставьте его в шапку всех страниц, перед закрывающим тегом </head>.

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

Третий пункт, Отправьте подтверждённое событие, нужен виджетам соцдоказательства вроде «только что записалась Анна»: они показывают только настоящие события с вашего сервера, поэтому AI SMM ничего не выдумывает. Форма заявки хранит отправки сама, так что для этого урока к событиям можно вернуться позже.

Шаг 3. Создайте кампанию из шаблона

Откройте Кампании и создайте новую кампанию или выберите исходный дизайн в разделе Шаблоны. Для сбора контактов нужен тип Сбор заявок. Среди других типов — Предложение с промокодом, Живая активность, Информационное сообщение, Отзыв, видео, кнопка «поделиться» и уведомление о cookie.

Кампания откроется в Конструкторе кампаний. Вверху вкладки: Контент, Аудитория, Правила, Визуальное, Стили и Данные. Проходите их слева направо.

Контент

Дайте кампании понятное название («Весенняя скидка, первый визит»), выберите Сайт и напишите Заголовок, текст и надпись на кнопке. Заголовок — про выгоду клиента, а не про вас: «−10% на первый заказ» сильнее, чем «Присоединяйтесь к нам».

Данные: сама форма

На вкладке Данные настраивается форма. Email собирается всегда. Галочку Собирать номер телефона ставьте, только если действительно будете перезванивать или писать: каждое лишнее поле снижает число заполнивших. В Дополнительных полях формы можно добавить вопрос вроде «Какая услуга интересует?» — текстом, числом, списком, длинным ответом или датой.

Шаг 4. Решите, когда и кому показывать

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

Настройка	Что делает	Когда пригодится
Адрес содержит	Показывает попап только на подходящих страницах	Скидка только на страницах с ценами или товарами
Устройство	Все устройства, компьютер или телефон	Короткая версия для телефона
Тип посетителя	Новые или вернувшиеся	Скидка на первый заказ — только новым
Источник перехода содержит / UTM	Выбирает тех, кто пришёл из конкретного места	Отдельное предложение для тех, кто пришёл из шапки Instagram
Задержка (секунды) и Прокрутка (%)	Ждёт, пока человек реально посмотрит страницу	Показ через 15 секунд или после половины страницы
Минимум просмотров страниц	Ждёт, пока посетитель посмотрит несколько страниц	Консультация для тех, кто сравнивает услуги
Попытка ухода со страницы	Появляется, когда человек собирается уйти	Последнее предложение вместо того, чтобы мешать чтению

На вкладке Правила вы бережёте посетителя: выбираете Позицию на экране, Максимум показов одному человеку, Паузу между показами (часы) и Одну кампанию за сессию, чтобы никто не увидел три попапа подряд. Эти правила работают в пикселе на живом сайте, а не только в предпросмотре.

Шаг 5. Оформите, проверьте и опубликуйте

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

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

Если попап не появляется, откройте в меню Проверить показ попапа. Этот инструмент помогает понять, в чём дело: в пикселе, в условии показа или в ограничении частоты.

Пример: предложение для новых клиенток маникюрной студии

Допустим, у студии маникюра большая часть посетителей сайта приходит из Instagram и поиска по району. Многие смотрят прайс и уходят «подумать».

• Предложение: «−15% на первый маникюр — пришлём промокод на почту».
• Тип: «Сбор заявок», только email плюс одно поле-список «Какая услуга?» с тремя вариантами.
• Аудитория: адрес содержит /ceny, тип посетителя — новые, задержка 20 секунд или попытка ухода.
• Правила: не больше 2 показов одному человеку, пауза 72 часа, одна кампания за сессию, правый нижний угол.

Заявки появляются в Лидах вместе с ответом на «Какая услуга?», и администратор сразу понимает, писать ли про покрытие гель-лаком или про педикюр. Позже студия может добавить вторую кампанию — Предложение с промокодом и таймером под сезонную акцию.

Частые ошибки

• Попап сразу и на всех страницах. Окно, которое закрывает страницу в первую же секунду, приучает закрывать его не читая. Используйте задержку, прокрутку или попытку ухода.
• Размытое предложение. «Будьте на связи» — не повод вводить почту. Называйте конкретную выгоду.
• Слишком много полей. Спрашивайте минимум, нужный, чтобы связаться. Остальное узнаете в разговоре.
• Нет ограничений частоты. Без Максимума показов и Паузы постоянные клиенты видят скидку «на первый заказ» при каждом визите.
• Заявки без ответа. Контакт, которому никто не написал за день-два, почти потерян. Решите заранее, кто и как часто смотрит Лиды.

Как измерить результат

Смотрите на три уровня, по порядку:

1. Показы. Появляется ли попап вообще? Инструкция по запуску и Аналитика показывают реальные показы.
2. Заявки. Сколько отправок в неделю и сколько из них — живые люди, до которых можно достучаться. В Лидах видны email и телефоны и последние отправки. Экспорт CSV пригодится, если вы ведёте заявки в таблице, а Вебхуки сами отправят каждую подтверждённую заявку в CRM.
3. Продажи. Отслеживание конверсий и Продажи из попапов связывают попап с заказами, которые случились после него, — видно, какая кампания принесла деньги, а не только клики.

Когда попап заработал, улучшайте его через A/B-эксперименты: меняйте что-то одно — заголовок или само предложение — и пусть решают цифры. По нашему опыту, суть предложения обычно важнее цвета и анимации.

Вопросы и ответы

Нужен ли программист, чтобы поставить попапы на сайт?

Только чтобы один раз вставить пиксель перед закрывающим тегом </head>. Дальше вы создаёте, меняете и ставите попапы на паузу в AI SMM, не трогая сайт.

Куда попадают собранные контакты?

В раздел Лиды приложения «Попапы». Попапы хранят заявки сами, Email-маркетинг для этого не нужен. Оттуда можно выгрузить CSV или отправлять заявки в другие сервисы через вебхуки.

Можно ли показывать разные попапы на разных страницах?

Да. Условие Адрес содержит на вкладке «Аудитория» ограничивает каждую кампанию своими страницами, а Одна кампания за сессию не даст показать несколько сразу.

Попап опубликован, но я его не вижу. Что проверить?

Откройте Проверить показ попапа. Чаще всего причина в том, что на этой странице нет пикселя, условие показа вас исключает (например, «новые посетители», а вы уже заходили) или вы уже исчерпали лимит показов.

Следующий урок

Попап ловит посетителя, пока он на сайте. Чтобы вернуть его позже, даже не спрашивая почту, переходите к уроку про web push и настройте уведомления в браузере. Короткий обзор всех трёх инструментов для сайта — в статье базы знаний Email-рассылки, попапы и web push: первые шаги. А когда будете готовы, откройте попапы в AI SMM и запустите первую форму. Собранным контактам потом можно отправлять email-рассылки и скидки вашего интернет-магазина.