# Создание In-App сообщений во встроенном редакторе

Создайте шаблон In-App сообщения во встроенном редакторе Pushwoosh без написания кода. Вы получите многоразовый макет с блоками контента, изображениями, кнопками и персонализированным текстом, который можно будет показывать в Customer Journey, как разовое In-App сообщение или из push-уведомления.

<Aside type="note">
Прежде чем начать, интегрируйте Pushwoosh SDK, чтобы In-App сообщения могли появляться в вашем приложении. [Узнать больше](/ru/product/messaging-channels/in-apps/)
</Aside>

## Создание нового шаблона In-App

Шаблон In-App — это многоразовый дизайн, который вы создаете один раз, а затем показываете пользователям в кампаниях. Вы можете создать его, загрузив собственный HTML ZIP-архив или собрав его во встроенном редакторе. В этой статье рассматривается создание шаблона с нуля во встроенном редакторе. Следуйте этим же шагам для настройки существующего шаблона.

1. Перейдите в **Контент** → **In-apps**.
2. Нажмите **Добавить шаблон**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="Страница «Контент → In-apps» с кнопкой «Добавить шаблон» в правом верхнем углу списка шаблонов"/>

3. Введите название шаблона.
4. Выберите способ создания шаблона:
   * **Загрузить ZIP:** [загрузите ZIP-файл](/ru/developer/guides/content/rich-media-templates-syntax) с вашим HTML In-App сообщением.
   * **Создать новый шаблон:** соберите шаблон во встроенном редакторе.
5. Выберите **Создать новый шаблон**.
6. Нажмите **Добавить шаблон**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="Форма нового шаблона с полем для названия, опцией «Загрузить ZIP» и выбранной опцией «Создать новый шаблон»"/>


### Изучение интерфейса редактора

Встроенный редактор состоит из четырех областей. Каждая из них имеет свое четкое предназначение.

**Верхняя панель**

