Перші кроки
Дані користувача
- Огляд адаптивного email-редактора
- Cтворення оформлення для листа
- Створення синхронізованих модулів
- Налаштування адаптивності
- Налаштування Smart-елементів
- Оформлення промовкладки для Gmail
- Додавання Rolloverʼа
- Додавання фону до листа
- Додавання анкорних посилань
- Бібліотека блоків (Модулі)
- Додавання таблиці до листа
- Додавання кастомних шрифтів
- Додавання кастомних іконок соцмереж
- Створення кнопки СТA
- Робота з блоком "Зображення"
- Використання ШІ в email-редакторі
Омніканальність
- SDK для мобільних застосунків
- Керування ключами доступу до мобільного SDK
- Підключення мобільного застосунку
- Створення Google проекту для Mob Push
- Створення мобільних push-повідомлень
- Налаштування аналітики доставлень та кліків
- Планування мобільних push-повідомлень
- Налаштування універсальних посилань (deeplinks & Universal links)
- Надсилання тестових повідомлень із налагодження запитів
- Налаштування віджетів для сайту
- Виклик віджета
- Налаштування геоданих для правил виклику віджетів
- Збереження даних із віджетів у поля контактів
- Захист від роздратування
- Дії після заповнення форми
- Заміна системного сценарію Double Opt-In
- Розширення для тестування форм в Google Chrome
- Створення pop-up-форм за допомогою Google Tag Manager або WordPress
- Надсилання подій з віджетів eSputnik до Google Analytics
Автоматизація
- Подвійне підтвердження підписки
- Вітальна серія
- Вітальна серія із сегментацією за категоріями
- Запуск сценарію після імпорту контактів
- Регулярний сценарій для групи
- Вітання з днем народження
- Привʼязка сценарію до кнопки
- Реактивація клієнтів та підписників
- Відправка розсилки непрочитавшим
- Налаштування додаткових розсилок
Персоналізація
- Підстановка промокоду з файлу
- Підстановка промокоду з використанням API
- Принципи генерації промокодів за допомогою PHP/JAVA
- Підстановка промокоду за допомогою персоналізації
- Завантаження промокодів для використання в сценарії
- Генерація промокодів у сценарії
- Відправлення промокоду за допомогою передпроцесора
- HTTP-запит для передачі промокоду з повідомлення до картки контакту
Аналітика
- Звіт щодо email-розсилки
- Звіт щодо SMS-розсилки
- Звіт щодо розсилки Web Push
- Звіт щодо Viber-розсилки
- Звіт щодо розсилки Mob Push
- Звіт щодо розсилки App Inbox
- Звіт зі взаємодії з віджетами
- Звіт щодо тригерної розсилки
- Звіт щодо AMP-розсилки
- Звіт щодо мультимовної розсилки
- Налаштування передачі UTM-міток
- Візуалізація доходу
- Відстеження ефективності розсилок у Google Analytics
Мультимовність
Відстеження подій та поведінки
- Відстеження активності на сайті за допомогою Generate event
- Валідація параметрів подій
- Відстеження активності клієнтів у мобільних застосунках
- Події для запуску тригерних розсилок
- Розгалуження сценарію в залежності від параметрів події
- Підстановка даних з подій в повідомлення
- Вебхуки для відстеження активності
Товарні рекомендації
API
- Інтеграція з API — найчастіші питання
- API-ключі
- Ресурси API для додавання контактів
- Використання API-ресурсу Generate event
- Передача замовлень API-ресурсом Generate event
- Отримання рекомендацій щодо API ресурсом Contact recommendations based on web tracking
- Використання API-ресурсу Send prepared message
Зміна системи
Документи
Інтеграція
Додавання фону до листа
Ви багато працюєте з контентом листа, але все одно завжди хочете щось іще поліпшити і додати заради вау-ефекту?
Читаєте електронні листи від принаймні кількох відомих брендів із неймовірними зображеннями, від яких просто перехоплює подих?
Додайте фонове зображення, безпосередньо пов’язане із вашим брендом або контентом емейла, та підвищіть свої шанси на кращі показники конверсії.
Фон листа — це немовби родзинка вашої розсилки. Цей елемент може бути присутнім в області:
- Усього листа
- Смуги
- Структури
- Контейнера
Давайте розглянемо, як у кілька простих кроків створити фон за допомогою адаптивного редактора eSputnik.
Фон листа. Як оформити в редакторі eSputnik?
Для дизайну листів частіше за все використовуються кольори з брендбуку, аби лист був впізнаваним з першого погляду і витриманим в єдиному корпоративному стилі. Зробити запланований лист контрастним ви можете за допомогою фону.
Спосіб №1 — Колір підкладки
Перш ніж розпочати створення листа, слід встановити ключові параметри зовнішнього вигляду у вкладці "Оформлення", розділ "Загальні налаштування", де і вказати потрібний колір:
У результаті емейл може мати будь-який відтінок і бути придатним для будь-якої ситуації:
Вибирайте контрастні кольори. На десктопі вони вигідно підкреслять контент і виділять лист.
Спосіб №2 — Фонова картинка
У вкладці "Оформлення", розділ "Загальні налаштування" виберіть опцію "Фонове зображення":
Перетягніть зображення з вашого комп'ютера у позначену область, додайте посилання із загальнодоступних джерел або використовуйте "Банк зображень":
Виберіть потрібне розміщення елемента:
Замініть будь-якою іншою картинкою, порівняйте варіанти і виберіть кращий:
Редагуйте зображення в самому листі:
І у вас вийде розсилка, яка не залишить байдужими ваших підписників:
Слід пам'ятати, що на мобільних пристроях через розмір екрану підкладку не видно. Тож плануйте лист так, щоб він і без підкладки мав гарний вигляд.
Фон смуги в емейл-розсилці
Смуга — це орієнтований переважно на десктопний перегляд листа елемент, який допомагає виділитися фірмовим стилем, підлаштуватися під настрій та інфопривід. Мобільні клієнти не відображають його повністю,
зате на комп'ютері лист виглядатиме привабливіше.
Смуга містить структури та контейнери. Про роботу з цими елементами ми поговоримо далі, а поки що розглянемо на прикладі хедера листа, як можна зробити його контрастнішим.
Спосіб №1 — Заливка кольором
Виділіть смугу:
Вкажіть колір:
Отримайте результат:
У листі ви можете використовувати контрастні смуги в необмеженій кількості, але в межах розумного.
Спосіб №2 — Картинка як підкладка
Виділіть смугу:
Застосуйте зображення для фону смуги:
Редагуйте його: змініть розмір, обріжте, додайте ефект або напис, не виходячи з листа.
У фоторедакторі доступні базові функції, які допоможуть підготувати картинку до використання:
Задайте розміщення фонового зображення:
Замініть іншим зображенням зі свого комп'ютера, із загальнодоступних джерел або з "Банку зображень". Натисніть кнопку "Замінити"
Виберіть потрібний розділ з картинками
Насолоджуйтеся результатом:
Як альтернативний варіант — задавайте для смуги колір бекграунду на той випадок, якщо картинка раптом не відобразиться і логотип виглядатиме білим на білому.
Фон структури або окремого елемента?
Структура — це елемент смуги, який містить кілька контейнерів з будь-яким контентом.
Спосіб №1 — Колір
Виділіть структуру:
Задайте один колір:
Елемент матиме такий вигляд:
Щоб досягти такого результату, треба вибрати контрастну заливку для контейнера. Наприклад, для цього блоку ми використовували такі кольори:
- Структура: #b6d7a8
- Контейнер: #ffffff
- Кнопка: #659c35
Спосіб №2 — Картинка
Виділіть структуру:
Виберіть опцію "Зображення у фоні":
Завантажте зображення зі свого комп'ютера, за посиланням на зовнішній ресурс або виберіть у "Банку зображень:
Задавайте потрібне розміщення елемента:
Редагуйте картинку, не виходячи з листа:
Отримайте потрібний результат:
Якщо ви хочете зробити таку структуру ще більш яскравою — зазирніть у наступний пункт.
Фон контейнера. Як оформити в редакторі eSputnik?
Використання найчастіше є актуальним:
- У картках товарів;
- На банерах;
- Під промокодом.
По-перше, так простіше працювати з картинками — не треба відкривати фотошоп; по-друге, текстову інформацію підписник зможе скопіювати. У випадку з промокодом — це безпрограшний варіант, адже наша мета — зручність для користувача, якому не доведеться запам'ятовувати код і вводити його вручну.
Спосіб №1 — Колір
Давайте розглянемо на прикладі, у якому нам потрібно створити текстові блоки з різним фоном.
У контейнері напишіть потрібний текст:
Виберіть колір тексту:
Зафіксуйте відступи:
Виділіть контейнер з текстом:
Виберіть колір фону, заокруглення та обведення контейнера:
Отриманий результат у шаблоні вашої розсилки:
Можна зробити ці елементи клікабельними, додавши до тексту посилання.
Спосіб №2 — Картинка
Завантажте картинку для фону контейнера:
Вкажіть розміщення:
Редагуйте зображення, не виходячи з листа:
Отримуйте неймовірний результат, який буде тільки у вашої компанії:
Створюйте унікальні листи, які допоможуть зацікавити вашу цільову аудиторію та підтримувати комунікацію з нею.
У нашому редакторі ви можете створити лист будь-якого рівня складності без знання html і графічних редакторів. Спробуйте просто зараз.