Что такое попап и как его сделать

Опубликовано: 12.04.2025

У любой компании рано или поздно встаёт вопрос: как не потерять клиентов, которые зашли на сайт? Ведь кто-то закроет страницу, потому что не нашёл информацию, а кто-то — просто из-за того, что отвлёкся. Удержать внимание помогают попапы. Вместе с продуктовым маркетологом Callibri Владом Ивановым разбираемся, почему с их помощью можно повысить продажи и как их быстро подключить.

Зачем нужен попап

Попап (popup) — это всплывающее окно на сайте, которое побуждает посетителя к действию. Например, пользователь может ввести электронную почту, чтобы подписаться на рассылку, а компания таким образом получит нового потенциального клиента. Разберем, какие задачи бизнеса могут решать такие окна.

Собрать контакты. Всплывающее окно может предлагать подписаться на рассылку, оставить телефон для связи с менеджером или получить бонус в обмен на email. Для компании это — первая точка контакта с потенциальным клиентом, а для пользователя — возможность подробнее узнать об услуге или продукте.

Пример попапа с целевым действием оставить контактные данные

Удержать посетителей на сайте. У компании есть пара секунд, чтобы заинтересовать своим продуктом. В этом и помогает попап. Когда человек собирается закрыть вкладку или бездействует на странице, попап появляется в этот самый момент. Клиент уже не спешит уходить с сайта, потому что видит скидку или подарок.

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

Пример попапа с игровой механикой

Узнать обратную связь. Если интернет-магазин после оформления заказа покажет клиенту попап с коротким опросом «Оцените процесс заказа по пятибалльной шкале», менеджер быстро узнает мнение о покупке. Это помогает улучшать сервис, а значит, удовлетворенность клиентов.

Донести важную информацию. Иногда попап нужен, чтобы вовремя сообщить что-то важное. Например, чтобы предложить пользователю отключить блокировщик рекламы, уведомить о сборе файлов cookie или предупредить о временных изменениях в работе сайта. Так клиенту будет удобнее делать покупки на сайте.

Всплывающие окна

Покажут клиентам выгодное предложение в нужный момент

Ошибки при создании попапов

Попап — эффективный инструмент, если использовать его правильно. Но неверные настройки могут навредить бизнесу и испортить впечатление клиентов. Например, если посетитель будет постоянно видеть навязчивый рекламный баннер с неактуальным предложением, это скорее отпугнет его, чем заинтересует. В результате компания может терять потенциальных клиентов, а пользователи — получать негативный опыт взаимодействия с брендом. Чтобы этого не произошло, разобрали частые ошибки в работе с попапами.

Слишком большое всплывающее окно. Попап не должен закрывать основной контент сайта. Иначе клиент отвлечется с выбора продукта и просто закроет баннер.

Пример огромного попапа. Он мешает человеку делать покупки и скорее всего, вызовет раздражение, а не желание оставить свой e-mail

Оптимальный вариант — выбирать попап среднего размера и занимать им не более 15% экрана. А располагать его лучше справа снизу для веб-версии, либо в нижней части экрана на мобильном устройстве. Тогда контент не будет раздражать человека.

✅В Callibri можно настроить размер и формат попапа: модальное окно, бар, сайдбар и другие. Также есть настройка ширины и высоты в процентах, что позволяет адаптировать его под устройства пользователей.

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

✅ В Callibri есть встроенная библиотека изображений для разных сфер бизнеса: от автомобильной до e-com. Вы сможете выбрать то, что подходит для вашей компании и сэкономите время на поиск визуала.

Сервисы Callibri

Автоматизируем работу с лидами на всех этапах воронки

Помогаем понять, какая реклама приводит платящих клиентов

Делаем работу маркетинга прозрачной и эффективной

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

Для того, чтобы понять, меняется ли что-то в бизнес-показателях с этим инструментом, нужно отслеживать несколько метрик. Это просмотры, клики и конверсии. Расскажем о каждой подробнее.

Просмотры. Это общая видимость окна.Помогает оценить, сколько раз попап появился перед пользователями. На эту метрику стоит смотреть вместе с кликами и конверсией. Например, если попап увидели 500 раз, но это не привело к следующим шагам, возможно, предложение не привлекает внимание или CTA недостаточно четкий. В этом случае стоит проверить дизайн, текст или условия показа.

Клики. Показывают количество человек, которые заинтересовались предложением и нажали на кнопку. Например, если из 100 показов, компания получает 60 кликов, значит, дизайн и сообщение работают, но если конверсий меньше 30, возможно, предложение недостаточно привлекательное.

Если попап приносит много кликов, а на количестве заявок это не сказывается, предложение нужно доработать. А если попап приносит заявки, он привлекает вашу целевую аудиторию и работает как нужно.
Конверсии. Количество успешных действий, которые совершили пользователи, например, регистрация, покупка или подписка. Это основной показатель того, что попап приносит результат. Высокая конверсия означает, что всплывающее окно мотивирует пользователей на действие.
Средняя конверсия попапов в разных сферах варьируется от 2–10%. Если показатель ниже 2%, стоит протестировать другие варианты. Здесь нельзя дать универсальное решение: многое зависит от бизнеса, сезонности, предложения и самого трафика на сайте.

