Что такое попап для сайта и как его добавить

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

В этой статье разберем, что такое попап, и как создать всплывающее окно на любой платформе — Tilda, Битрикс, WordPress или HTML. Плюс покажем, как запустить его в Jivo без кода и сложных интеграций.

Что такое попап для сайта#

Хорошо настроенный попап не раздражает, а напротив помогает пользователю. Например, если пользователи:

• задержались на странице тарифов — попап предложит консультацию;
• возвратились на сайт — попап напомнит о скидке;
• бросили корзину — попап покажет окно с предложением завершить заказ.

Так может выглядеть pop-up на сайте.

Виды попапов#

Разберем основные виды попапов — по оформлению, назначению и способу срабатывания.

По внешнему оформлению#

• Лайтбокс. Классический формат: окно появляется по центру, а фон страницы слегка затемняется. Такой прием концентрирует внимание и повышает конверсию. Чаще всего лайтбоксы используют для сбора e-mail-адресов или предложения скидки при уходе со страницы.
• Попап «Да/Нет» или «Да/Да». Мини-опрос в один-два клика. В первом варианте ответ «Нет» закрывает окно, во втором — оба варианта ведут к нужному разделу или предложению. Это помогает вовлечь пользователя без давления.
• Геймифицированный попап. Попап превращается в мини-игру — например, колесо удачи, где за участие можно получить приз или промокод. Такие форматы повышают вовлеченность и лояльность аудитории.
• Компактный баннер сбоку. Ненавязчивое окошко, которое появляется в углу экрана. Часто используется для уведомлений, напоминаний или коротких офферов.
• Плавающая панель. Закрепляется внизу или сбоку сайта и может содержать новости, кнопки соцсетей или форму подписки. Не мешает просмотру контента, но всегда остается в поле зрения.
• Полноэкранный попап. Занимает все пространство экрана — формат для акций, распродаж и анонсов. Лучше использовать ограниченно, чтобы не вызывать раздражение у пользователя.

По функциональному назначению#

• Информационные оповещения. Сообщают об акциях, изменениях в расписании, доставке или новинках.
• Попап для перенаправления. Помогает увеличить просмотры страниц или продвинуть партнерский контент, направляя пользователя к нужной ссылке.
• Обход AdBlock. Иногда всплывающее окно помогает донести предложение, если рекламные блоки заблокированы.
• Форма входа или регистрации. Позволяет авторизоваться без перехода на отдельную страницу, что упрощает процесс покупки или бронирования.
• Опрос или сбор обратной связи. Небольшие формы помогают узнать мнение клиентов или оценить качество сервиса.

По триггеру срабатывания#

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

Как выбрать формат попапа в Jivo под задачу#

В Jivo всплывающие окна делятся на три типа — в зависимости от расположения и сценария использования.

Плавающие#

Компактные элементы сбоку или внизу страницы. Идеальны для уведомлений и быстрого сбора заявок. 

Где лучше использовать: Страницы с тарифами, корзина, карточки услуг.

Плавающий попап от Jivo на сайте.

Горизонтальные#

Баннеры сверху или снизу сайта. Отлично подходят для временных акций и новостей.

Где лучше использовать: Верх или низ страницы, например, баннер на сайте, который не мешает просмотру контента.

Горизонтальный попап от Jivo на сайте.

Модальные#

Всплывают по центру с затемнением фона. Универсальный формат для предложений и форм обратной связи.

Где лучше использовать: Главная страница, блог, каталог товаров

Модальный попап от Jivo на сайте.

Как сделать попап на сайте#

Создать попап в Jivo можно прямо в интерфейсе без программирования. 

Пошаговая инструкция:

Шаг 1. Откройте раздел Маркетинг в приложении Jivo

Кликните Создать → Всплывающее окно.

Это центр управления, где вы можете настроить все за пару минут.

Шаг 2. Выберите шаблон

В открывшемся окне вы увидите библиотеку шаблонов.

Можно выбрать:

