# Кастомизация 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 |
| Тип макета товаров | Строка, сетка |
| Основная сторона тултипа | Сверху, снизу, слева, справа |

## Связанные материалы

- [Кампании в приложении: начало работы](./getting_started.md)
- [Flutter SDK](/Integration/SDK/ask_flutter.md)
- [Android SDK](/Integration/SDK/sdk_android.md)
- [iOS SDK](/Integration/SDK/sdk_ios.md)
- [Headless-режим с Flutter SDK](/Integration/SDK/flutter_headless_guide.md)
- [Backend-Driven UI с Flutter SDK](/Integration/SDK/flutter_bdui_guide.md)