Промпты для генерации модальных окон

Готовые промпты для популярных типов модальных окон. Скопируйте промпт из нужного блока, при необходимости подставьте свои данные (название бренда, цвета, ссылки) и передайте в любую нейросеть. Полученный HTML сразу подходит для вставки в поле «Шаблон» при создании попапа.

Проверенные нейросети

Промпты тестировались и стабильно дают рабочий результат в Claude, ChatGPT и Gemini. С другими моделями (YandexGPT, GigaChat, DeepSeek и прочими) промпты не проверялись — результат может отличаться, потребуется ручная доработка.

---

Как пользоваться промптами

Каждый промпт уже содержит все технические требования к шаблону для модуля Octopus CDP Popup: инлайн-стили, кнопку закрытия с data-close, уникальные id с префиксом popup_, скрытие формы и показ блока «Спасибо!» после отправки.

Перед тем как отправить промпт нейросети, определитесь с обработкой формы — она настраивается в одном месте промпта:

Вариант	Когда использовать	Что подставить в промпт
Octopus CDP	Сайт подключён к Octopus CDP	Код цели из настроек Octopus CDP — например, subscribe_popup
PHP-обработчик Битрикс	Свой серверный обработчик	Путь к вашему AJAX-файлу — например, /local/ajax/popup_subscribe.php

💡 Совет: Если не уверены, какой обработчик нужен — начните с PHP-обработчика на стороне Битрикс. Его подключение описано в разделе Установка и настройка.

---

Дизайн и оформление

Голый промпт без указания стилистики даст обобщённый «средний» дизайн — серый фон, чёрная кнопка, стандартный шрифт. Чтобы попап выглядел частью вашего сайта, передайте нейросети ваш стиль одним из двух способов.

Способ 1. Описать стилистику текстом

Подходит, если вы знаете фирменные цвета и шрифты бренда. В каждом промпте есть блок «Стилистика» — замените дефолтное описание на своё. Что полезно указать:

• Цветовая палитра — основной фон, акцентный цвет кнопки, цвет текста. Лучше всего hex-кодами: #F3F3F1, #D0B484, #2D222E.
• Шрифты — название и характер: Manrope, sans-serif, современный или AlethiaPro, serif, премиальный.
• Скругления — насколько острые или мягкие углы: 2px — почти острые, 8px — умеренные, 16px — мягкие.
• Общий тон — премиально / дружелюбно / технично / минималистично / эмоционально.
• Референс — название бренда с похожей эстетикой: в духе Apple, как у Bang & Olufsen, минимализм Aesop.