Используйте верхнюю панель, чтобы переименовать шаблон, отменить ошибки, сохранить работу или открыть **Настройки In-App**, когда нужно изменить, как сообщение отображается на устройстве. См. [Настройка внешнего вида In-App на устройстве](#configure-how-the-in-app-looks-on-device).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="Верхняя панель редактора In-App с названием шаблона, кнопками «Отменить», «Повторить», «Настройки In-App» и «Сохранить»"/>

**Холст**

Используйте холст, чтобы видеть сообщение таким, каким его увидят пользователи, и редактировать текст, изображения и кнопки прямо на макете. Пустой шаблон показывает **Начните с блока**. Над холстом переключатель телефон/планшет изменяет ширину предварительного просмотра — это не меняет ваш макет, а только ширину экрана, на котором вы его просматриваете.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="Пустой холст в редакторе In-App с подсказкой «Начните с блока» в центре" width="480"/>

**Слои**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="Панель «Слои», отображающая в виде дерева блоки «Карточка», «Изображение», «Заголовок», «Текст», «Таймер», «Кнопки» и «Футер»"/>

**Правая панель**

Используйте **Блоки** на правой панели для добавления контента в сообщение и **Настройки**, когда хотите применить стили ко всему шаблону сразу. См. [Настройка стилей для всего шаблона](#configure-template-wide-styling).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="Вкладка «Блоки» на правой панели с блоками контента «Заголовок», «Текст», «Кнопка», «Изображение» и другими" width="320"/>

### Начало сборки шаблона

После создания шаблона редактор открывается с пустым холстом и вкладкой **Блоки** справа.

1. Перетащите блок с панели **Блоки** на холст или нажмите на блок на панели, чтобы добавить его.
2. Продолжайте добавлять блоки таким же образом, пока макет не будет готов.
3. Откройте вкладку **Настройки**, когда вам понадобятся стили для всего шаблона.


<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="Пустой редактор In-App с надписью «Начните с блока» на холсте и открытой панелью «Блоки»"/>

### Добавление блоков контента

Блоки контента — это строительные элементы шаблона In-App во встроенном редакторе. Вы комбинируете заголовки, текст, изображения, кнопки и другие блоки в один макет.

Откройте вкладку **Блоки** и перетащите блок на холст или нажмите на блок, чтобы добавить его. Доступные блоки:

* **[Заголовок](#heading-and-text):** заголовки и короткие подзаголовки в сообщении
* **[Текст](#heading-and-text):** основной текст и длинные описания
* **[Кнопка](#button):** кликабельный призыв к действию
* **[Изображение](#image):** картинки из [Медиахранилища](/ru/product/content/media-store/), загруженные или по URL
* **[Разделитель](#divider):** линия, визуально разделяющая секции
* **[2 колонки](#columns):** две равные колонки рядом
* **[3 колонки](#columns):** три равные колонки рядом
* **[4 колонки](#columns):** четыре равные колонки рядом
* **[33 / 67](#columns):** две колонки, где левая занимает около 33% ширины, а правая — около 67%
* **[67 / 33](#columns):** две колонки, где левая занимает около 67% ширины, а правая — около 33%
* **[Таймер](#countdown-timer):** обратный отсчет для предложений и сроков
* **[Меню](#menu):** ряд или колонка ссылок, например, навигация или контакты
* **[Соцсети](#social):** иконки со ссылками на ваши профили в социальных сетях
* **[HTML](#html):** пользовательский HTML, например, форма или встроенное видео

### Заголовок и текст

Блоки **Заголовок** и **Текст** содержат текст, который пользователи читают в In-App сообщении. Редактируйте текст на холсте и форматируйте его с помощью панели инструментов.

Нажмите на блок **Заголовок** или **Текст**, чтобы отредактировать его содержимое на холсте. Выделите часть текста, чтобы появилась панель форматирования: полужирный, курсив, подчеркнутый, выравнивание, кнопка ссылки и выпадающий список **стилей текста**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="Выбранный на холсте блок «Заголовок» с панелью форматирования текста, показывающей опции стиля и форматирования"/>

Merge Tags — это плейсхолдеры, которые вставляют значение [тега (Tag)](/ru/product/audience-data-and-segmentation/user-data-tags/tags/) из профиля пользователя в сообщение, чтобы каждый подписчик видел персонализированный текст. Чтобы добавить его, выделите текст, нажмите **Merge Tags** на панели инструментов и выберите тег из вашего аккаунта. [Узнайте больше о персонализированных In-App сообщениях](/ru/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


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

Блок **Изображение** отображает картинку в шаблоне In-App. Выберите его на холсте, чтобы открыть настройки **Изображения** на правой панели.

* **Добавить изображение** / **Заменить изображение:** нажмите **Добавить изображение**, когда блок пуст, или **Заменить изображение**, когда картинка уже установлена. Вы можете загрузить файл или выбрать его из вашего [Медиахранилища](/ru/product/content/media-store/).
* **URL изображения:** вставьте ссылку на размещенное изображение.
* **Alt текст:** опишите изображение для доступности.
* **URL ссылки:** откройте веб-сайт при нажатии на изображение.
* **Цель ссылки:** откройте ссылку в той же вкладке или в новой.
* **Файл:** после добавления изображения показывает путь к используемому файлу.

В разделе **Отступы** включите **Внутренний отступ**, чтобы добавить пространство вокруг изображения. Используйте **Все стороны** для одинакового отступа с каждой стороны или включите **Больше опций**, чтобы установить каждую сторону отдельно.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="Пустой блок «Изображение» на холсте с настройками изображения, показывающими «Добавить изображение», «URL изображения», «Alt текст», «URL ссылки» и «Отступы»" width="600"/>

### Кнопка

**Кнопка** — это кликабельный призыв к действию в In-App сообщении. Используйте ее, чтобы открыть URL, запустить пользовательский JavaScript или закрыть сообщение.

Нажмите на блок **Кнопка**, чтобы отредактировать его надпись на холсте. Используйте панель инструментов для изменения размера шрифта, цвета текста, полужирного, курсивного, подчеркнутого начертания и выравнивания.

Чтобы настроить, что происходит при нажатии пользователем на кнопку:

1. Нажмите на иконку ссылки на панели инструментов, чтобы открыть **Вставить/Редактировать ссылку**.
2. Выберите **Тип действия**.
3. Заполните поля для этого действия (см. ниже).
4. Нажмите **Сохранить**.

#### Открыть веб-сайт

**Открыть веб-сайт** открывает ссылку, когда пользователь нажимает на кнопку. Введите адрес в поле **URL**. Что можно ввести:

* Веб-сайт: `https://example.com`
* Ссылка на приложение, которая открывает экран внутри вашего приложения: `myapp://promo`
* Закрыть In-App без JavaScript: `pushwoosh://close`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="Диалоговое окно «Вставить/Редактировать ссылку» для кнопки с типом действия «Открыть веб-сайт» и полем URL"/>

#### Запустить пользовательский JavaScript

**Пользовательский Javascript** запускает код, когда пользователь нажимает на кнопку. Введите код в поле **onClick**.

Используйте его, когда нажатие должно выполнить какое-то действие в Pushwoosh, а не просто открыть ссылку. Человек в приложении по-прежнему видит обычную кнопку. Он не видит теги или события. Вы решаете, что произойдет на экране дальше: оставить сообщение открытым или закрыть его в том же **onClick**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="Диалоговое окно «Вставить/Редактировать ссылку» для кнопки с типом действия «Пользовательский Javascript» и onClick, установленным на closeInApp"/>

**Доступные методы в onClick**

* `pushwoosh.closeInApp()`: закрыть In-App сообщение. Опустите его, чтобы сообщение осталось открытым после нажатия.
* `pushwoosh.sendTags({...})`: сохранить значения как [теги устройства](/ru/product/audience-data-and-segmentation/user-data-tags/tags/) для последующих кампаний.
* `pushwoosh.postEvent(...)`: отправить [пользовательское событие](/ru/product/audience-data-and-segmentation/events/custom-events/), например, для запуска Customer Journey.
* `pushwoosh.getTags(...)`: прочитать текущие теги. Полезно в пользовательском HTML для изменения того, что показывает сообщение.
* `pushwoosh.getCustomData()`: прочитать пользовательские данные, переданные из push-уведомления, которое открыло это In-App сообщение.

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

1. Добавьте вопрос в блок **Текст** или **Заголовок**, например: «Каким спортом вы увлекаетесь?»
2. Добавьте по одной **Кнопке** на каждый вариант, например: **Йога** и **Тренажерный зал**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="Шаблон In-App с кнопками «Йога» и «Тренажерный зал» и Custom Javascript onClick для кнопки «Йога»"/>

3. Установите **Тип действия** на **Пользовательский Javascript** для каждой кнопки.
4. Для кнопки **Йога** вставьте это в **onClick**:

```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```

5. Для кнопки **Тренажерный зал** вставьте это в **onClick**:

```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```


Когда пользователь нажимает **Йога**, Pushwoosh записывает тег `interest` на его устройство и закрывает In-App. Затем вы можете таргетировать этого пользователя в [сегменте](/ru/product/audience-data-and-segmentation/segmentation/) или [Customer Journey](/ru/product/customer-journey/journey-elements/#in-app).

<LinkCard title="Узнайте больше о том, как создавать In-App сообщения с помощью JavaScript" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### Разделитель

**Разделитель** — это горизонтальная линия между блоками контента. Используйте ее для визуального разделения секций в шаблоне.

Настройте **стиль линии** (Сплошная, Пунктирная, Точечная), **цвет**, **толщину** и **ширину** на панели настроек.

### HTML

Блок **HTML** позволяет вставлять пользовательский HTML в шаблон In-App. Используйте его для пользовательской формы, опроса или встроенного видео, когда нет специального блока «Форма» для In-App сообщений.


##### Примеры

Примеры ниже показывают распространенные способы использования блока HTML в шаблоне In-App: форма для сбора лидов, опрос и встроенное видео.

<Aside type="note">
Примеры с формой и опросом сохраняют теги устройства и отправляют события через Pushwoosh. Создайте пользовательские события в своем аккаунте, прежде чем использовать их в кампаниях.
</Aside>

<Tabs>
<TabItem label="Форма для лидов">

Эта форма для сбора лидов записывает имя и email как теги, отправляет событие `promo_requested`, показывает сообщение с благодарностью, а затем закрывает In-App.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="HTML-форма для лидов в редакторе In-App с полями для имени и email и кнопкой «Отправьте мне код»" width="360"/>

<details>
<summary>HTML-код</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="Опрос">

Этот опрос сохраняет выбранное время тренировки как тег, отправляет событие `schedule_survey_completed`, показывает сообщение с благодарностью, а затем закрывает In-App.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="HTML-опрос в редакторе In-App, спрашивающий, когда пользователь предпочитает тренироваться, с четырьмя вариантами времени" width="360"/>

<details>
<summary>HTML-код</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="Видео">

Этот пример встраивает видео с YouTube в In-App сообщение.

<details>
<summary>HTML-код</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>
```


</details>

</TabItem>
</Tabs>



### Меню

Блок **Меню** размещает несколько кликабельных элементов в ряд или столбец. Используйте его для навигационной панели или списка контактов компании.

Для каждого элемента меню установите:

* **Надпись:** текст, который видят пользователи
* **URL:** куда ведет элемент
* **Цель:** та же вкладка или новая вкладка

В настройках блока вы также можете установить:

* **Направление:** Горизонтальное или Вертикальное
* **Выравнивание:** Слева, По центру или Справа
* **Разделитель:** необязательный разделитель между элементами
* Шрифт, размер, начертание, межбуквенный интервал и цвета ссылок/текста

### Соцсети

Блок **Соцсети** отображает ряд иконок социальных сетей, которые ссылаются на ваши профили. Используйте его, чтобы направлять пользователей на Facebook, Instagram, X и другие платформы из In-App сообщения.

Добавьте записи для платформ, затем установите выравнивание, размер иконок и расстояние между ними.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="Настройки блока «Соцсети» со ссылками на TikTok, Instagram и Facebook, а также с опциями «Выравнивание», «Размер иконок» и «Расстояние»" width="320"/>

### Таймер обратного отсчета

Блок **Таймер** — это обратный отсчет в In-App сообщении. Используйте его для ограниченных по времени предложений, срочных распродаж и напоминаний о событиях.

Чтобы его настроить:

1. В разделе **Обратный отсчет** установите **Дату окончания** и **Время окончания**, затем выберите **Часовой пояс** и **Язык** для надписей таймера.
2. Включите **Надписи**, чтобы показывать подписи «дни / часы / минуты / секунды» под цифрами, или выключите для отображения только чисел.
3. В разделе **Внешний вид** установите **Фон**, **Цвет цифр**, **Цвет надписей** и размер шрифта для цифр (по умолчанию 40px) и надписей (по умолчанию 16px).
4. При необходимости настройте **Отступы** (внутренние отступы).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="Настройки блока «Таймер» с датой и временем окончания обратного отсчета, надписями, внешним видом и опциями отступов"/>

### Колонки

**Колонки** разделяют холст на расположенные рядом секции, чтобы вы могли размещать контент друг с другом в одном ряду.

Перетащите один из этих блоков на холст:

* **2 колонки:** две равные колонки
* **3 колонки:** три равные колонки
* **4 колонки:** четыре равные колонки
* **33 / 67:** левая колонка шириной около 33%, правая — около 67%
* **67 / 33:** левая колонка шириной около 67%, правая — около 33%

Затем добавьте контент в каждую колонку. Чтобы изменить отступы для всех колонок в шаблоне, откройте **Настройки** → **Настройки колонок по умолчанию** и настройте внешние отступы, внутренние отступы колонок и расстояние между колонками.

## Настройка стилей для всего шаблона

Настройки шаблона управляют стилями для всего In-App шаблона: размер и фон документа, внешний вид всплывающего окна и стили по умолчанию для блоков.

Откройте вкладку **Настройки** на правой панели.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="Вкладка «Настройки» с разделами «Документ», «Всплывающее окно» и разделами стилей по умолчанию для блоков и колонок" width="320"/>

Доступные разделы:

* **Документ:** размер и внешний вид всей области сообщения: ширина, внутренние отступы, цвет фона или изображение, цвет текста, семейство шрифтов и расстояние между блоками.
* **Всплывающее окно:** как сообщение располагается на затемненном фоне: радиус скругления углов, а также цвет и прозрачность наложения.
* **Настройки блоков по умолчанию:** общие начальные стили для блоков, которые вы добавите позже, чтобы новый контент соответствовал шаблону, пока вы не переопределите стиль блока на холсте.
* **Настройки колонок по умолчанию:** отступы для всех макетов с колонками: внешние отступы, внутренние отступы в каждой колонке и расстояние между колонками.
* **Настройки карточек по умолчанию:** начальный вид для контейнеров «Карточка», которые группируют контент в макете, применяется до тех пор, пока вы не стилизуете карточку индивидуально.
* **Настройки группы кнопок по умолчанию:** отступы и выравнивание, когда несколько кнопок расположены вместе как группа.
* **Настройки кнопок по умолчанию:** начальный вид для новых блоков «Кнопка», чтобы призывы к действию оставались единообразными по всему шаблону, пока вы не стилизуете одну из них отдельно.
* **Настройки разделителей по умолчанию:** начальный стиль линии, цвет, толщина и ширина для новых блоков «Разделитель».

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


<Aside type="note">
Настройки высоты нет. Всплывающее окно растет вместе со своим содержимым. Для полноэкранного сообщения установите **Ширину** в **Настройках** и выберите **Полноэкранный** в **Настройках In-App**.
</Aside>

## Локализация шаблона

Многоязычный шаблон хранит локализованный текст для каждого языка в одном дизайне In-App. Используйте переключатель языков над холстом, чтобы добавлять языки и редактировать контент для каждого языка. О том, как работает многоязычная рассылка по разным каналам, см. в [Многоязычные сообщения](/ru/product/personalization/multi-language/).

Контент, который вы еще не перевели для текущего языка, отображается затемненным. Начните печатать, чтобы создать перевод. Язык по умолчанию будет отображаться до тех пор, пока вы этого не сделаете.

<Aside type="note">
Любой добавленный вами блок появляется с одинаковым содержимым для каждого языка. Не забывайте переводить новый текст и надписи на кнопках для каждого языка, который вы используете в своем шаблоне.
</Aside>

## Настройка внешнего вида In-App на устройстве

**Настройки In-App** управляют тем, как сообщение появляется и ведет себя на устройстве: положение, анимация, жесты смахивания и кнопка закрытия. Эти настройки применяются только к iOS и Android Native.

Нажмите **Настройки In-App** на верхней панели:

* **Положение на экране:** Полноэкранный, Сверху, По центру или Снизу.
* **Анимация появления** / **Анимация закрытия:** Нет, Затухание, Слева, Справа, Вверх или Вниз, или По умолчанию, чтобы использовать значение по умолчанию из SDK вашего приложения.

<Aside type="note">
**Нет** и **Затухание** в настоящее время работают на Android. На iOS сообщение появляется и исчезает мгновенно (выравнивание скоро появится).
</Aside>

* **Длительность анимации (МС):** от 100 до 3000 миллисекунд. Оставьте пустым, чтобы использовать время по умолчанию из SDK.
* **Смахнуть для закрытия:** включите любую комбинацию: Влево, Вправо, Вверх и Вниз.
* **Показывать кнопку закрытия:** включите или выключите элемент управления закрытием. Если включено, установите **Положение** (Сверху справа, Сверху слева, Снизу справа, Снизу слева), **Фон** (цвет или **Прозрачный**) и **Цвет иконки**. В отличие от других настроек в этом модальном окне, внешний вид кнопки закрытия рендерится в самом сообщении и отображается на всех платформах, а не только на iOS и Android Native.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="Модальное окно настроек In-App с опциями положения, анимации, смахивания для закрытия и кнопки закрытия"/>

Нажмите **Применить**, чтобы сохранить ваш выбор, или **Отмена**, чтобы отменить его.

## Сохранение шаблона

Нажмите **Сохранить** на верхней панели, чтобы сохранить изменения. Используйте **Отменить**/**Повторить** на верхней панели, чтобы перемещаться вперед и назад по вашим правкам.

<Aside type="note">
При сохранении ваш шаблон In-App сохраняется в **Контент** → **In-apps**. Оттуда вы можете просматривать, редактировать и управлять шаблонами. [Узнать больше](/ru/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## Использование сохраненного шаблона

После сохранения шаблона In-App вы можете показывать его пользователям в Customer Journey, как разовое In-App сообщение или когда пользователь нажимает на push-уведомление.

* [Показать In-App как часть Customer Journey](/ru/product/customer-journey/journey-elements/#in-app)
* [Отправить push-уведомление, которое открывает In-App при нажатии](/ru/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
* [Показать одно In-App сообщение вашим пользователям](/ru/product/messaging-channels/in-apps/)