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

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

Щоб створити нове повідомлення:

1. Перейдіть до розділу Повідомлення → Повідомлення → In-App. Натисніть кнопку Новий In-App.

   

2. Виберіть тип повідомлення:

   • Повноекранний
     • блокує контент додатку
     • закривається натисканням на іконку хрестика
   • Попап
     • блокує контент додатку
     • закривається тапом за межами повідомлення або натисканням на іконку хрестика
   • Спливаючий
     • має позиціонування зверху або знизу
     • не блокує контент додатку
     • закривається свайпом вліво/вправо та вгору/вниз в залежності від позиціонування або натисканням на іконку хрестика
   • Плаваюча панель
     • має позиціонування знизу
     • не блокує контент додатку
     • закривається свайпом вліво/вправо/вниз або натисканням на іконку хрестика

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

Усі типи In-App з'являються поверх екрана додатку, тож вбудувати повідомлення в сам екран як постійний банер не можна. На сайті постійний банер можна зробити віджетом типу Вбудований.

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

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

На панелі ліворуч редактора розташовані компоненти з яких будується повідомлення.
Щоб додати компонент, перетягніть його в поле редактора.

Колонки та Контейнер можуть містити в собі інші компоненти, окрім компонента Плаваюче зображення.

Плаваюче зображення накладається поверх інших компонентів. Його можна використовувати, наприклад, щоб акцентувати увагу на певному елементі.

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

Щоб перейти до меню основного шару редактора, клікніть будь-де поза компонентами.

Створення та керування сторінками

До In-App повідомлення можна додати до 20 сторінок.

Щоб дублювати поточну сторінку, натисніть + Сторінка:

Або відкрийте меню сторінки та виберіть Дублювати обрану сторінку.

Дубльована сторінка буде додана одразу після вибраної.

У меню сторінки також можна перейменувати, перемістити або видалити вибрану сторінку.

Нижче наведено налаштування, доступні для компонентів повідомлення.

Дія по кліку

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

• Наступна сторінка — перехід до наступної сторінки повідомлення.
• Попередня сторінка — перехід до попередньої сторінки повідомлення.
• Відкрити URL — відкриває вказане посилання, діплінк або передає custom data.
• Закрити поточне повідомлення — закриває In-App повідомлення.
• Використовувати відстеження кліків — фіксує клік елемента в статистиці кліків.

Опції Наступна сторінка та Попередня сторінка з'являються, якщо повідомлення має кілька сторінок.

Ви можете додати одну або декілька дій.

Клік враховується в статистиці, якщо для елемента задано дію Відкрити URL або Використовувати відстеження кліків. Клік по елементу лише з дією Закрити поточне повідомлення кліком не вважається.

Навігація між сторінками

Щоб налаштувати навігацію між сторінками:

1. Виберіть кнопку, зображення або всю сторінку In-App.
2. Відкрийте налаштування Дія по кліку.
3. Виберіть дію Наступна сторінка або Попередня сторінка.

Вирівнювання елементів всередині

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

Розмір

Розгорніть випадні списки та оберіть необхідні розміри з наступних опцій.

Для ширини:

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

Для висоти:

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

Колонки

Для компонента Колонки, ви можете обрати наступні налаштування:

• Урівняти ширину. Ця опція встановлює рівну ширину для усіх колонок.
• Кількість колонок. Оберіть кількість колонок від 1 до 8.
• Відстань між колонками. Введіть число в поле, щоб встановити відстань між колонками в пікселях. Діапазон значень – від 0 до 40.

Вертикальне розташування на мобільних пристроях

У разі активації цієї опції, колонки будуть відображатись вертикально коли повідомлення переглядатимуть в портретному режимі.

Фон

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

• Зображення, щоб завантажити власні картинки чи обрати з вбудованої бібліотеки.
• Колір, щоб обрати бажаний колір з палітри, або ввести його код вручну.

Розмиття фону

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

Обведення

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

• Тип обведення: суцільне, пунктирне, крапкове.
• Товщину. Допустимі значення – від 0 до 100.
• Колір, обравши його з палітри або задавши вручну.

Тінь

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

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

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

Скруглення кутів

Ця опція дозволяє встановити значення скруглення кутів компонента.

Форматування тексту

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

Кастомні шрифти

У меню форматування тексту відкрийте поле Сімейство шрифтів і перейдіть на вкладку Мої шрифти, щоб додати та використовувати власні шрифти відповідно до стилю вашого бренду без переходу в HTML-редактор.

Натисніть + Додати шрифт і заповніть параметри шрифту:

• Назва шрифту
• URL CSS-файлу
• Сімейство

