# Кастомизация in-app кампаний

Визуальный редактор in-app кампаний позволяет собрать сообщение для мобильного приложения без разработки нового экрана. На этой странице перечислены основные форматы, элементы и параметры кастомизации.

# Форматы показа

Формат в интерфейсе	Когда использовать
Snackbar	Короткое уведомление, промокод, сообщение после действия пользователя
Модальное окно	Важное сообщение, персональная акция, подтверждение действия
Bottom sheet	Нативное нижнее окно для промо, выбора, подсказки или вовлечения
Оверлей	Полноэкранный сценарий: onboarding, крупный оффер, важное объявление
Inline-блок	Контент внутри экрана приложения, например баннер или блок рекомендаций
Тултип	Подсказка около конкретного элемента интерфейса
JSON	Кастомные данные для headless/BDUI-сценариев без визуального конструктора

Визуальные форматы собираются из внешнего блока и элементов. Формат JSON не ограничен визуальным конструктором: приложение само интерпретирует полученные данные.

# Структура визуального блока

В интерфейсе визуальный in-app блок состоит из двух основных зон:

Зона в интерфейсе	Что настраивается
Внешний блок	Общий контейнер сообщения: фон, отступы, скругление, выравнивание, кнопка закрытия, настройки тултипа
Элементы	Содержимое сообщения: текст, кнопка, изображение, продукты, Webview и отступы

# Настройки контейнера

Контейнер управляет общей рамкой сообщения. Набор настроек зависит от формата показа.

Настройка в интерфейсе	Где используется	Описание
Цвет фона	Все визуальные форматы	Основной фон сообщения
Фоновое изображение	Все, кроме Snackbar	Изображение на фоне контейнера
Тип вписывания	Если используется фоновое изображение	Как изображение заполняет контейнер
Скругление углов	Все, кроме Оверлея	Радиус скругления контейнера
Выравнивание содержимого	Все, кроме Snackbar	Выравнивание элементов по горизонтали
Вертикальное выравнивание	Inline-блок, Оверлей, Тултип	Положение элементов по вертикали
Внутренние отступы	Все визуальные форматы	Расстояние от краёв контейнера до элементов
Высота	Inline-блок	Высота inline-блока
Внешние отступы	Inline-блок	Отступы inline-блока от соседних элементов экрана
Настройки тултипа	Только Тултип	Основная сторона, выравнивание вдоль стороны, переворот при нехватке места и зазор

У всех форматов, кроме Snackbar, может быть Кнопка закрытия. У Тултипа дополнительно может быть Стрелка.

# Элементы

# Текст

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

Настройка в интерфейсе	Описание
Текст	Содержание текстового элемента
Цвет текста	Цвет заголовка или описания
Размер текста	Размер шрифта
Толщина текста	Насыщенность шрифта: Thin, Regular, Medium, Semi Bold, Bold и другие варианты
Выравнивание	Положение текста: по левому краю, по центру или по правому краю
Ширина макета	На всю ширину или по содержимому
Внутренние отступы	Расстояние внутри текстового элемента
Внешние отступы	Расстояние от текста до соседних элементов
Действие	Опциональное действие при нажатии на текст

# Кнопка

Кнопка используется для CTA, переходов, копирования промокода, запроса push-разрешения или перехода к другому шагу.

Настройка в интерфейсе	Описание
Текст кнопки	Надпись на кнопке
Цвет фона	Основной цвет кнопки
Цвет при нажатии	Цвет кнопки в состоянии нажатия
Скругление углов	Радиус скругления кнопки
Ширина макета	На всю ширину или по содержимому
Размер	Размер кнопки, чаще всего высота
Внутренние отступы	Расстояние от текста до краёв кнопки
Внешние отступы	Расстояние от кнопки до соседних элементов
Размер текста	Размер текста внутри кнопки
Толщина текста	Насыщенность текста внутри кнопки
Цвет текста	Цвет текста внутри кнопки
Действие	Что произойдёт при нажатии

# Изображение

Изображение используется для баннеров, иллюстраций, иконок и визуальных акцентов.

Настройка в интерфейсе	Описание
URL изображения	Ссылка на изображение
Загрузить файл	Загрузка изображения через интерфейс
Предпросмотр	Проверка выбранного изображения
Размер	Ширина и высота изображения
Ширина макета	На всю ширину или по содержимому
Скругление углов	Радиус скругления изображения
Тип вписывания	Как изображение заполняет доступное место
Внешние отступы	Расстояние от изображения до соседних элементов
Действие	Опциональное действие при нажатии на изображение

# Отступ

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

# Продукты

Элемент «Продукты» используется для товарных блоков и рекомендаций.

Настройка в интерфейсе	Описание
Стратегия	Рекомендательная стратегия, по которой подбираются товары
Кол-во	Количество товаров в блоке
Тип макета	Строка или сетка
Колонки	Количество колонок в сетке
Горизонтальный отступ	Расстояние между товарами по горизонтали
Вертикальный отступ	Расстояние между товарами по вертикали
Внутренние отступы	Отступы внутри товарного блока
Размер	Размер контейнера, например высота блока

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

# Webview

Webview позволяет встроить web-контент внутрь in-app сообщения.

Настройка в интерфейсе	Описание
URL	Адрес страницы или webview-контента
Размер	Размер, чаще всего высота
Ширина макета	На всю ширину или по содержимому
Скругление углов	Радиус скругления webview
Внешние отступы	Расстояние от webview до соседних элементов

# Действия по клику

В интерфейсе действия задаются в настройке Действие.

Действие в интерфейсе	Дополнительная настройка	Описание
Закрыть	-	Закрыть in-app блок
Отменить	-	Отменить действие без перехода
Запросить push	-	Запросить разрешение на push-уведомления
Копировать	Данные для копирования	Скопировать текст, например промокод
Перейти по URL	URL	Открыть внешний URL
Перейти по диплинку	Диплинк	Перейти по deeplink внутри приложения
Перейти на след. шаг	Перейти на шаг	Открыть другой шаг сценария

Для Кнопки закрытия доступно только действие Закрыть.

# Шаблоны Snackbar

Для Snackbar доступны два шаблона: Snackbar 1 и Snackbar 2. В обоих шаблонах заголовок обязателен, остальные элементы можно добавлять или удалять.

Шаблон в интерфейсе	Состав
Snackbar 1	Левая иконка, заголовок, подзаголовок, правая иконка
Snackbar 2	Левая иконка, заголовок, подзаголовок, кнопка действия

Если нужен CTA, используйте Snackbar 2 с Кнопкой действия.

# Значения в интерфейсе

Настройка	Доступные варианты
Цвет	Цвет в формате hex, например `#FFFFFF` или `#FFFFFFFF`
Размер	Значение в пикселях
Внутренние и внешние отступы	Верх, низ, лево, право
Позиция	Верхний левый, верхний правый, нижний левый, нижний правый
Выравнивание	Начало, центр, конец; для текста - по левому краю, по центру, по правому краю
Вертикальное выравнивание	Верх, центр, низ
Ширина макета	На всю ширину, по содержимому
Тип вписывания	Покрыть, содержать, заполнить
Толщина текста	Thin / Hair, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold, Black / Heavy / Ultra
Тип макета товаров	Строка, сетка
Основная сторона тултипа	Сверху, снизу, слева, справа