Другие модули на выбор

Всплывающие окна - Попап | Гибкая настройка и персонализация | интеграция с Октопус CDP

Стоимость: руб.
Этот компонент мы сможете использовать только при наличии лицензии. Подходящие редакции:

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

💡 Нужна консультация и помощь по работе?
Установка
  1. Нажмите зелёную кнопку «Установить» на странице модуля и следуйте инструкции на стороне 1С-Битрикс Marketplace.
  2. Битрикс автоматически скачает и установит модуль — таблица в базе данных и обработчик событий создаются без дополнительных действий.

Альтернативно установить модуль можно прямо из административной панели: Настройки → Настройки продукта → Marketplace → Каталог решений, введите в поиске "Всплывающие окна - Попап", откройте карточку и нажмите Установить бесплатно.

---

Где находится модуль

После установки в административной панели появится раздел Маркетинг → Всплывающие окна.

---

Создание попапа

Нажмите + Добавить попап и заполните две вкладки:

Вкладка «Шаблон» — название попапа и его HTML-код (см. раздел ниже).

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

Нажмите Сохранить — попап начнёт показываться на сайте согласно заданным условиям.

---

Как составить шаблон

Шаблон - это обычный HTML, который модуль вставляет в страницу и оборачивает в затемнённую подложку с центрированием. Поэтому в шаблоне нужно описывать только содержимое самого окна — фон, overlay и позиционирование добавлять не нужно.

Рекомендации:

  • Используйте инлайн-стили (style="..." прямо на элементах). Это исключает конфликты со стилями сайта.
  • Закрытие окна — любой элемент с атрибутом data-close закрывает попап по клику. Достаточно повесить его на кнопку «×» или фон.
  • Уникальные id и классы — давайте элементам уникальные имена (например, с префиксом popup_), чтобы не пересекаться с разметкой страницы.
  • Скрипты работают — теги <script> внутри шаблона выполняются корректно. В них удобно делать валидацию полей, отправку формы и показ сообщения об успехе.

После отправки формы удобно скрыть поля и показать блок «Спасибо!» — этот приём можно использовать в любом своём шаблоне.

---

Обработка формы

Сам модуль форму не обрабатывает — он только показывает HTML. Логику отправки вы задаёте внутри шаблона. Есть два пути.

Вариант 1. PHP-обработчик на стороне Битрикс (по умолчанию)

Большинство сайтов на 1С-Битрикс обрабатывают формы своим серверным скриптом: данные уходят AJAX-запросом в PHP-файл, который средствами Битрикса отправляет письмо (CEvent::Send), создаёт лид в CRM или пишет в инфоблок.

Создайте файл, например /local/ajax/popup_subscribe.php:

php <?php define('STOP_STATISTICS', true); require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php'); use Bitrix\Main\Context; use Bitrix\Main\Web\Json; header('Content-Type: application/json; charset=utf-8'); $request = Context::getCurrent()->getRequest(); $name = trim((string)$request->getPost('NAME')); $email = trim((string)$request->getPost('EMAIL')); if ($name === '' || !check_email($email)) { echo Json::encode(['status' => 'error']); die(); } // Отправка письма через стандартный почтовый шаблон Битрикс. // Тип почтового события (здесь FEEDBACK_FORM) и шаблон письма // должны существовать в Настройки → Настройки продукта → Почтовые события. CEvent::Send('FEEDBACK_FORM', SITE_ID, [ 'AUTHOR' => $name, 'AUTHOR_EMAIL' => $email, 'TEXT' => 'Подписка через всплывающее окно', ]); echo Json::encode(['status' => 'ok']); die();

В шаблоне попапа отправьте данные на этот файл:

js fetch('/local/ajax/popup_subscribe.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'NAME=' + encodeURIComponent(name) + '&EMAIL=' + encodeURIComponent(email) }) .then(function (r) { return r.json(); }) .then(function (data) { if (data.status === 'ok') { // скрыть поля и показать блок «Спасибо!» } }) .catch(function () { /* ошибка сети */ });

Вместо CEvent::Send в обработчике можно использовать любой привычный способ: создание лида в CRM (CCrmLead::Add), запись в инфоблок или передачу данных в стороннюю систему.

Вариант 2. Интеграция с Octopus CDP

Если сайт подключён к Octopus CDP, форму можно не заводить на сервере — достаточно вызвать oct_goal(). Метод фиксирует цель и обновляет профиль клиента переданными полями:

js window.oct_goal('goal_name', { update: { NAME: name, EMAIL: email } });