Перейти к содержанию
Документация для разработчиков Поддержка Запросить демо Войти
Pushwoosh.com

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

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

Создание нового шаблона in-app сообщения

Anchor link to

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

  1. Перейдите в Content → In-apps.
  2. Нажмите Create in-app.
Страница Content In-apps с кнопкой Create in-app в правом верхнем углу списка шаблонов
  1. Введите название шаблона.
  2. Выберите способ создания шаблона:
    • Create new template: создать шаблон во встроенном редакторе.
    • Upload ZIP: загрузить ZIP-файл с вашим HTML in-app сообщением.
    • Create native rich media: создать нативное in-app сообщение, отображаемое с помощью SDK. Узнать больше
  3. Выберите Create new template.
  4. Нажмите Create in-app.
Диалоговое окно добавления нового шаблона с полем для названия, выбранной опцией Create new template, а также опциями Upload ZIP и Create native rich media

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

Anchor link to

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

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

Anchor link to

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

Верхняя панель редактора in-app сообщений с названием шаблона, кнопками Undo, Redo, In-app settings, переключателем языков, Auto-translate, предпросмотром для телефона и десктопа, переключателем светлой/темной темы и статусом Saved

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

Раскрытое меню ⋮ на верхней панели редактора in-app сообщений с опциями Preview, Check, Brand book, Download .zip, Apply brand book styles и Reset custom styles

Preview

Anchor link to

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

Панель предпросмотра с переключателями для телефона и десктопа, светлой и темной темы, кнопкой Restart и in-app сообщением с изображением, текстом предложения, таймером и кнопкой Claim

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

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

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

Check

Anchor link to

Check открывает Smart check и сканирует шаблон на наличие распространенных проблем.

Smart check ищет:

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

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

Brand book

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

Download .zip

Anchor link to

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

Холст

Anchor link to

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

Используйте иконку солнца/луны на верхней панели, чтобы продолжать редактировать холст, пока он отображается в светлой или темной теме. Это работает даже без настроенного Dark mode variant — темные цвета подбираются автоматически, пока вы не зададите свои собственные. Это режим живого редактирования, а не панель Preview только для чтения.

Слои

Anchor link to

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

Панель Layers со списком Card, Image, Heading, Text, Timer, Buttons и Footer в виде дерева

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

Anchor link to

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

Вкладка Blocks на правой панели с блоками контента Heading, Text, Button, Image и другими

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

Anchor link to
  1. Откройте вкладку Blocks на правой панели.
  2. Перетащите блок на холст или нажмите на блок, чтобы добавить его в конец шаблона.
  3. Продолжайте добавлять блоки, пока макет не будет готов.
Пустой редактор in-app сообщений с надписью Start with a block на холсте и открытой панелью Blocks

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

  • 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: сетка карточек товаров из вашего Product Catalog или из брошенной корзины пользователя

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

Отображение блоков для определенных пользователей

Anchor link to

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

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

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

Anchor link to

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

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

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

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

Anchor link to

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

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

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

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

Anchor link to

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