Первые шаги
Пользовательские данные
- Обзор адаптивного email-редактора
- Создание оформления для письма
- Создание сквозных модулей
- Настройка адаптивности
- Настройка Smart-элементов
- Оформление промовкладки для Gmail
- Добавление Rolloverʼа
- Добавление фона в письмо
- Добавление анкорных ссылок
- Библиотека блоков (Модули)
- Добавление блока "Видео"
- Добавление таблицы в письмо
- Работа с блоком "Баннер"
- Добавление пользовательских шрифтов
- Добавление кастомных иконок соцсетей
- Работа с блоком "Соцсети"
- Создание кнопки CTA
- Редактирование HTML и CSS
- Робота с блоком "Изображения"
- Работа с блоком “Таймер"
- Настройка блока "Меню"
- Создание футера
- Использование ИИ в email-редакторе
Омниканальность
- SDK для мобильных приложений
- Управление ключами доступа к мобильному SDK
- Подключение мобильного приложения
- Создание Google проекта для Mob Push
- Создание мобильных push-сообщений
- Настройка аналитики доставляемости и кликов
- Планирование мобильных push-уведомлений
- Настройка универсальных ссылок (deeplinks & Universal links)
- Отправка тестовых сообщений из отладки запросов
- Настройка виджетов для сайта
- Вызов виджета
- Настройка геоданных для правил вызова виджетов
- Сохранение данных из виджетов в поля контактов
- Защита от раздражения
- Действия после заполнения формы
- Замена системного сценария Double Opt-In
- Расширение для тестирования форм в Google Chrome
- Создание pop-up-форм с помощью Google Tag Manager или WordPress
- Отправка событий из форм подписки в Google Analytics
Автоматизация
- Двойное подтверждение подписки
- Приветственная серия
- Приветственная серия с сегментацией по категориям
- Запуск сценария после импорта контактов
- Регулярный сценарий для группы
- Поздравление с днем рождения
- Привязка сценария к кнопке
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Сбор отзывов о заказе
- Реактивация клиентов и подписчиков
- Отправка рассылки непрочитавшим
- Настройка дополнительных рассылок
Персонализация
- Подстановка промокода из файла
- Подстановка промокода с использованием API
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с помощью персонализации
- Загрузка промокодов для использования в сценарии
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
Аналитика
- Отчёт по email-рассылке
- Отчет по SMS-рассылке
- Отчет по рассылке Web Push
- Отчет по Viber-рассылке
- Отчет по рассылке Mob Push
- Отчет по рассылке App Inbox
- Отчет по взаимодействию с виджетами
- Отчет по триггерной рассылке
- Отчет по AMP-рассылке
- Отчет по мультиязычной рассылке
- Настройка передачи UTM-меток
- Визуализация дохода
- Отслеживание эффективности рассылок в Google Analytics
Мультиязычность
Отслеживание событий и поведения
- Отслеживание активности на сайте при помощи Generate event
- Валидация параметров события
- Отслеживание активности клиентов в мобильных приложениях
- События для запуска триггерных рассылок
- Разветвление сценария в зависимости от параметров события
- Подстановка данных из событий в сообщения
- Вебхуки для отслеживания активности
Товарные рекомендации
API
Смена системы
Документы
Интеграция
Настройка адаптивности
1. Настройка адаптивности через вкладку “Оформление”
Настройка адаптивности происходит во вкладке “Оформление”, которая предназначена для создания общего стиля всего письма.
Чтобы настраивать адаптивность емейла, нужно включить функцию адаптивности в разделе “Оформление” → “Общие”.
Далее нужно перейти в последний пункт этой вкладки:
Важно: настройки, которые открываются на этой вкладке, будут срабатывать в мобильной версии письма в почтовых клиентах, поддерживающих адаптивность.
1. Размер текста
Находится во вкладке “Оформление” → “Адаптивность”. Здесь можно задать настройки текста и заголовков для отображения на мобильных устройствах.
В редакторе eSputnik по умолчанию указан оптимальный размер шрифта для элементов.
Для десктопной версии писем для текста чаще всего используется шрифт 14 px. Но на экране мобильного устройства он будет слишком мелким, поэтому оптимальным будет шрифт размером не менее 16 px.
Для заголовков не рекомендуется использовать слишком большой шрифт, т. к. он может занимать 3-4 строки. Заданный здесь размер шрифта будет приоритетнее, чем тот размер, который задан на вкладке “Контент” (это относится и к размеру ссылок).
2. Кнопки
Размер текста на кнопке и размещение кнопки в мобильной версии письма также можно задать отдельно.
Для мобильной версии можно изменить внешние отступы, внутренние останутся такими же, как и для десктопной версии.
На кнопку можно поместить иконку. Но эта функция не поддерживается в Windows Outlook 2002, 2007, 2010, 2013, 2016, 2019.
3. Общие отступы
Отступы для текста и картинки можно настроить для десктопной и мобильной версии отдельно с помощью переключения иконки “На мобильной версии”.
2. Настройка отдельных блоков
1. Карточка товара
Настройка карточки товара происходит через раздел “Контент” → “Структуры”, по клику на карточку товара слева откроется раздел, в котором можно включить адаптивность, а также вносить другие изменения: добавить картинку, ссылку, выравнивание, отступы и т. п.
Чтобы карточка товара корректно перестроилась в адаптивной версии, все ее элементы должны быть расположены в одном контейнере.
То есть изображение товара, его название, описание и кнопка с призывом к действию должны быть расположены в одной структуре друг под другом. При таком расположении мы получаем вот такой результат:
Предпросмотр доступен по клику на кнопку “Просмотр сообщения” в верхнем меню:
1.1. Обратный порядок блоков
Если карточка составлена в обратном порядке (сначала текст, потом картинка), на мобильном это может выглядеть некрасиво. Чтобы блоки отобразились в другой последовательности, включите инверсию контейнеров (работает для двух контейнеров). Это означает, что элементы на мобильном устройстве будут отображаться в обратном порядке: картинка → текст.
1.2. Отключение адаптивности
Если перестраивание элементов может навредить дизайну письма, адаптивную структуру можно отключить.
По умолчанию этот переключатель включен и означает, что контейнеры будут расположены один под другим на мобильных устройствах. Если передвинуть бегунок влево, структура не будет перестраиваться.
При отключении адаптивности письмо может некорректно отображаться на мобильном устройстве. Поэтому емейл обязательно нужно тестировать.
2. Адаптивность картинок
Настройка адаптивности изображений находится в разделе “Контент” и доступна при нажатии на контейнер с изображением:
Включение этой опции указывает изображению подстроиться под размер экрана мобильного устройства. Для оптимального отображения картинки без потери качества загружайте ее в большем размере, чем размер ячейки:
3. Центрирование текста
На вкладке “Контент” вы можете задать выравнивание текста на мобильной версии:
4. Скрытие/отображение блоков для разных устройств
В адаптивном редакторе eSputnik можно задавать настройки отображения различных блоков на экране мобильных устройств.
Скрыть можно любую структуру в письме как для мобильной, так и для десктопной версии. Отключенный элемент в редакторе письма будет иметь пометку.
5. Блок “Меню”
В “Меню” также можно сократить отображение пунктов для мобильной версии. Для этого нужно перейти в настройки блока меню и отключить лишние категории.
В блоке “Меню” мы рекомендуем использовать не более 4 пунктов для корректного отображения на мобильном. Если блок выглядит неопрятно, можно уменьшить шрифт.