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

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

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

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

Anchor link to

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

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

Обзор редактора

Anchor link to

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

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

Anchor link to

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

Верхняя панель редактора In-App с названием шаблона, кнопками «Отменить», «Повторить», «Настройки In-App», переключателем языков, «Автопереводом», предпросмотром для телефона и компьютера, переключателем светлой/темной темы и статусом «Сохранено»

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

Развёрнутое меню ⋮ на верхней панели редактора In-App с пунктами «Предпросмотр», «Проверить», Brand book, «Скачать .zip», «Применить стили brand book» и «Сбросить пользовательские стили»

Предпросмотр

Anchor link to

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

Панель предпросмотра с переключателем для телефона и компьютера, переключателем светлой и темной темы, кнопкой «Перезапустить» и In-App сообщением с изображением, текстом предложения, таймером и кнопкой «Получить»

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

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

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

Проверить

Anchor link to

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

Smart check ищет:

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

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

Brand book

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

Скачать .zip

Anchor link to

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

Холст

Anchor link to

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

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

Слои

Anchor link to

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

Панель «Слои» со списком блоков «Карточка», «Изображение», «Заголовок», «Текст», «Таймер», «Кнопки» и «Нижний колонтитул» в виде дерева

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

Anchor link to

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

Вкладка «Блоки» на правой панели с блоками «Заголовок», «Текст», «Кнопка», «Изображение» и другими блоками контента

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

Anchor link to
  1. Откройте вкладку Блоки на правой панели.
  2. Перетащите блок на холст или нажмите на блок, чтобы добавить его в конец шаблона.
  3. Продолжайте добавлять блоки, пока макет не будет готов.
Пустой редактор In-App с надписью «Начните с блока» на холсте и открытой панелью «Блоки»

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

  • Заголовок: заголовки и короткие подзаголовки
  • Текст: основной текст и длинные описания
  • Кнопка: кликабельный призыв к действию
  • Изображение: картинки из Медиахранилища, загруженные или по URL
  • Видео: кликабельная миниатюра видео, которая открывает видео с YouTube или Vimeo
  • Карточка: изображение с заголовком, текстом и кнопкой в одном макете
  • Разделитель: линия, разделяющая секции
  • Колонки: макеты с расположением бок о бок (2, 3 или 4 равные колонки, или разделение 33/67 и 67/33)
  • Таймер: обратный отсчет для предложений и сроков
  • Меню: ряд или колонка навигационных или контактных ссылок
  • Соцсети: иконки, ссылающиеся на ваши профили в социальных сетях
  • HTML: пользовательский HTML, например, форма, опрос или встроенное видео
  • Товары: сетка карточек товаров из вашего Каталога товаров или из брошенной корзины пользователя

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

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

Anchor link to

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

Выберите блок на холсте, откройте Условие отображения на правой панели и включите Показывать этот блок по условию. Узнать больше

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

Anchor link to

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

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

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

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

Anchor link to

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

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

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

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

Anchor link to

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