Создание In-App сообщений | Support eSputnik

Пользовательские данные

Email

Омниканальность

Автоматизация

Отслеживание событий и поведения

Создание In-App сообщений

In-App сообщения позволяют доставлять персонализированный контент вашему пользователю прямо в ваше мобильное приложение.

Важно

Установите SDK, чтобы отправлять In-App сообщения через eSputnik.

Создание нового сообщения

  1. Перейдите в раздел “Сообщения” → “Сообщения” → “In-App”. Нажмите кнопку “Новый In-App”.

Новый In-App

  1. Выберите тип создания сообщения.

Тип создания сообщения

В eSputnik доступны два типа создания In-App сообщений: с помощью drag-and-drop и HTML редактора

Drag-and-drop редактор

  1. Добавьте необходимые компоненты, перетащив их в поле редактора.

Добавьте компоненты сообщения

Доступны такие компоненты сообщения:

  • Текст,

  • Контейнер,

  • Изображение,

  • Плавающая картинка,

  • Кнопка,

  • Слайдер.

Компоненты сообщения

Примечание

Плавающая картинка может накладываться поверх других компонентов сообщения.

Как правило, используется для привлечения дополнительного внимания пользователя или акцента на важной информации.

Плавающая картинка

  1. Настройте общие параметры сообщения.

Когда ни один элемент сообщения не выделен, в правой части экрана становятся активные параметры:

  • Расстояние между элементами,

  • Фон сообщения (изображение и цвет),

  • Внутренние отступы.

Общие параметры сообщения

Настройка компонентов In-App сообщения

Чтобы перейти к редактированию отдельного компонента сообщения, нажмите на него левой кнопкой.

Контейнер

Контейнер может содержать один или несколько компонентов:

  • Изображение,

  • Текст,

  • Кнопку,

  • Слайдер.

При настройке контейнера доступны следующие параметры:

  • Действие по клику,

  • Выравнивание элементов внутри,

  • Размер,

  • Фон,

  • Обводка,

  • Тень,

  • Скругление углов,

  • Внутренние отступы,

  • Наружные отступы.

Настройки контейнера

Текст
  1. Панели оформления, выравнивания текста и параметров ссылки расположены в верхней части редактора.

Панель оформления, выравнивания текста и параметров ссылки

  1. Панель основных настроек текста находится в правой части редактора, с такими параметрами:

  • Размер,

  • Фон,

  • Внутренние отступы,

  • Наружные отступы.

Панель основных настроек текста

Изображение

Для изображения доступны такие настройки:

  • Действие по клику,

  • Размер,

  • Изображение,

  • Скругление углов,

  • Внутренние отступы,

  • Наружные отступы.

Настройки изображения

Обратите внимание

Если вам не нужно фиксированно ограничивать ширину изображений, лучше размещать их по ширине контейнера, чтобы все элементы находились на одном уровне

Для плавающего изображения вы можете настроить позиционирование.

Позиционирование для плавающего изображения

Примечание 

Позиция плавающего изображения рассчитывается от левого верхнего угла сообщения.

Позиция плавающего изображения рассчитывается от левого верхнего угла сообщения.

Чтобы заменить изображение, щелкните его дважды левой кнопкой или используйте кнопку “Изменить” на панели параметров. Вы можете загрузить собственное изображение, выбрать из библиотеки или указать внешнюю ссылку.

Библиотека изображений

Для изображения доступна опции масштабирования:

  • Заполнение,

  • Подгонка,

  • По размеру изображения.

Опции масштабирования

Примечание

Загружайте изображения в форматах PNG, JPEG, SVG, GIF, WebP, AVIF, до 3 МБ.

Кнопка

Для настройки кнопки доступны такие параметры:

  • Действие по клику,

  • Размер,

  • Фон,

  • Иконка,

  • Текст,

  • Обводка,

  • Тень,

  • Скругление углов,

  • Эффекты ховера,

  • Циклическая анимация,

  • Внутренние отступы,

  • Внешние отступы.

Настройки кнопки

Слайдер

Перетащите слайдер из левой панели в шаблон сообщения. На правой боковой панели появятся кнопки “Настройка слайдера” и “Управление слайдами”.

