Login / Кастомизация писем пользователю
  На главную

Login

Кастомизация писем пользователю

Как это работает

Продукт Login предоставляет набор шаблонов для писем, отправляемых пользователю:

  • письмо с подтверждением регистрации;
  • приветственное письмо;
  • письмо с подтверждением (со ссылкой и кодом);
  • письмо об изменении пароля;
  • письмо об изменении email-адреса;
  • письмо с кодом для многофакторной авторизации (MFA);
  • письмо об изменении настроек MFA;
  • письмо о подписке на новостную рассылку.

Шаблоны написаны на языках HTML и CSS.

Вы можете:

  • внести любые изменения в стандартные шаблоны, чтобы настроить внешний вид и содержание писем;
  • настроить отправку писем от Xsolla с вашего почтового сервиса или рассылку писем с помощью приложения SendGrid.

Примечание
Во всех перечисленных выше случаях (подтверждение регистрации, приветствие нового пользователя и т. д.) Xsolla будет посылать письма вашим пользователям. Отключить эту функцию нельзя.
Внимание
Кастомизация писем доступна только после подписания Лицензионного договора на продукт Xsolla. Для подписания договора перейдите в раздел Договоры в Личном кабинете.

Для кого подходит

Для партнеров, у которых уже подключен продукт Login и используется хранилище Xsolla или собственное хранилище.

Рекомендации по верстке писем

Не существует единого стандарта верстки писем для почтовых приложений. Каждое приложение отображает письма по-своему. Создавайте простой и лаконичный дизайн, чтобы снизить различия в отображении письма в разных почтовых приложениях и на разных устройствах.

Общая структура

JavaScript и CSS

В письмах нет возможности вставить мультимедийный контент средствами JavaScript. Для добавления анимации используйте изображение в формате GIF. Для размещения видеоролика добавьте изображение как ссылку, которая ведет на ваш URL-адрес с контентом.

В некоторых почтовых приложениях поддержка возможностей CSS3 ограничена. Учитывайте это при верстке писем.

Используйте только inline-стили. Большинство почтовых приложений вырезает стили, прописанные в теге style.

Copy
Full screen
Small screen
<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 и встройте его в письмо:

Copy
Full screen
Small screen
<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-адресу или языку браузера.

Для кастомизации шаблона письма:

  1. Перейдите в Личный кабинет в раздел проект > Login.
  2. Нажмите Настроить в панели нужного варианта авторизации.
  3. Перейдите к блоку Кастомизация и выберите раздел Кастомизация писем.

  1. Выберите шаблон письма из раскрывающегося списка.
  2. Если шаблон открылся в режиме Предварительный просмотр, нажмите кнопку переключения (вверху справа) для перехода к режиму HTML.
  3. Добавьте или измените HTML-разметку письма с учетом рекомендаций.
  4. Для контроля отображения письма переключитесь в режим Предварительный просмотр.
  1. Проверьте код письма на валидность.
  2. Если необходимо, отредактируйте поле Отправлять письма с: укажите имя отправителя, которое будет отображаться в заголовке письма, и email-адрес отправителя. По умолчанию имя отправителя — это название вашего варианта авторизации, а email-адрес — noreply@login.xsolla.com. При заполнении поля вы можете использовать любые общие переменные вида application.name. Например, {{application.name}} <>.
Примечание
Письма без кастомизации используют стандартные шаблоны Xsolla.
Пример шаблона письма:
Copy
Full screen
Small screen
<!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>
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

Спасибо за обратную связь!

Продолжить чтение

Последнее обновление: 22 января 2024

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!