Ці параметри можна отримати з Google Fonts або іншої бібліотеки шрифтів — процес такий самий, як і для email-редактора.

Після додавання шрифт з'являється у списку Мої шрифти, де його можна редагувати або видалити, а також стає доступним для вибору в полі Сімейство шрифтів для будь-якого текстового компонента.

Іконка

Для компонента Кнопка можна додати іконку з наступними параметрами:

• Розмір.
• Розташування.
• Відстань до тексту.

Ефекти ховера

Активуйте перемикач, щоб зробити кнопку більш інтерактивною у разі наведення на неї або торкання.

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

Опція Циклічна анімація дозволяє обрати для компонента Кнопка наступні параметри із випадних списків:

• Тип анімації.
• Кількість повторень.

Слайдер

Перетягніть слайдер з лівої панелі до шаблону повідомлення. На правій бічній панелі з'являться кнопки Налаштувати слайдер та Керувати слайдами.

• Налаштуйте кнопки навігації, індикацію, анімацію показу слайдів та загальний дизайн слайдера у вікні його налаштувань.

• Керуйте порядком відображення, додавайте, дублюйте або перейменовуйте слайди у вікні керування слайдами.

Також можна додати слайд, натиснувши на значок +.

Щоб змінити або відредагувати зображення, натисніть на нього у шаблоні, після чого воно з'явиться на правій панелі налаштувань. Натискання на зображення зі слайдера на панелі налаштувань відкриває вікно зміни та редагування.

Використовуйте навігаційні кнопки для перемикання між зображеннями слайдера.

Встановіть дію по кліку на слайдер:

Таймер зворотного відліку

Компонент показує час, що лишився до вказаної дати. Перетягніть Таймер зворотного відліку з лівої панелі в повідомлення — одразу відкриється вікно Налаштування часу:

• Формат — одиниці, які показує таймер, наприклад ГГ:ХХ:СС.
• Режим — До дати закінчення: таймер відлічує час до вказаних дати й часу.
• Дата та час закінчення — момент, коли таймер зупиняється. Кінцева дата таймера збігається з кінцевою датою публікації повідомлення.
• Часовий пояс — за замовчуванням часовий пояс користувача.

Натисніть Готово, щоб додати таймер. Змінити ці параметри згодом можна кнопкою Налаштувати час на панелі праворуч.

Перемикач Показувати заголовки вмикає підписи під цифрами. Мова підписів днів, годин, хвилин і секунд залежить від мови користувача, а не від мовної версії повідомлення.

Решта налаштувань — розмір, стиль тексту, фон, обведення, тінь, скруглення кутів і відступи — такі самі, як в інших компонентів.

Соціальні мережі

Компонент додає ряд іконок із посиланнями на ваші сторінки. За замовчуванням у ньому чотири платформи: Facebook, Instagram, LinkedIn і X.

• Впишіть посилання на свою сторінку для кожної платформи.
• Розмір іконки задає розмір усіх іконок ряду.
• Замінити підставляє власне зображення замість стандартної іконки, а кошик видаляє платформу з ряду.
• + Додати платформу додає ще одну позицію: завантажте для неї іконку й вкажіть посилання.

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

По кліку на компонент повідомлення правою кнопкою, стає доступним контекстне меню з такими діями:

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:

  HTML

  - \<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

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

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

Складайте повідомлення лише з HTML і CSS — JavaScript у розмітці в застосунку не виконується, тому контент, який залежить від скрипта, там лишається порожнім, навіть якщо у браузерному перегляді він відображається.

CSS-налаштування

Відкрийте вкладку CSS та додайте CSS-правила у вікно коду.

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

Після додавання коду натисніть кнопку Зберегти і вийти на верхній панелі редактора, щоб застосувати зміни.

Створені повідомлення за допомогою HTML редактора позначаються відповідною іконкою.

Персоналізація Velocity

Персоналізація і Velocity-змінні працюють лише в In-App повідомленнях, які показуються після кліку на мобільне push-повідомлення, — у будь-якому типі макета. В In-App, що показуються за умовами показу, змінні не підставляються.

Змінні підставляються в текст повідомлення, у посилання кнопки та в діплінк.

Підтримує:

• визначення будь-якого ключа контексту як змінної верхнього рівня, наприклад $eventParam;
• fallback-синтаксис ${key|'altKey'}, що дозволяє використовувати альтернативний ключ, якщо основний недоступний;
• контекст контакту, узгоджений з іншими каналами комунікації, включно з регістронезалежним доступом до полів контакту, наприклад $firstName та $FirstName.

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

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

При додаванні мовної версії за замовчуванням активовано опцію автоматичного перекладу. Щоб зробити переклад вручну, відключіть її.

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