• Создать с нуля — если хотите полностью индивидуальный дизайн.
• Запрос номера телефона — для сбора контактов.
• Рассказать об акциях — для промо-баннеров.
• Сбор отзывов или опросов — для взаимодействия с клиентами.

Слева есть фильтры:

• Тип расположения попапа — Боковой, Стандартный, Горизонтальный.
• Категории целей — Призыв к действию, Сбор контактов, Опросы.

Сезонные шаблоны — Черная Пятница, Новый год (для временных акций и праздничных предложений).

После выбора шаблона нажмите на него, чтобы перейти к настройке.

Шаг 3. Настройте шаблон

Измените текст, изображение, цвета и кнопки под свой бренд.

Добавьте поля для заполнения (например, имя, телефон, e-mail).

Настройте действие кнопки — например, отправку формы или переход на страницу.

Шаг 4. Укажите общую информацию

Дайте всплывающему окну название, например, «Скидка 10% новым клиентам».

При желании добавьте описание для внутреннего использования.

Шаг 5. Настройте условия показа 

Укажите, кому и когда показывать попап:

• всем посетителям или только новым;
• при выходе с сайта, через заданное время, после прокрутки страницы и т.д.

Можно также ограничить показ по страницам, странам или устройствам.

Шаг 6. Предпросмотр и запуск

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

Если все устраивает — нажмите Запустить.

Попап появится на сайте в соответствии с заданными условиями.

В разделе Статистика можно отслеживать ключевые показатели:

• количество показов (охват);
• клики (CTR);
• влияние на конверсию.

Так вы сможете сравнивать разные варианты и выбирать самые результативные**.**

Попап на разных CMS#

Создать и запустить попап в Jivo можно автономно на любой платформе — Tilda, Битрикс, WordPress и HTML. Чтобы всплывающие окна Jivo работали на сайте, сначала нужно установить код виджета Jivo (через плагин, модуль или вставку кода). После этого попапы настраиваются в приложении Jivo → Маркетинг → Всплывающие окна. Ниже инструкции для популярных платформ.

Попап на Tilda#

Как подключить:

1. В редакторе Tilda откройте библиотеку блоков: More Blocks → Other.
2. Добавьте блок T133 «JivoSite widget» на страницу.
3. В блоке нажмите Content и вставьте код виджета Jivo: Приложение Jivo → Управление → Каналы связи → Настроить → Установка → Скопировать код.
4. Сохраните изменения и опубликуйте сайт.
5. В приложении Jivo создайте и настройте попап в Маркетинг → Всплывающие окна.

1С‑Битрикс#

Способ 1. Через модуль

1. В маркетплейсе 1С-Битрикс найдите модуль Онлайн консультант JivoSite и установите.
2. Введите адрес сайта и авторизуйтесь в аккаунте Jivo.

Код Jivo автоматически добавится на сайт.

Способ 2. Вручную через шаблон

1. В приложении Jivo → Управление → Каналы связи → Настроить → Установка → Скопировать код.
2. В админ-панели 1С-Битрикс: Настройки → Настройки продукта → Сайты → Шаблоны сайтов.
3. Вставьте код перед закрывающим тегом в выбранный шаблон (для нескольких шаблонов — повторить).
4. Сохраните изменения и настройте попапы в Jivo: Маркетинг → Всплывающие окна.

Попап на WordPress#

Как подключить:

1. В админ-панели WordPress откройте Плагины → Добавить новый.
2. Найдите и установите официальный плагин JivoChat – a Live Chat for Your Site, затем Активируйте.
3. В боковом меню откройте вкладку JivoChat, авторизуйтесь или зарегистрируйтесь.
4. В приложении Jivo настройте попап в Маркетинг → Всплывающие окна.
5. Попап будет работать без редактирования кода темы, на всех страницах сайта.

Попап на HTML-сайте#

Как подключить:

