Первые шаги
Отслеживание событий и поведения
Пользовательские данные
- Создание сквозных модулей
- Оформление промовкладки для Gmail
- Настройка Smart-элементов
- Обзор адаптивного email-редактора
- Создание футера
- Настройка адаптивности
- Добавление Rolloverʼа
- Настройка блока "Меню"
- Добавление анкорных ссылок
- Робота с блоком "Изображения"
- Работа с блоком "Соцсети"
- Добавление таблицы в письмо
- Добавление фона в письмо
- Добавление пользовательских шрифтов
- Добавление кастомных иконок соцсетей
- Создание кнопки CTA
- Создание оформления для письма
- Редактирование HTML и CSS
- Работа с блоком "Баннер"
- Добавление блока "Видео"
- Библиотека блоков (Модули)
- Работа с блоком “Таймер"
Омниканальность
- Настройка универсальных ссылок (deeplinks & Universal links)
- Создание Google проекта для Mob Push
- Подключение мобильного приложения
- Планирование мобильных push-уведомлений
- Настройка аналитики доставляемости и кликов
- Управление ключами доступа к мобильному SDK
- Создание мобильных push-сообщений
- Отчеты по мобильным push-рассылкам
- SDK для мобильных приложений
Автоматизация
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Запуск сценария после импорта контактов
- Поздравление с днем рождения
- Запуск Welcome-серии для разных категорий
- Двойное подтверждение подписки
- Приветственная серия
- Контроль триггеров
- Привязка сценария к кнопке
- Реактивация клиентов и подписчиков
- Сбор отзывов о заказе
- Если сценарий не работает
- Отправка рассылки непрочитавшим
- Регулярный сценарий для группы
Персонализация
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с использованием API
- Загрузка промокодов для использования в сценарии
- Подстановка промокода с помощью персонализации
- Подстановка промокода из файла
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
Аналитика
- Отчет по AMP-рассылке
- Отчет по Viber-рассылке
- Отчёт по email-рассылке
- Настройка передачи UTM-меток
- Отчет по Web-push рассылке
- Визуализация дохода от рассылок
- Как открыть CSV-файл после экспорта
- Отслеживание эффективности рассылок в Google Analytics
- Отчет по SMS-рассылке
- Отчеты по мобильным push-рассылкам
Мультиязычность
API
Смена системы
Документы
Интеграция
Добавление пользовательских шрифтов
Веб-шрифт – один из способов создания индивидуального стиля письма. В редакторе писем eSputnik вы можете добавить нужный шрифт, например, из библиотеки Google Fonts или другого источника.
Почтовые клиенты, которые поддерживают кастомные шрифты:
- iOS Mail и Apple Mail;
- Outlook 2016 и Outlook 2011 for Mac;
- Android App и Android Mail 2.3, 4.2, 4.4;
- Lotus Notes 8.
Почтовые клиенты, где происходит замена пользовательского шрифта на стандартный:
- Gmail;
- Outlook.com (версии до 2013 года);
- Yahoo!;
- IBM Notes 9 и Lotus Notes 7, 8.5;
- AOL;
- Blackberry;
- Alto;
- Thunderbird.
Как добавить свой шрифт в eSpuntik?
1. Для добавления кастомного шрифта разверните список дополнительных возможностей, который скрыт за тремя точками в верхней панели инструментов. Выберите пункт “Мои шрифты”.
2. Для перехода к установке кликните по кнопке “Добавить шрифт” в открывшемся окне.
3. Введите данные о шрифте:
- его название,
- URL с CSS-файлом,
- семейство.
Все поля нужно заполнить обязательно.
Краткая инструкция, где взять эти данные, откроется, если развернуть блок ”Как подключить шрифт из Google Fonts”.
После этого нажмите кнопку “Готово”.
Как подключить шрифт из Google Fonts?
- Зайдите на fonts.google.com.
Чтобы найти нужный шрифт, можно воспользоваться поиском, если знаете его название, или фильтрами по категориям, языкам, свойствам (количеству стилей, толщине, скосу, ширине). Также можно отсортировать по актуальным, самым популярным, новым, имени.
Важно!
Если есть необходимость в 2-х и более нестандартных шрифтах, то добавлять их нужно последовательно: каждый следующий после завершения установки предыдущего.
- Нажмите "Select this style" для выбора стиля шрифта и показа блока с его параметрами.
Важно!
Выберите один из вариантов, так как несколько стилей одновременно не загрузятся. Если вам нужно все семейство шрифта, то его также нужно загружать поочередно, например: вначале добавляется regular, затем medium, bold и т.д. В редактор eSputnik они будут добавлены как отдельные шрифты.
- После того как стиль выбран, переходите к загрузке шрифта в редактор писем.
Во вкладке Embed в Google Fonts нужно скорпировать содержимое атрибута href, например: https://fonts.googleapis.com/css?family=Krona+One&display=swap
Вставьте скопированную ссылку в поле “URL c CSS-файлом” в окне eSputnik:
Сразу укажите название шрифта, чтобы потом его легко найти в общем списке:
- Скопируйте название семейства в блоке Specify in CSS в одном из форматов:
- Spartan
- 'Spartan'
- 'Spartan', sans-serif
- 'Spartan', sans-serif;
Важно!
Внесите название семейства, так как оно обозначено в библиотеке шрифтов. Шрифт не будет работать, если в поле вписать произвольное имя.
Вставьте в поле “Семейство”:
Для сохранения настроек нажмите “Готово”.
Появится всплывающее окно, из которого также можно вернуться к редактированию или начать добавлять следующий шрифт:
Для установки шрифта выберите “Перезагрузить сейчас”. И подтвердите перезагрузку страницы.
Вы можете выбрать “Не перезагружать”, если ранее внесенные изменения в сообщения не были сохранены. После чего сохраните письмо и снова войдите в него – шрифт станет доступным.
Как добавить собственные шрифты?
Чтобы загрузить собственный шрифт, нужно добавить в редактор eSputnik ссылку на css файл. Если ссылка у вас уже есть - переходите сразу к пункту 5, если нет - начинайте с первого пункта.
1) Нужно файл шрифта в формате .ttf добавить на сервис fontsquirrel.
2) Скачайте архив, где будет файл stylesheet.css
3) В полученный файл нужно добавить src, где на вашем сервере лежит необходимый шрифт в формате woff2 (шрифт в этом формате будет в архиве), например:
@font-face {
font-family: 'Spartan';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
4) Загрузите файл stylesheet.css на свой сервер.
5) При добавлении шрифта в редакторе сообщения eSputnik указать URL на этот файл и на семейство, которое написано в файле, например:
Чтобы отредактировать, удалить шрифт или добавить новый, зайдите в “Мои шрифты”.
Все шрифты после добавления можно использовать в редакторе сообщений. Перейдите к полю со списком шрифтов и кликните на название шрифта.
Для других источников шрифтов алгоритм аналогичный, различия будут только в интерфейсах этих ресурсов.
Особенности работы с пользовательскими шрифтами:
1. Если шрифт не отображается, проверьте, есть ли он на устройстве, где вы смотрите письмо. Если его нет, то текст будет выведен стандартным шрифтом.
2. Некоторые шрифты поддерживаются только для языков с латинским алфавитом, поэтому с кириллическим текстом они не сработают, только с латиницей и цифрами.
3. Заданный шрифт применяется исключительно для тела письма: основного текста, заголовков, ссылок, подзаголовков. Тема и скрытый предзаголовок будут стандартными, так как их шрифт определяется почтовым клиентом.
4. Чтобы оформление лучше воспринималось, не используйте разные шрифты и разные формы одного шрифта на одном макете.
5. Применяя пользовательский шрифт, подумайте о том, как он отобразится в почтовых клиентах, которые его не поддерживают, так как при замене на стандартный тексту может не хватить места и верстка поедет. Предусмотрите это: сделайте тест, пропишите альтернативное семейство, размер и отступы стилем для корректного отображения письма.