# Создание In-App сообщений во встроенном редакторе
Создайте шаблон In-App сообщения во встроенном редакторе Pushwoosh без написания кода. Вы получите многоразовый макет с блоками контента, изображениями, кнопками и персонализированным текстом, который можно будет показывать в Customer Journey, в виде одноразового In-App или из push-уведомления.
## Создание нового шаблона In-App
Шаблон In-App — это многоразовый дизайн, который вы создаете один раз, а затем показываете пользователям в кампаниях. Вы можете создать его во встроенном редакторе, загрузить собственный HTML ZIP-архив или создать нативный шаблон rich media. В этой статье рассматривается создание шаблона с нуля во встроенном редакторе. Выполните те же шаги для настройки существующего шаблона.
1. Перейдите в **Контент** → **In-apps**.
2. Нажмите **Добавить шаблон**.
3. Введите название шаблона.
4. Выберите способ создания шаблона:
* **Создать новый шаблон:** создать шаблон во встроенном редакторе.
* **Загрузить ZIP:** [загрузить ZIP-файл](/ru/developer/guides/content/rich-media-templates-syntax) с вашим HTML In-App сообщением.
* **Создать нативный rich media:** создать нативное In-App сообщение, отображаемое с помощью SDK. [Узнать больше](/ru/product/content/in-apps/create-native-in-app-messages/)
5. Выберите **Создать новый шаблон**.
6. Нажмите **Добавить шаблон**.
## Обзор интерфейса редактора
Встроенный редактор состоит из четырех областей. Каждая из них имеет свое четкое предназначение.
### Верхняя панель
На верхней панели вы управляете шаблоном в целом: его названием, историей отмен, статусом сохранения, внешним видом на устройстве (**Настройки In-App**), языками (**Автоперевод** и переключатель языков), а также шириной предпросмотра для телефона или десктопа. См. [Настройка внешнего вида In-App на устройстве](/ru/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) и [Локализация шаблона](#localize-the-template).
Откройте меню **⋮** на верхней панели для доступа к дополнительным действиям:
#### Предпросмотр
**Предпросмотр** позволяет протестировать сообщение перед сохранением: нажимать на кнопки, перемещаться по многоэкранным сценариям и проверять макет на телефоне или десктопе.
Что работает в режиме предпросмотра:
* Кнопки и многоэкранные сценарии работают по-настоящему.
* Ссылки и диплинки регистрируются, но не открываются.
* Вызовы SDK и статистика открытий/кликов отключены.
* Язык соответствует переключателю языков. Merge Tags остаются в виде плейсхолдеров.
В заголовке предпросмотра переключайтесь между телефоном и десктопом, чтобы увидеть оба макета. Нажмите **Перезапустить**, чтобы снова показать сообщение с самого начала. Чтобы выйти из режима предпросмотра, нажмите Esc или кликните за пределами панели.
#### Brand book
* **Brand book:** открыть [Brand book](/ru/product/content/brand-book/) вашего аккаунта.
* **Применить стили brand book:** изменить стиль шаблона в соответствии с вашим Brand book (после его настройки).
* **Сбросить пользовательские стили:** удалить переопределения стилей в шаблоне и вернуться к значениям по умолчанию.
### Холст
Редактируйте сообщение на холсте: нажимайте на текст, изображения и кнопки, чтобы изменить их. Используйте переключатель телефон/десктоп на верхней панели, чтобы проверить, как макет выглядит при каждой ширине. Переключатель изменяет только предпросмотр, а не сам макет.
### Слои
На панели «Слои» в виде дерева перечислены все блоки вашего шаблона в том же порядке, что и на холсте. Откройте ее с левого края, чтобы выбрать вложенный блок (например, кнопку внутри группы) или перетащите строки, чтобы изменить порядок контента.
### Правая панель
Переключайтесь между тремя вкладками:
* **Блоки:** добавление контента в сообщение. См. [Справочник по блокам редактора In-App](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Настройки:** применение стилей ко всему шаблону сразу. См. [Настройка параметров шаблона In-App](/ru/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **AI:** чат с AI-ассистентом для генерации или редактирования контента по запросу.
## Добавление блоков контента
1. Откройте вкладку **Блоки** на правой панели.
2. Перетащите блок на холст или нажмите на блок, чтобы добавить его в конец шаблона.
3. Продолжайте добавлять блоки, пока макет не будет готов.
Каждый тип блока служит разной цели в сообщении:
* **[Заголовок](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** заголовки и короткие подзаголовки
* **[Текст](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** основной текст и более длинные описания
* **[Кнопка](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** кликабельный призыв к действию
* **[Изображение](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** изображения из [Медиахранилища](/ru/product/content/media-store/), загруженные или по URL
* **[Видео](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** кликабельная миниатюра видео, которая открывает видео с YouTube или Vimeo
* **[Карточка](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** изображение с заголовком, текстом и кнопкой в одном макете
* **[Разделитель](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** линия, разделяющая секции
* **[Колонки](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** макеты с расположением бок о бок (2, 3 или 4 равные колонки, или разделение 33/67 и 67/33)
* **[Таймер](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** обратный отсчет для предложений и сроков
* **[Меню](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** строка или колонка навигационных или контактных ссылок
* **[Соцсети](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** иконки, ссылающиеся на ваши профили в социальных сетях
* **[HTML](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** пользовательский HTML, например, форма, опрос или встроенное видео
* **[Товары](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** сетка карточек товаров из вашего [Каталога товаров](/ru/product/content/product-catalog/) или из брошенной корзины пользователя
См. [Справочник по блокам редактора In-App](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) для получения информации о настройках каждого блока и о том, [как сохранять и повторно использовать блоки](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Отображение блоков для определенных пользователей
Не каждому пользователю нужно видеть одни и те же блоки. Установите **условие отображения** для блока, чтобы он показывался или скрывался в зависимости от [тегов](/ru/product/audience-data-and-segmentation/user-data-tags/tags/) пользователя. Вы по-прежнему отправляете один шаблон, но каждый человек видит только те части, которые к нему относятся.
Выберите блок на холсте, откройте **Условие отображения** на правой панели и включите **Показывать этот блок по условию**. [Узнать больше](/ru/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Локализация шаблона
Многоязычный шаблон хранит локализованный текст для каждого языка в одном дизайне In-App. Используйте переключатель языков на верхней панели, чтобы добавлять языки и редактировать контент для каждого языка. Нажмите **Автоперевод**, чтобы сгенерировать переводы. О том, как работают многоязычные сообщения в разных каналах, см. в разделе [Многоязычные сообщения](/ru/product/personalization/multi-language/).
## Настройка параметров шаблона
Используйте два места для стилизации и размещения сообщения:
* Вкладка **Настройки** (правая панель): размер документа, цвета, типографика и стили по умолчанию для блоков.
* **Настройки In-App** (верхняя панель): положение на экране, анимация и кнопка закрытия.
[Узнать больше](/ru/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## Сохранение шаблона
Нажмите **Сохранить** на верхней панели, чтобы сохранить изменения. Используйте **Отменить**/**Повторить** на верхней панели, чтобы перемещаться вперед и назад по вашим правкам.
3. Введите название шаблона.
4. Выберите способ создания шаблона:
* **Создать новый шаблон:** создать шаблон во встроенном редакторе.
* **Загрузить ZIP:** [загрузить ZIP-файл](/ru/developer/guides/content/rich-media-templates-syntax) с вашим HTML In-App сообщением.
* **Создать нативный rich media:** создать нативное In-App сообщение, отображаемое с помощью SDK. [Узнать больше](/ru/product/content/in-apps/create-native-in-app-messages/)
5. Выберите **Создать новый шаблон**.
6. Нажмите **Добавить шаблон**.
## Обзор интерфейса редактора
Встроенный редактор состоит из четырех областей. Каждая из них имеет свое четкое предназначение.
### Верхняя панель
На верхней панели вы управляете шаблоном в целом: его названием, историей отмен, статусом сохранения, внешним видом на устройстве (**Настройки In-App**), языками (**Автоперевод** и переключатель языков), а также шириной предпросмотра для телефона или десктопа. См. [Настройка внешнего вида In-App на устройстве](/ru/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) и [Локализация шаблона](#localize-the-template).
Откройте меню **⋮** на верхней панели для доступа к дополнительным действиям:
#### Предпросмотр
**Предпросмотр** позволяет протестировать сообщение перед сохранением: нажимать на кнопки, перемещаться по многоэкранным сценариям и проверять макет на телефоне или десктопе.
Что работает в режиме предпросмотра:
* Кнопки и многоэкранные сценарии работают по-настоящему.
* Ссылки и диплинки регистрируются, но не открываются.
* Вызовы SDK и статистика открытий/кликов отключены.
* Язык соответствует переключателю языков. Merge Tags остаются в виде плейсхолдеров.
В заголовке предпросмотра переключайтесь между телефоном и десктопом, чтобы увидеть оба макета. Нажмите **Перезапустить**, чтобы снова показать сообщение с самого начала. Чтобы выйти из режима предпросмотра, нажмите Esc или кликните за пределами панели.
#### Brand book
* **Brand book:** открыть [Brand book](/ru/product/content/brand-book/) вашего аккаунта.
* **Применить стили brand book:** изменить стиль шаблона в соответствии с вашим Brand book (после его настройки).
* **Сбросить пользовательские стили:** удалить переопределения стилей в шаблоне и вернуться к значениям по умолчанию.
### Холст
Редактируйте сообщение на холсте: нажимайте на текст, изображения и кнопки, чтобы изменить их. Используйте переключатель телефон/десктоп на верхней панели, чтобы проверить, как макет выглядит при каждой ширине. Переключатель изменяет только предпросмотр, а не сам макет.
### Слои
На панели «Слои» в виде дерева перечислены все блоки вашего шаблона в том же порядке, что и на холсте. Откройте ее с левого края, чтобы выбрать вложенный блок (например, кнопку внутри группы) или перетащите строки, чтобы изменить порядок контента.
### Правая панель
Переключайтесь между тремя вкладками:
* **Блоки:** добавление контента в сообщение. См. [Справочник по блокам редактора In-App](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Настройки:** применение стилей ко всему шаблону сразу. См. [Настройка параметров шаблона In-App](/ru/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **AI:** чат с AI-ассистентом для генерации или редактирования контента по запросу.
## Добавление блоков контента
1. Откройте вкладку **Блоки** на правой панели.
2. Перетащите блок на холст или нажмите на блок, чтобы добавить его в конец шаблона.
3. Продолжайте добавлять блоки, пока макет не будет готов.
Каждый тип блока служит разной цели в сообщении:
* **[Заголовок](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** заголовки и короткие подзаголовки
* **[Текст](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** основной текст и более длинные описания
* **[Кнопка](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** кликабельный призыв к действию
* **[Изображение](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** изображения из [Медиахранилища](/ru/product/content/media-store/), загруженные или по URL
* **[Видео](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** кликабельная миниатюра видео, которая открывает видео с YouTube или Vimeo
* **[Карточка](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** изображение с заголовком, текстом и кнопкой в одном макете
* **[Разделитель](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** линия, разделяющая секции
* **[Колонки](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** макеты с расположением бок о бок (2, 3 или 4 равные колонки, или разделение 33/67 и 67/33)
* **[Таймер](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** обратный отсчет для предложений и сроков
* **[Меню](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** строка или колонка навигационных или контактных ссылок
* **[Соцсети](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** иконки, ссылающиеся на ваши профили в социальных сетях
* **[HTML](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** пользовательский HTML, например, форма, опрос или встроенное видео
* **[Товары](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** сетка карточек товаров из вашего [Каталога товаров](/ru/product/content/product-catalog/) или из брошенной корзины пользователя
См. [Справочник по блокам редактора In-App](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) для получения информации о настройках каждого блока и о том, [как сохранять и повторно использовать блоки](/ru/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Отображение блоков для определенных пользователей
Не каждому пользователю нужно видеть одни и те же блоки. Установите **условие отображения** для блока, чтобы он показывался или скрывался в зависимости от [тегов](/ru/product/audience-data-and-segmentation/user-data-tags/tags/) пользователя. Вы по-прежнему отправляете один шаблон, но каждый человек видит только те части, которые к нему относятся.
Выберите блок на холсте, откройте **Условие отображения** на правой панели и включите **Показывать этот блок по условию**. [Узнать больше](/ru/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Локализация шаблона
Многоязычный шаблон хранит локализованный текст для каждого языка в одном дизайне In-App. Используйте переключатель языков на верхней панели, чтобы добавлять языки и редактировать контент для каждого языка. Нажмите **Автоперевод**, чтобы сгенерировать переводы. О том, как работают многоязычные сообщения в разных каналах, см. в разделе [Многоязычные сообщения](/ru/product/personalization/multi-language/).
## Настройка параметров шаблона
Используйте два места для стилизации и размещения сообщения:
* Вкладка **Настройки** (правая панель): размер документа, цвета, типографика и стили по умолчанию для блоков.
* **Настройки In-App** (верхняя панель): положение на экране, анимация и кнопка закрытия.
[Узнать больше](/ru/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## Сохранение шаблона
Нажмите **Сохранить** на верхней панели, чтобы сохранить изменения. Используйте **Отменить**/**Повторить** на верхней панели, чтобы перемещаться вперед и назад по вашим правкам.