Первые шаги
Отслеживание событий и поведения
Пользовательские данные
- Обзор адаптивного email-редактора
- Создание оформления для письма
- Создание сквозных модулей
- Настройка адаптивности
- Настройка Smart-элементов
- Оформление промовкладки для Gmail
- Добавление Rolloverʼа
- Добавление фона в письмо
- Добавление анкорных ссылок
- Библиотека блоков (Модули)
- Добавление блока "Видео"
- Добавление таблицы в письмо
- Работа с блоком "Баннер"
- Добавление пользовательских шрифтов
- Добавление кастомных иконок соцсетей
- Работа с блоком "Соцсети"
- Создание кнопки CTA
- Редактирование HTML и CSS
- Робота с блоком "Изображения"
- Работа с блоком “Таймер"
- Настройка блока "Меню"
- Создание футера
Омниканальность
- SDK для мобильных приложений
- Управление ключами доступа к мобильному SDK
- Подключение мобильного приложения
- Создание Google проекта для Mob Push
- Создание мобильных push-сообщений
- Настройка аналитики доставляемости и кликов
- Планирование мобильных push-уведомлений
- Настройка универсальных ссылок (deeplinks & Universal links)
- Отчеты по мобильным push-рассылкам
Автоматизация
- Настройка дополнительных рассылок
- Двойное подтверждение подписки
- Приветственная серия
- Приветственная серия с сегментацией по категориям
- Запуск сценария после импорта контактов
- Регулярный сценарий для группы
- Поздравление с днем рождения
- Привязка сценария к кнопке
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Сбор отзывов о заказе
- Реактивация клиентов и подписчиков
- Отправка рассылки непрочитавшим
- Контроль триггеров
Персонализация
- Подстановка промокода из файла
- Подстановка промокода с использованием API
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с помощью персонализации
- Загрузка промокодов для использования в сценарии
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
Аналитика
- Отчёт по email-рассылке
- Отчет по AMP-рассылке
- Отчеты по мобильным push-рассылкам
- Отчет по SMS-рассылке
- Отчет по Web-push рассылке
- Отчет по Viber-рассылке
- Настройка передачи UTM-меток
- Визуализация дохода от рассылок
- Отслеживание эффективности рассылок в Google Analytics
- Как открыть CSV-файл после экспорта
Мультиязычность
Товарные рекомендации
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. Применяя пользовательский шрифт, подумайте о том, как он отобразится в почтовых клиентах, которые его не поддерживают, так как при замене на стандартный тексту может не хватить места и верстка поедет. Предусмотрите это: сделайте тест, пропишите альтернативное семейство, размер и отступы стилем для корректного отображения письма.