Створення 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 редактора позначаються відповідною іконкою.

Мультимовна версія (опціонально)

Створіть мультимовну версію In-App повідомлення. Натисніть кнопку “Глобус” на верхній панелі редактора, вкажіть мову за замовчуванням і додайте мовні версії.

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

Докладніше про мультимовність >