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

Авторизация

  • Руководство по интеграции

  • Варианты аутентификации

  • Хранилище данных пользователей

  • Безопасность

  • Кастомизация

  • Провайдеры коммуникационных услуг

  • Возможности

  • Инструкции

  • Расширения

  • Юридические настройки

  • Справочники

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

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

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

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

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

    Вы можете:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Примечание
    Письма без кастомизации используют стандартные шаблоны Иксоллы.

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

    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>

    Была ли статья полезна?
    Спасибо!
    Что может сделать страницу еще лучше? Сообщение
    Жаль, что так произошло
    Расскажите, почему статья не была полезна. Сообщение
    Спасибо за обратную связь!
    Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
    Оценить страницу
    Оценить страницу
    Что может сделать страницу еще лучше?

    В другой раз

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

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

    Последнее обновление: 16 марта 2023

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

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