Пример хорошего описания: «Премиум-ритейл, тёплая палитра (фон #F3F3F1, акцент #D0B484, текст #2D222E), шрифт с засечками, скругления 2px, спокойный тон без агрессивных призывов».

Способ 2. Приложить скриншоты сайта

Подходит, если фирстайла на руках нет, но есть сам сайт. Claude, ChatGPT и Gemini умеют анализировать изображения — извлекут палитру, шрифты, скругления и общий характер дизайна.

Что приложить к запросу вместе с промптом:

• Главную страницу — общий тон, шапка, типография, фоновые цвета.
• Карточку товара или страницу услуги — формы, кнопки, акценты.
• Опционально: страницу с уже существующей формой (корзина, контакты) — чтобы попап стилистически совпадал с остальными формами сайта.

Достаточно 2–3 скриншотов. Снимать лучше с десктопа в обычном масштабе (без зума), формат PNG или JPG.

💡 Совет: Если результат всё равно «не попадает» в стиль — отправьте нейросети тот же промпт с уточнением: «попап получился слишком ярким/тёмным/блёклым по сравнению с сайтом на скриншотах, доработай». Обычно 1–2 итераций хватает, чтобы выйти на нужный вид.

Как это работает в промптах

В каждом промпте ниже есть блок «Стилистика» с двумя вариантами:

• А — нейросеть берёт дизайн из приложенных скриншотов.
• Б — нейросеть использует ваше текстовое описание (или дефолтное, если ничего не подставили).

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

---

Подписка на email-рассылку

Классическая форма подписки с полями «Имя» и «Email». Используется для регулярных рассылок: дайджесты, анонсы, контент-маркетинг. Конверсия выше, если в офере чётко указана частота писем и их польза.

📋 Показать промпт

Создай HTML-шаблон модального окна для подписки на email-рассылку.

Технические требования к шаблону:
- Только содержимое окна — без overlay/затемнения (модуль добавит сам).
- Максимальная ширина окна 480–520px, центрирование по горизонтали через margin: 0 auto.
- Все стили инлайн (style="..."), никаких внешних классов и CSS-файлов.
- Кнопка закрытия с атрибутом data-close в правом верхнем углу.
- Все id и классы с префиксом popup_ для уникальности.
- Поля формы: NAME (имя) и EMAIL (email). Валидация email обязательна.
- После отправки скрыть форму и показать блок «Спасибо!».
- Внутри шаблона JS пиши в стиле ES5 без стрелочных функций и без TypeScript.

Содержание:
- Заголовок: «Подпишитесь на рассылку»
- Описание: 1–2 предложения о том, какие письма получит подписчик и как часто
- Кнопка: «Подписаться»
- Под кнопкой — мелким шрифтом дисклеймер о согласии на обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Octopus CDP. После валидации вызови:
   window.oct_goal('subscribe_popup', { update: { NAME: имя, EMAIL: email } });
Б) Через PHP-обработчик Битрикс. После валидации отправь:
   fetch('/local/ajax/popup_subscribe.php', {
     method: 'POST',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     body: 'NAME=' + encodeURIComponent(name) + '&EMAIL=' + encodeURIComponent(email)
   })
   и при ответе { status: 'ok' } покажи блок «Спасибо!».

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки из них цветовую палитру, типографику, скругления и общий тон, примени к шаблону.
Б) Используй описание: минимализм, светлый фон, скруглённые углы 4–8px, акцентная кнопка. Подбери цвета и шрифты на свой вкус, чтобы выглядело премиально.

---

Скидка или промокод за подписку

Самый конверсионный сценарий: посетитель оставляет email в обмен на скидку или промокод. Хорошо работает на первом визите. Промокод можно показывать прямо в окне после отправки формы или присылать на email.

📋 Показать промпт

Создай HTML-шаблон модального окна с предложением скидки за подписку.

Технические требования к шаблону:
- Только содержимое окна — без overlay/затемнения.
- Максимальная ширина 480–520px, центрирование через margin: 0 auto.
- Все стили инлайн, никаких внешних классов.
- Кнопка закрытия с атрибутом data-close в правом верхнем углу.
- Все id и классы с префиксом popup_.
- Поле формы: EMAIL. Валидация обязательна.
- После отправки скрыть форму и показать блок с промокодом крупным шрифтом и кнопкой «Скопировать».
- JS в стиле ES5 без стрелочных функций.

