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

In-App сообщение — это сообщение, отображаемое пользователю при использовании мобильного приложения. Вы можете определить содержание сообщения и правила отображения, чтобы нацелить сообщение на конкретную аудиторию.

Чтобы создать новое сообщение:

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

2. Выберите тип сообщения:

• Полноэкранный
  • блокирует контент приложения
  • закрывается нажатием на иконку крестика
• Попап
  • блокирует контент приложения
  • закрывается тапом вне сообщения или нажатием на иконку крестика
• Всплывающий
  • позиционируется сверху или снизу
  • не блокирует контент приложения
  • закрывается свайпом влево/вправо и вверх/вниз в зависимости от позиционирования или нажатием на иконку крестика
• Плавающая панель
  • позиционируется снизу
  • не блокирует контент приложения
  • закрывается свайпом влево/вправо/вниз или нажатием на иконку крестика

Все вышеперечисленные типы сообщений создаются в редакторе drag-and-drop. Также вы можете использовать HTML-редактор, чтобы получить больше возможностей для кастомизации контента сообщения.

Работа в Drag-and-drop редакторе

Рассмотрим создание полноэкранного сообщения – функциональность других типов In-App идентична.

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

"Колонки" и "Контейнер" могут содержать другие компоненты, кроме компонента "Плавающее изображение".

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

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

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

Доступны следующие параметры для компонентов.

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

Разверните меню "+Добавить действие" и выберите действие, которое будет выполняться по клику на элемент:

• Открыть URL,
• Использовать отслеживание кликов,
• Закрыть текущее сообщение.

Вы можете добавить одно или несколько действий.

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

• Выберите подходящую иконку расположения элементов внутри контейнера или колонок.
• Введите значение расстояния между элементами в соответствующее поле. Минимальное значение – 0.

Размер

Разверните раскрывающиеся списки и выберите необходимые размеры из следующих опций.

Для ширины:

• Фиксированная ширина. Минимальное значение – 20.
• По ширине контейнера.
• По ширине содержимого.

Для высоты:

• Фиксированная высота. Минимальное значение – 20.
• По высоте контейнера.
• По высоте содержимого.

Колонки

Для компонента Колонки вы можете выбрать следующие настройки:

• Уравнять ширину. Эта функция устанавливает равную ширину для всех колонок.
• Количество колонок. Выберите количество колонок от 1 до 8.
• Расстояние между колонками. Введите число в поле, чтобы установить расстояние между колонками в пикселях. Диапазон значений – от 0 до 40.

Складывать вертикально в портретном режиме

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

Фон

Для выбора фона компонента включите переключатель "Фон" и выберите одну из следующих функций:

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

Размытие фона

Допустимые значения размытия фона — от 0 до 100.

Обводка

Активируйте переключатель "Обводка", чтобы задать форматирование для внешнего контура компонентов "Контейнер" и "Колонки".
Вы можете установить одинаковый формат обводки для всех сторон сразу или для каждой отдельно, выбрав

• Тип обводки: сплошное, пунктирное, точечное.
• Толщина. Допустимые значения – от 0 до 100.
• Цвет (из палитры или вручную).

Тень

Активируйте переключатель, чтобы установить тень компонента. Для настройки доступны следующие параметры:

• Протяженность по вертикали(х) и горизонтали(у).
• Размытие.
• Размер.
• Цвет.

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

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

Эта функция позволяет установить значения скругления углов компонента.

Форматирование текста

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

Иконка

Для компонента "Кнопка" можно добавить иконку со следующими параметрами:

• Размер.
• Расположение.
• Расстояние до текста.

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

Активируйте переключатель, чтобы сделать кнопку более интерактивной при наведении на нее или касании.

Цикличная анимация

Опция "Цикличная анимация" позволяет выбрать для компонента Кнопка следующие параметры из выпадающих списков:

• Тип анимации.
• Количество повторений.

Слайдер

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

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

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

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

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

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

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

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

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

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

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

3. Вырезать,

4. Удалить,

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

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

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

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

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

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

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

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

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

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

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

HTML редактор

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

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

HTML настройки

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

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

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

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

Кастомные правила HTML-верстки

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

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

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

• Код кнопки, которая должна открывать 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>
HTML
COPY

• Код кнопки, закрывающей виджет:

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

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

CSS-настройки

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

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

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

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

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

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

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

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