А/Б-тестирование. Оно помогает выяснить, какие визуальные элементы, тексты и призывы к действию лучше откликаются у вашей аудитории. Например, вы можете создать два попапа с разными заголовками или кнопками: первый вариант покажется одной половине посетителей, второй — другой. Затем сравните показатели кликов и конверсий, чтобы понять, какой вариант эффективнее достигает вашей бизнес-цели.

✅Метрики попапов в Callibri доступны во всех тарифах. Они включают в себя просмотры, клики и конверсии. Также есть подробная аналитика в Едином Журнале Лидов — ЕЖЛ. Она показывает, с какой рекламной кампании пришел клиент, по какому ключевому запросу и учитывать другие параметры.

Как сделать попап в Callibri: пошаговая инструкция

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

Шаг 1. Регистрация и настройка Callibri. Для этого просто перейдите на сайт Callibri и создайте аккаунт. После регистрации настройте проект: добавьте домен и установите на сайт специальный скрипт. Это позволит подключить сервис и попапы начнут работать. Если у вас возникнут трудности с установкой, на сайте есть подробная инструкция.

Перед подключением попапа вы можете оставить заявку по кнопке «Получить консультацию» или протестировать его в демо-режиме.

Шаг 2. Подключение попапа в сервисе. Перейдите в раздел «Услуги» в личном кабинете Callibri и выберите опцию «Попап». Вам нужно выбрать:

срок лицензии: на 30, 360 или 720 дней;
тариф: «Старт» или «Бизнес». Нажмите кнопку «Узнать все преимущества», чтобы узнать подробнее о каждом тарифе.

После того, как выберете тариф, нажмите кнопку «Подключить». Если на балансе достаточно средств, услуга подключится моментально. В ином случае пополните баланс и нажмите кнопку еще раз

Шаг 3. Настройка тарифа. После того как вы подключили попап, переходите в раздел «Настройка» → «Попапы». Нажмите кнопку «Создать». Для тарифа «Старт» доступны два варианта:

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

Выбирайте один из трех вариантов: «Свой попап», «Из шаблона» и «А/B-тест». Под каждым из них есть подсказка, какой тип попапа вам подойдет

Тариф «Бизнес» также включает функцию A/B тестирования и доступ к полному набору шаблонов. Далее рассмотрим процесс создания попапа с нуля.

Шаблоны с продуманными механиками и библиотека изображений сэкономят время для запуска. В большинстве случаев для решения задачи бизнеса подойдут именно такие решения. Главное — адаптировать шаблон под визуал вашего сайта, а также задать верные условия показа. А вот создавать попап с нуля лучше спец-проектам с определенной механикой.

Шаг 4. Создание и настройка попапа. Для начала оформите его. Перейдите в раздел «Страницы и условия» и выберите нужный попап в блоке «Страница один» — «Основной попап». Здесь можно настроить:

тип попапа — модальное окно, бар, сайдбар, панель;
тему — темная или светлая;
размер и форму попапа;
радиус скругления углов;
выравнивание текста и фона;
отступ от текста до кнопки — рекомендуем не меньше 32px;
тень попапа и затемнение фона.

Кроме темы, размера и формы попапа, в правом окне можно сразу добавить описание, а потом его отредактировать

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

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

Выбирайте цвет иконки закрытия в зависимости от попапа. Например, если он получился в темных тонах, выберите яркую иконку, чтобы она была заметна

Затем переходите к изображению — выберите его из библиотеки или загрузите свое.

На экраны вы увидите, какие изображения вы уже загрузили, а каких не хватает для создания попапа

Если нужен уникальный дизайн, можно кастомизировать попап через гибкие настройки или создать его с нуля, настроив длину и ширину попапа. Также можно загрузить свои изображения и адаптировать стилистику под бренд. Еще в сервисе есть функционал «изображение на фон» — дизайнер создает нужный визуал, а вы просто его встраиваете в попап.

Шаг 6. Настройка полей и текста. Выбрать новые поля можно через кнопку «Добавить» — например, форма для сбора контактов или комментарий. Если вы используете попап для сбора контактов, настройте поля для e-mail и телефона. Чем меньше полей, тем выше вероятность, что человек оставит свои данные. Заголовок, описание и текст для кнопки вводите в основных полях, которые есть во всех типах попапа по умолчанию.

Если вам необходимо добавить юридическую информацию о компании в попап, для этого есть отдельное поле

Для изменения шрифта и стиля — полужирный, курсив, подчеркнутый — просто кликните на нужный элемент и отредактируйте его.

Для выделения текста в описании выберите главную мысль. Например, можно выделить цену или название скидки

Шаг 7. Оповещение об успешной отправке. Перейдите в раздел «Страницы и условия» и выберите пункт «Оповещение об успешной отправке формы». Здесь настройте уведомление, которое вы будете получать после того, как человек оставит свои данные.

Вы можете установить таймер, который будет автоматически закрывать попап через определенное время (по умолчанию — 10 секунд)

Шаг 8. Включение попапа. Когда всё настроите, не забудьте включить всплывающее окно на основном экране. После активации оно будет работать, а все собранные данные — контакты или действия пользователей — будут отображаться в ЕЖЛ — едином журнале лидов. Это позволит оперативно связываться с новыми лидами.

Во вкладке «Все попапы» вы увидите активные и неактивные баннеры, а также аналитику

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