Кастомизация писем пользователю
Как это работает
Продукт Авторизация предоставляет набор шаблонов для писем, отправляемых пользователю:
- письмо с подтверждением регистрации;
- приветственное письмо;
- письмо с подтверждением (со ссылкой и кодом);
- письмо об изменении пароля;
- письмо об изменении email-адреса;
- письмо с кодом для многофакторной авторизации (MFA);
- письмо об изменении настроек MFA;
- письмо о подписке на новостную рассылку.
Шаблоны написаны на языках HTML и CSS.
Вы можете:
- внести любые изменения в стандартные шаблоны, чтобы настроить внешний вид и содержание писем;
- настроить отправку писем от Xsolla с вашего почтового сервиса или рассылку писем с помощью приложения SendGrid.
Для кого подходит
Для партнеров, у которых уже подключен продукт Авторизация и используется хранилище Xsolla или собственное хранилище.
Рекомендации по верстке писем
Не существует единого стандарта верстки писем для почтовых приложений. Каждое приложение отображает письма по-своему. Создавайте простой и лаконичный дизайн, чтобы снизить различия в отображении письма в разных почтовых приложениях и на разных устройствах.
Общая структура
JavaScript и CSS
В письмах нет возможности вставить мультимедийный контент средствами JavaScript. Для добавления анимации используйте изображение в формате GIF. Для размещения видеоролика добавьте изображение как ссылку, которая ведет на ваш URL-адрес с контентом.
В некоторых почтовых приложениях поддержка возможностей CSS3 ограничена. Учитывайте это при верстке писем.
Используйте только inline-стили. Большинство почтовых приложений вырезает стили, прописанные в теге style.
- html
<div style="text-align: center;"></div>Верстка независимыми блоками
При разработке писем используйте наиболее эффективный метод — верстку независимыми блоками. Этот подход имеет следующие преимущества:
- Если один блок отображается некорректно на каком-то устройстве, остальные блоки это не затронет.
- Вы можете изменять блоки в существующих письмах и быстро тестировать результат.
- Вы можете создать коллекцию блоков и быстро собирать письма для любых задач.
Работа с таблицами
Почтовые приложения некорректно работают с блочными элементами и свойством position: absolute. Чтобы разметить письмо блоками, используйте табличную верстку и указывайте атрибуты align и valign у ячеек. Поведение таблиц более универсально на разных экранах.
Старайтесь избегать объединения ячеек с помощью атрибутов colspan и rowspan. Используйте вложенные таблицы.
Размеры и используемые единицы
Чтобы контент адекватно отображался без полосы прокрутки как на больших экранах, так и на маленьких, для всех контейнеров с контентом указывайте:
- Свойство
width: 100%. Задается всегда. - Ограничение по ширине для самого большого экрана. Рекомендуемая ширина — не более
800px. Это значение является оптимальным и удобным для чтения.
Не задавайте значение свойства line-height в % или em. Используйте только пиксели, чтобы во всех почтовых приложениях и на устройствах письма выглядели одинаково.
Работа со шрифтами
Используйте стандартные шрифты. Большинство почтовых приложений не поддерживает внешние шрифты.
Стандартные шрифты:
- с засечками: Courier, Courier New, Georgia, Times, Times New Roman;
- без засечек: Arial, Black, Tahoma, Verdana, Trebuchet MS.
Предварительный заголовок
Большинство почтовых приложений отображает предварительный заголовок в качестве предпросмотра письма. Всегда добавляйте его, чтобы мотивировать пользователя открыть полученное письмо. Почтовые приложения могут обрезать текст темы письма, в таких случаях предварительный заголовок поможет отразить суть.
Длина кода
Чтобы письмо отображалось корректно, сокращайте длину кода. Например, веб-интерфейсы Gmail и Yahoo обрезают письмо, размер которого превышает 100 КБ.
Работа с изображениями
При верстке письма с изображениями учитывайте, что:
- пользователи могут отключить показ изображений в почтовом приложении;
- изображения могут долго загружаться;
- на разных экранах качество изображений может ухудшаться.
Используйте для изображений форматы PNG или JPEG вместо SVG, который большинство почтовых приложений не отображает.
Для отображения на мониторах с разрешением 4К используйте изображение, размер которого больше требуемого в 2 раза. Например, по вашим требованиям изображение должно иметь размер 400px. Получите из него изображение шириной 800px и встройте его в письмо:
- html
<img src="https://site.com/images/123.png" width="400" height="auto" style="width: 400px; height: auto" />Работа со ссылками
Любые ссылки должны содержать схему и хост, например: https://site.ru/path. Не используйте относительные ссылки (/path) и ссылки без схемы (://site.ru/path). В таких ссылках может указываться схема по умолчанию — file, при которой браузер попытается загрузить ссылку, а не открыть ее.
Чтобы письмо не отправлялось в спам, укажите атрибут title для всех ссылок. Этот атрибут помогает пользователям, которые используют программы экранного доступа.
Всегда указывайте цвет текста у ссылок, иначе почтовое приложение будет использовать собственный цвет.
Добавляйте электронную почту и номер телефона как ссылки. Собственные стили почтового приложения могут влиять на корректность отображения номера телефона.
Чтобы ссылка из письма открывалась в новом окне или вкладке, указывайте атрибут target="_blank".
Другие рекомендации
Дополнительные рекомендации по верстке адаптивных писем.
Как настроить
Письмо, которое вы отправляете пользователю, должно содержать поясняющий текст и ссылку для подтверждения действий пользователя. Для любого элемента письма вы можете использовать:
- свой собственный текст, который будет отображаться только на языке, на котором был написан;
- стандартные тексты Xsolla, локализованные на 20 языков.
Тексты Xsolla вставляются в шаблон письма как переменные (заполнители), например:
{{subject}}— текст заголовка письма.{{text}}— текст тела письма.{{action_link}}— текст ссылки. Адрес ссылки генерируется на стороне Xsolla.{{button}}— текст кнопки.
При генерации письма вместо заполнителей в шаблон подставляется текст на соответствующем языке.
Язык письма выбирается на основе локали пользователя. Возможны следующие способы определения локали пользователя:
- При интеграции через виджет авторизации вы можете передавать локаль пользователя из интерфейса приложения в виджет при его открытии. Далее виджет передает локаль методам Login API.
- При интеграции через Login API вы можете передавать локаль пользователя из интерфейса приложения в метод Login API при вызове метода.
- Если вы не передаете локаль пользователя, язык определяется по IP-адресу или языку браузера.
Для кастомизации шаблона письма:
- Перейдите в Личный кабинет в раздел ваш проект > Авторизация.
- Нажмите Настроить в панели нужного варианта авторизации.
- На странице навигации перейдите к блоку Кастомизация и выберите раздел Кастомизация писем.
- Выберите шаблон письма из раскрывающегося списка.
- Если шаблон открылся в режиме Предварительный просмотр, нажмите кнопку переключения (вверху справа) для перехода к режиму HTML.
- Добавьте или измените HTML-разметку письма с учетом рекомендаций.
- Для контроля отображения письма переключитесь в режим Предварительный просмотр.
- Проверьте код письма на валидность.
- Если необходимо, отредактируйте поле Отправлять письма с: укажите имя отправителя, которое будет отображаться в заголовке письма, и email-адрес отправителя. По умолчанию имя отправителя — это название вашего варианта авторизации, а email-адрес — noreply@login.xsolla.com. При заполнении поля вы можете использовать любые общие переменные вида
application.name. Например,{{application.name}} <support@yourcompany.com>.
Пример шаблона письма:
- html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{subject}}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="background-color:#0a1e37;">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:400px;" width="400">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:60px 0 0;text-align:center;vertical-align:top;">
<table align="center"
background="https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg"
border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:url(https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg) top center / auto repeat;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:36px;line-height:42px;text-align:center;color:#fff;">
{{subject}}
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center"
background="rgba(44,72,98,0.7)"
border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background: rgba(44,72,98,0.7); width:100%;">
<!-- Block with the email text -->
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>Была ли статья полезна?
Оценить страницу
В другой раз
Спасибо за обратную связь!
Продолжить чтение
Найдите ответы на частые вопросы
Могу ли я использовать свое приложение SendGrid для отправки писем?Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
