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

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

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

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

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

Вы можете:

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

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

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

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

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

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

JavaScript и CSS

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

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

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

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

<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".

Другие рекомендации

Дополнительные рекомендации по верстке адаптивных писем.

Как настроить

Письмо, которое вы отправляете пользователю, должно содержать поясняющий текст и ссылку для подтверждения действий пользователя. Для любого элемента письма вы можете использовать:

• свой собственный текст, который будет отображаться только на языке, на котором был написан;
• стандартные тексты Иксоллы, локализованные на 20 языков.

Тексты Иксоллы вставляются в шаблон письма как переменные (заполнители), например:

• {{subject}} — текст заголовка письма.
• {{text}} — текст тела письма.
• {{action_link}} — текст ссылки. Адрес ссылки генерируется на стороне Иксоллы.
• {{button}} — текст кнопки.

При генерации письма вместо заполнителей в шаблон подставляется текст на соответствующем языке.

Язык письма выбирается на основе локали пользователя. Возможны следующие способы определения локали пользователя:

• При интеграции через виджет авторизации вы можете передавать локаль пользователя из интерфейса приложения в виджет при его открытии. Далее виджет передает локаль методам Login API.
• При интеграции через Login API вы можете передавать локаль пользователя из интерфейса приложения в метод Login API при вызове метода.
• Если вы не передаете локаль пользователя, язык определяется по IP-адресу или языку браузера.

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

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

4. Выберите шаблон письма из раскрывающегося списка.
5. Если шаблон открылся в режиме Предварительный просмотр, нажмите кнопку переключения (вверху справа) для перехода к режиму HTML.
6. Добавьте или измените HTML-разметку письма с учетом рекомендаций.
7. Для контроля отображения письма переключитесь в режим Предварительный просмотр.

8. Проверьте код письма на валидность.
9. Если необходимо, отредактируйте поле Отправлять письма с: укажите имя отправителя, которое будет отображаться в заголовке письма, и email-адрес отправителя. По умолчанию имя отправителя — это название вашего варианта авторизации, а email-адрес — noreply@login.xsolla.com. При заполнении поля вы можете использовать любые общие переменные вида application.name. Например, {{application.name}} <support@yourcompany.com>.

Пример шаблона письма:

<!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>

Оценить страницу

Что может сделать страницу еще лучше? Отправить

В другой раз

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

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