Створення In-App повідомлень | Support eSputnik

Дані користувача

Email

Омніканальність

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

Відстеження подій та поведінки

Створення In-App повідомлень

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

Важливо

Встановіть SDK для надсилання In-App повідомлень з eSputnik

Створення нового повідомлення

  1. Перейдіть до розділу “Повідомлення” → “Повідомлення” → ”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 повідомлення. Натисніть кнопку “Глобус” на верхній панелі редактора, вкажіть мову за замовчуванням і додайте мовні версії.

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

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

Примітка

Для розсилок In-App мова визначається за мовою пристрою, а не за тою, що прописана у картці контакту.

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

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email