Содержание:
- Крупный заголовок с размером скидки: «Скидка 10% на первый заказ»
- Подзаголовок: «Оставьте email — пришлём промокод и расскажем о новинках»
- Кнопка: «Получить скидку»
- Блок успеха: «Ваш промокод: WELCOME10» + кнопка «Скопировать» (копирует код в буфер обмена через navigator.clipboard)
- Дисклеймер мелким шрифтом про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Octopus CDP: window.oct_goal('discount_popup', { update: { EMAIL: email } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_subscribe.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону. Размер скидки — главный акцент.
Б) Используй описание: яркий акцент на размере скидки, контрастная кнопка призыва. Цвета и шрифты подбери на свой вкус.

---

Лид-магнит — скачать гайд за email

Подписка в обмен на полезный контент: PDF-гайд, чек-лист, шаблон, презентация. Подходит для B2B и информационных сайтов, где аудитория ценит экспертный контент.

📋 Показать промпт

Создай HTML-шаблон модального окна с предложением скачать материал за email.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина 480–520px, центрирование через margin: 0 auto.
- Все стили инлайн.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поле формы: EMAIL, валидация обязательна.
- После отправки автоматический запуск скачивания файла по ссылке https://example.com/guide.pdf (открыть в новой вкладке) и показ блока «Спасибо!».
- JS в стиле ES5.

Содержание:
- Иконка или изображение обложки гайда слева, текст справа (на мобильных — друг под другом)
- Заголовок: «Скачайте бесплатный гайд»
- Краткое описание: что внутри (3 буллета или 1–2 предложения)
- Кнопка: «Скачать»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Octopus CDP: window.oct_goal('leadmagnet_popup', { update: { EMAIL: email } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_subscribe.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: спокойный экспертный тон, без агрессивных акцентов. Цвета и шрифты подбери на свой вкус.

---

Заявка на обратный звонок

Форма для услуг и B2B: посетитель оставляет имя и телефон, менеджер перезванивает. Используется на лендингах, страницах услуг и в карточках товаров с консультацией.

📋 Показать промпт

Создай HTML-шаблон модального окна с заявкой на обратный звонок.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина 460–500px, центрирование через margin: 0 auto.
- Все стили инлайн.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поля формы: NAME (имя), PHONE (телефон с маской +7 (___) ___-__-__).
- Валидация: имя не пустое, телефон содержит минимум 10 цифр.
- После отправки скрыть форму и показать блок «Спасибо! Мы перезвоним в течение 15 минут».
- JS в стиле ES5.

Содержание:
- Заголовок: «Заказать обратный звонок»
- Подзаголовок: «Перезвоним в течение 15 минут в рабочее время»
- Кнопка: «Перезвоните мне»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Octopus CDP: window.oct_goal('callback_popup', { update: { NAME: имя, PHONE: телефон } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_callback.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: деловая, спокойная стилистика, акцент на скорости ответа. Цвета и шрифты подбери на свой вкус.

---

Удержание уходящего посетителя

Окно показывается, когда курсор уходит в верхнюю область браузера (намерение закрыть вкладку). Цель — дать посетителю последний оффер: скидку, промокод или подписку. В модуле условие настраивается отдельно — само окно по содержанию аналогично окну со скидкой, но с другим заголовком.

📋 Показать промпт

Создай HTML-шаблон модального окна для удержания уходящего посетителя.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина 500–540px, центрирование через margin: 0 auto.
- Все стили инлайн.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поле формы: EMAIL, валидация обязательна.
- После отправки скрыть форму и показать промокод крупным шрифтом + кнопку «Скопировать».
- JS в стиле ES5.

Содержание:
- Эмоциональный заголовок: «Подождите!» или «Не уходите без подарка»
- Подзаголовок: «Оставьте email и получите скидку 15% на любой заказ»
- Кнопка: «Хочу скидку»
- Вторая ссылка-кнопка «Нет, спасибо» — с атрибутом data-close
- Блок успеха: «Ваш промокод: BACK15» + «Скопировать»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Octopus CDP: window.oct_goal('exit_intent_popup', { update: { EMAIL: email } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_subscribe.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону. Допусти чуть более эмоциональный акцент.
Б) Используй описание: чуть более эмоциональная стилистика, акцент на «последнем шансе», но без агрессии. Цвета и шрифты подбери на свой вкус.

---

Уведомление о поступлении товара

Форма для карточек товаров «Нет в наличии»: посетитель оставляет email, чтобы получить уведомление, когда товар появится. Также удобно использовать для предзаказов и ожидаемых новинок.

📋 Показать промпт

Создай HTML-шаблон модального окна для подписки на уведомление о поступлении товара.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина 440–480px, центрирование через margin: 0 auto.
- Все стили инлайн.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поле формы: EMAIL, валидация обязательна.
- Скрытое поле PRODUCT_ID (заполняется JS со значением data-атрибута на странице, оставь TODO в коде).
- После отправки скрыть форму и показать блок «Сообщим, как только товар появится».
- JS в стиле ES5.

Содержание:
- Заголовок: «Сообщить о поступлении»
- Подзаголовок: «Оставьте email — пришлём письмо, когда товар снова появится в наличии»
- Кнопка: «Сообщить мне»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Octopus CDP: window.oct_goal('restock_popup', { update: { EMAIL: email, PRODUCT_ID: productId } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_restock.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: лаконично, без акций и распродажных акцентов. Цвета и шрифты подбери на свой вкус.

---

Подтверждение возраста 18+

Окно без формы — две кнопки «Да, мне 18» и «Нет». При отказе посетитель уходит на внешнюю страницу. Используется для сайтов с алкоголем, табаком и другим контентом с возрастным ограничением.

📋 Показать промпт

Создай HTML-шаблон модального окна для подтверждения возраста 18+.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина 440–480px, центрирование через margin: 0 auto.
- Все стили инлайн.
- Никаких полей формы — только две кнопки.
- id и классы с префиксом popup_.
- JS в стиле ES5.

Содержание:
- Крупный заголовок: «Вам исполнилось 18 лет?»
- Подзаголовок: «Сайт содержит информацию, не предназначенную для лиц младше 18 лет»
- Две кнопки:
  - «Да, мне есть 18» — устанавливает cookie age_confirmed=1 на 30 дней, закрывает попап (имеет data-close)
  - «Нет» — делает window.location.href = 'https://ya.ru' (редирект)

Обработка кнопки «Да»: записать cookie стандартным способом через document.cookie без сторонних библиотек.
Кнопка «Нет» обработчиков формы НЕ требует — попап для возрастного подтверждения не отправляет данные.

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: строгая, нейтральная стилистика, без визуальных украшений. Цвета и шрифты подбери на свой вкус.

---

Информационный баннер акции

Окно без формы — рассказывает об акции, распродаже или новой коллекции и ведёт на страницу с подробностями. Подходит для запуска новых продуктов, сезонных распродаж, события Чёрной Пятницы.

📋 Показать промпт

Создай HTML-шаблон модального окна — информационный баннер акции.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина 500–560px, центрирование через margin: 0 auto.
- Все стили инлайн.
- Кнопка закрытия с атрибутом data-close.
- Никаких полей формы.
- id и классы с префиксом popup_.

Содержание:
- Большое баннер-изображение сверху (заглушка https://via.placeholder.com/560x280)
- Заголовок акции: «Чёрная пятница: скидки до 50%»
- Короткий подзаголовок: «Только до 30 ноября»
- Кнопка-ссылка «Смотреть акцию» — ведёт на https://example.com/sale, открывает в текущей вкладке
- Под кнопкой ссылка-текст «Может быть позже» с атрибутом data-close

Обработка отправки формы НЕ требуется — это информационный баннер без сбора данных.

Опционально: добавь таймер обратного отсчёта до даты окончания акции (DD дней HH:MM:SS), реализуй через setInterval в стиле ES5.

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону. Размер скидки — главный акцент.
Б) Используй описание: яркая, контрастная стилистика с акцентом на цифрах скидки. Цвета и шрифты подбери на свой вкус.

---

Доработка готового шаблона

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

📋 Показать промпт

Вот HTML-шаблон модального окна для модуля Octopus CDP Popup:

[вставь сюда текущий HTML]

Доработай его:
- Сохрани всю функциональность: data-close, валидацию, вызов обработчика, блок «Спасибо!».
- Сохрани все id и атрибуты name у полей формы — они используются обработчиком.
- Все стили оставь инлайн, не добавляй внешние CSS-файлы.

Примени новую стилистику — выбери ОДИН источник:
А) Скриншоты сайта приложены к запросу — извлеки из них палитру, шрифты, скругления, общий тон и примени к шаблону.
Б) Текстовое описание: [опиши — например, «тёмная тема, акцентный цвет #FF6B35, шрифт Manrope, скругления 4px»].

---

💡 Совет: Если сгенерированный нейросетью шаблон ведёт себя странно — например, попап показывается «голым» без затемнения или со сбитым позиционированием — скорее всего, нейросеть добавила в шаблон собственный overlay. Удалите внешний контейнер с position: fixed и background: rgba(...) — модуль добавляет затемнение сам.