1. В приложении Jivo → Управление → Каналы связи → Настроить → Установка → Скопировать код.
2. Вставьте код в HTML‑шаблон перед тегом .
3. Сохраните изменения и обновите сайт.
4. Настройте попап в приложении Jivo: Маркетинг → Всплывающие окна.
5. Попап корректно отображается на всех устройствах — мобильных и десктопах.

Примеры эффективного использования попапов#

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

Привлечь внимание#

Ситуация: Рекламная кампания запущена, трафик идет, но конверсий нет — пользователи смотрят ассортимент, но не находят нужный товар.

Решение: Попап в нужный момент может выступить как виртуальный консультант.

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

Почему работает:

• человек получает готовый выбор, экономит время;
• бренд помогает, а не продает в лоб;
• внимание клиента возвращается в зону интереса.

⚙️ Настройка в Jivo:

✅ Условие показа: через 25 секунд после загрузки страницы;

✅ Место: главная и страницы категорий;

✅ Тип попапа: «Переход по ссылке» или «Сбор заявок».

Удержать клиента#

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

Решение: Запустите попап с предложением напомнить о выгоде и подтолкнуть к действию.

Почему работает:

• появляется, когда клиент уже готов к диалогу;
• решает сомнение, а не «давит»;
• превращает интерес в заявку.

⚙️ Настройка в Jivo:

✅ Условие показа: время на странице > 40 секунд;

✅ Канал: страница с тарифами или описанием услуги;

✅ Действие: «Оставить заявку».

Вернуть к заказу#

Ситуация: Пользователь положил товар в корзину, но не оформил заказ. Возможно, отвлекся или раздумывает.

Решение: Попап может напомнить завершить заказ и создаст ощущение срочности.

Почему работает:

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

⚙️Настройка в Jivo:

✅  Условие показа: URL страницы содержит /cart и время бездействия > 20 секунд;

✅  Кнопка: «Оформить заказ».

Почему эти сценарии работают#

• Попап появляется в контексте действий пользователя, а не случайно.
• Решает конкретную задачу — подсказать, напомнить, помочь.
• Текст короткий, понятный и ориентирован на выгоду клиента.
• Окно оформлено в стиле бренда и естественно вписывается в визуал сайта.

✅ Формула идеального попапа: 

Показать вовремя + Дать пользу + Сделать просто + Оформить в своем стиле = Высокая конверсия

Типичные ошибки при настройке попапов#

Ошибка 1. Показывать окно сразу после загрузки страницы. Посетитель не успел изучить контент — дайте ему 20–30 секунд.

Ошибка 2. Перегруженный текст. Попап должен быть легким: один заголовок, одна кнопка.

Ошибка 3. Один попап для всех. Настраивайте разные окна для разных типов клиентов.

Чек-лист перед запуском попапа в Jivo#

Как понять, что ваш попап работает#

Проверяйте статистику в Jivo:

• CTR кнопки: 5–10% считается отличным.
• Рост конверсии сайта — значит, попап помогает продавать.
• Рост повторных визитов — клиенты возвращаются.

5 лайфхаков от Jivo для запуска эффективных попапов#

1️⃣ Один попап — одна цель. Не пытайтесь продавать и собирать e-mail одновременно. Каждое окно должно решать одну конкретную задачу — так выше конверсия.

2️⃣ Не мешайте пользователю. Показывайте окно только когда человек проявил интерес — задержался на странице, пролистал вниз или посмотрел несколько товаров.

3️⃣ Тестируйте тексты. Даже одно слово может изменить результат. Попробуйте разные варианты кнопки («Получить скидку» vs «Хочу скидку») — и выберите тот, что кликают чаще.

4️⃣ Добавьте «лицо» бренда. Фото менеджера, консультанта или просто дружелюбная иконка повышают доверие и вовлеченность. Люди охотнее общаются с людьми, а не с безликими окнами.

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

Попап как часть заботы о клиенте#

Современные попапы — это не раздражающие окна, а инструменты заботы о клиенте. С помощью Jivo Marketing можно за несколько минут создать всплывающее окно для сайта на Tilda, Битрикс, WordPress или HTML.