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

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

Примечание

Прежде чем начать, интегрируйте Pushwoosh SDK, чтобы In-App сообщения могли появляться в вашем приложении. Узнать больше

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

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

1. Перейдите в Content → In-apps.
2. Нажмите Create in-app.

3. Введите название шаблона.
4. Выберите способ создания шаблона:
   • Create new template: создать шаблон во встроенном редакторе.
   • Upload ZIP: загрузить ZIP-файл с вашим HTML In-App сообщением.
   • Create native rich media: создать нативное In-App сообщение, отображаемое с помощью SDK. Узнать больше
5. Выберите Create new template.
6. Нажмите Create in-app.

Обзор интерфейса редактора

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

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

На верхней панели вы управляете шаблоном в целом: его названием, историей отмен, статусом сохранения, внешним видом на устройстве (In-app settings), языками (Auto-translate и переключатель языков), шириной предпросмотра для телефона или десктопа и проверкой контента (Check). См. Настройте внешний вид in-app на устройстве, Локализация шаблона и Проверка контента перед сохранением.

Откройте меню ⋮ на верхней панели для доступа к дополнительным действиям:

Preview

Preview позволяет протестировать сообщение перед сохранением: нажимать кнопки, перемещаться по многоэкранным сценариям и проверять макет на телефоне или десктопе.

Что работает в режиме предпросмотра:

• Кнопки и многоэкранные сценарии работают по-настоящему.
• Ссылки и deep links регистрируются, но не открываются.
• Вызовы SDK и статистика открытий/кликов отключены.
• Язык соответствует переключателю языков. Merge Tags остаются в виде плейсхолдеров.

В заголовке предпросмотра переключайтесь между телефоном и десктопом, чтобы увидеть оба макета. Нажмите Restart, чтобы снова показать сообщение с самого начала. Чтобы выйти из режима предпросмотра, нажмите Esc или кликните за пределами панели.

Brand book

• Brand book: открыть Brand book вашего аккаунта.
• Apply brand book styles: применить к шаблону стили из вашего Brand book (после его настройки).
• Reset custom styles: удалить переопределения стилей в шаблоне и вернуться к настройкам по умолчанию.

Download .zip

Download .zip сохраняет шаблон в виде ZIP-файла. Загружается последняя сохраненная версия, поэтому сначала сохраните изменения. Этот пункт меню появляется только после того, как шаблон был сохранен хотя бы один раз — для новых, несохраненных шаблонов он не отображается.

Canvas (рабочая область)

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

Layers (слои)

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

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

Переключайтесь между тремя вкладками:

• Blocks: добавление контента в сообщение. См. Справочник по блокам редактора In-App.
• Settings: применение стилей ко всему шаблону сразу. См. Настройка параметров шаблона In-App.
• AI: чат с AI-помощником для генерации или редактирования контента по запросу.

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

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

Каждый тип блока служит определенной цели в сообщении:

• Heading: заголовки и короткие подзаголовки
• Text: основной текст и длинные описания
• Button: кликабельный призыв к действию
• Image: изображения из Media store, загруженные с компьютера или по URL
• Video: кликабельная миниатюра видео, которая открывает видео с YouTube или Vimeo
• Card: изображение с заголовком, текстом и кнопкой в одном макете
• Divider: линия, разделяющая секции
• Columns: макеты с расположением бок о бок (2, 3 или 4 равные колонки, или разделение 33/67 и 67/33)
• Timer: таймер обратного отсчета для предложений и сроков
• Menu: строка или столбец навигационных или контактных ссылок
• Social: иконки, ссылающиеся на ваши профили в социальных сетях
• HTML: пользовательский HTML, например, форма, опрос или встроенное видео
• Products: сетка карточек товаров из вашего каталога товаров или из брошенной корзины пользователя

См. Справочник по блокам редактора In-App для получения информации о настройках каждого блока и о том, как сохранять и повторно использовать блоки.

Показ блоков определенным пользователям

Не каждому пользователю нужно показывать одни и те же блоки. Установите условие отображения для блока, чтобы он показывался или скрывался в зависимости от тегов (Tags) пользователя. Вы по-прежнему отправляете один шаблон, но каждый человек видит только те части, которые к нему относятся.

Выберите блок на рабочей области, откройте Display condition на правой панели и включите Show this block conditionally. Узнать больше

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

Многоязычный шаблон хранит локализованный текст для каждого языка в одном дизайне In-App. О том, как работает многоязычная рассылка по разным каналам, см. в Многоязычные сообщения.

Примечание

Переключатель языков здесь учитывает только устройства на платформах, которые отображают In-App контент. Значения языка, установленные через теги (Tags) на уровне пользователя, не привязаны к платформе устройства, поэтому они здесь не отображаются.

Чтобы настроить многоязычный контент:

1. Нажмите на переключатель языков на верхней панели, чтобы открыть список языков.
2. Выберите языки, которые хотите добавить, затем нажмите Apply.
3. Используйте переключатель языков для переключения между языками и редактирования контента каждого блока для выбранного языка.
4. Нажмите Auto-translate, чтобы автоматически заполнить недостающие переводы — проверьте сгенерированный AI текст перед сохранением.

Примечание

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

Настройка параметров шаблона

Используйте два места для стилизации и размещения сообщения:

• Вкладка Settings (правая панель): размер документа, цвета, типографика и стили по умолчанию для блоков.
• In-app settings (верхняя панель): положение на экране, анимация и кнопка закрытия.

Узнать больше

Проверка контента перед сохранением

Нажмите Check на верхней панели, чтобы открыть Smart check и проверить шаблон на наличие распространенных проблем.

Smart check ищет:

• Кнопки, пункты меню и ссылки на изображения без URL или с URL, который не является адресом http(s), mailto:, tel: или deep link (например, myapp://promo)
• Незавершенные блоки-плейсхолдеры AI
• Пустые слоты для изображений или видео и отсутствующий alt-текст
• Карточки товаров с отсутствующей или недействительной ссылкой
• Контрастность текста, не соответствующая WCAG AA
• Непереведенный контент
• Таймер обратного отсчета, дата окончания которого уже прошла
• Условие отображения с нарушенным или пустым правилом, ветка, потерявшая блок, к которому она ведет, или условие, которое не будет применяться, потому что динамический контент отключен для аккаунта

Кликните на найденную проблему, чтобы перейти непосредственно к затронутому элементу на рабочей области. Если все в порядке, панель покажет All checks passed — the content looks ready to save.

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

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

Примечание

При сохранении ваш шаблон In-App сохраняется в Content → In-apps. Оттуда вы можете просматривать, редактировать и управлять шаблонами. Узнать больше