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

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

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

---

После установки в административной панели появится раздел Контент → Попапы. Здесь находится список всех окон с сортировкой, групповой активацией и удалением.

---

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

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

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

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

---

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

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

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

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

---

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

Большинство сайтов на 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), запись в инфоблок или передачу данных в стороннюю систему.

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

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