Настройки слайдера

  • Настройте кнопки навигации, индикацию, анимацию показа слайдов и общий дизайн слайдера в окне настройки слайдера.

Настройка слайдера

  • Управляйте порядком отображения, добавляйте, дублируйте или переименовывайте слайды в окне “Управление слайдами”.

Управление слайдами

Также вы можете добавить слайд, нажав на значок +.

Добавление слайда

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

Редактирование изображения

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

Переключение между изображениями

Установите действие по клику на слайдер:

Действие по клику на слайдер

Контекстное меню

По клику на компонент сообщения правой кнопкой, становится доступным контекстное меню с такими действиями:

Контекстное меню

  1. Копировать,

  2. Дублировать,

  3. Вырезать,

  4. Удалить,

  5. Поставить за всеми плавающими изображениями,

  6. Поставить перед всеми плавающими изображениями,

  7. К контейнеру.

Иконка “Закрыть” 

Иконка “Закрыть” в сообщении предоставляет пользователю возможность его закрыть.

Вы можете использовать как стандартные, так и пользовательские иконки с настройкой цвета, размера и позиционирования на экране.

Примечание

Позиция иконки рассчитывается от правого верхнего угла сообщения

Ориентация сообщения

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

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

Ориентация сообщения на экране пользователя

После настройки In-App сообщение нажмите кнопку “Сохранить” на верхней панели редактора, чтобы применить изменения.

Сохранить сообщение

Заполните поле “Новое сообщение”. Это поле доступно для поиска сообщений в общем списке, пользователи его не увидят.

Название сообщения

HTML редактор

Этот метод создания In-App сообщений более трудоемок и требует определенных навыков в работе с HTML и CSS. Однако он предоставляет более гибкий подход для индивидуальной настройки содержания сообщения.

  1. Заполните поле “Название In-app”.

Название сообщения

HTML настройки

Откройте вкладку HTML.

Вкладка HTML

Вы можете разместить свой HTML или использовать наш базовый код.

Использование базового кода

Скопируйте и вставьте базовый HTML в окно кода. Разместите свой код вместо текста “Your code goes here”.

Скопируйте и вставьте базовый HTML

Обратите внимание

Вы можете использовать персонализацию с переменными и возможности Velocity в HTML-коде сообщений In-App.

Кастомные правила HTML-верстки
  1. Используйте кнопки вместо якорей.

Внимание

Использование HTML-якорей запрещено.

  1. Установите атрибуты данных для интерактивных элементов.

Каждый интерактивный элемент должен иметь необходимые атрибуты данных.

  • Код кнопки, которая должна открывать URL:

<button 
                data-target-component-id="1c92f19e-c994-11ed-afa1-0242ac120002"
                data-sys-action-type="OPEN_URL"
                data-sys-action-params="{"url":"https://google.com"}"
                class="button">
</button>
  • Код кнопки, закрывающей виджет:

<button
                data-target-component-id="c740db99-cfbb-4857-b790-cb5631c33255"
                data-sys-action-type="CLOSE_WIDGET"
                class="close-button">
</button>

Название атрибута

Значение атрибута

data-sys-action-type

Одно из действий:
  • CLOSE_WIDGET
  • CLICK
  • OPEN_URL

CLICK и OPEN_URL учитываются в статистике как клики, CLOSE_WIDGET — нет.

data-target-component-id


Создайте уникальный UUID элемента (например, с помощью Online UUID Generator)

  1. Задавайте отступ сверху приблизительно 50 px, чтобы контент помещался на iOS-устройствах.

CSS-настройки

Откройте вкладку CSS и добавьте CSS-правила в окно кода.

Вкладка CSS

Добавление CSS-кода необязательно, но в большинстве случаев кастомный HTML без CSS может отображаться неправильно.

После добавления кода нажмите кнопку “Сохранить и выйти” на верхней панели редактора, чтобы применить изменения.

Сохранить и выйти

Созданные сообщения с помощью HTML редактора обозначаются соответствующей иконкой.

Созданные сообщения с помощью HTML редактора

Мультиязычная версия (опционально)

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

Мультиязычная версия

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

Примечание

Для рассылок In-App язык определяется по языку устройства, а не по тому, который прописан в карточке контакта.

Подробнее о мультиязычности >

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email