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

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

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

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

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

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

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

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

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

• Текст,

• Контейнер,

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

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

• Кнопка.

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

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

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

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

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

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

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

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

Контейнер

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

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

• Текст,

• Кнопку.

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

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

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

• Разміер,

• Фон,

• Обводка,

• Тень,

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

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

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

Текст

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

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

• Размер,

• Фон,

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

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

Изображение

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

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

• Размер,

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

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

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

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

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

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

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

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

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

• Подгонка,

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

Кнопка

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

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

• Размер,

• Фон,

• Иконка,

• Текст,

• Обводка,

• Тень,

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

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

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

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

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

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

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

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>

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

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

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

CSS-настройки

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

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

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

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

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

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

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

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