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

Авторизация

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

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

  • Инструкции

  • Расширения

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

  • Как кастомизировать письма для пользователя

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

    Вы можете самостоятельно настроить внешний вид и содержание писем, отправляемых пользователю в следующих случаях:

    • подтверждение регистрации,
    • смена email,
    • смена пароля.

    Для кастомизации писем используется HTML и CSS.

    Notice
    Кастомизация писем доступна только после подписания Лицензионного договора на продукт Иксолла. Для подписания перейдите в раздел Финансы в Личном кабинете.

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

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

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

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

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

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

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

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

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

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

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

    Для создания кастомизированного письма:

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

    Пример письма:

    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>

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

    В другой раз

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

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

    Последнее обновление: 9 июня 2021

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

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