How to customize emails to users

How it works

You can customize the appearance and content of the following emails sent to users:

• Account confirmation
• Email change
• Password change

Emails are customized using HTML and CSS.

Who can use it

Partners who have already integrated Login and use Xsolla database or a custom storage.

Email development recommendations

Email applications don’t have a unified standard for email development. Every application displays emails in its own way. To make emails look alike in different email applications, create a simple and compact design.

General structure

JavaScript and CSS

You can’t add multimedia content to emails via JavaScript. Use GIF images to add animation to emails. To add a video to an email, use an image as a link that leads to your URL with the video content.

Not all email applications support a full list of CSS3 features. Keep this in mind when developing an email.

Use only inline styles. Most email applications exclude styles written in the style tag.

<div style="text-align: center;"></div>

Development by independent blocks

We recommend using the safest email development method via independent blocks. This method provides the following features:

• Incorrectly displayed blocks on a device won’t affect the remaining blocks.
• You can adjust blocks in existing emails and test the result quickly.
• You can create the collection of blocks and quickly compose emails for different purposes.

Work with tables

Email applications work incorrectly with block elements and the position: absolute property. To build an email with blocks, use the table layout and specify align and valign attributes for table cells. Tables adapt to different screens in a better way.

Try to avoid merging of cells via colspan and rowspan attributes. Use inserted tables instead.

Size and used units

To make content appear correctly without a scrollbar on big and small screens, specify the following settings for all containers with the content:

• The width: 100% property should always be specified.
• The width limitation for the biggest screen. The recommended width shouldn’t exceed 800px as this value is best suited for reading.

Don’t specify the line-height property in % or em. Use only pixels to make emails look the same in all email applications and on different screens.

Work with fonts

Use standard fonts. Most email applications don’t support external fonts.

Standard fonts:

• with serifs: Courier, Courier New, Georgia, Times, Times New Roman
• without serifs: Arial, Black, Tahoma, Verdana, Trebuchet MS

Preheader

Most email applications show a preheader as an email preview. You should always add a preheader. It motivates users to open received emails. Email applications may cut the email’s subject text and a preheader helps users understand the email content.

Code length

Reduce the code length to make emails appear correctly. For example, Gmail and Yahoo have trouble showing emails bigger than 100 KB.

Work with images

When you develop emails with images, keep in mind that:

• Users can disable images in the email application settings.
• Images may take too long to load.
• Image quality may vary on different screens.

Use the PNG or JPEG image formats instead of the SVG format that isn’t supported by most email applications.

For 4K resolution monitors, use the image twice as bigger than the recommended size. For example, you require a 400px image. Get the 800px width version of this image and add it to the email:

<img src="https://site.com/images/123.png" width="400" height="auto" style="width: 400px; height: auto" />

Work with links

Any link should include the scheme and host. For example, https://site.ru/path. Don’t use relative links (/path) and links without a scheme (://site.ru/path). This type of links can automatically get the file scheme and the browser will try to download it instead of opening.

To make sure an email doesn’t end up in the spam folder, specify the title attribute for all links. This attribute helps people with disabilities who rely on additional software to access web content.

You should always specify the font color for links. If you don’t specify it, the email application will use its own color.

Add an email address and phone number as links. Application’s styles can affect the correct display of a phone number.

To open a link from an email in a new tab or window, specify the target="_blank" attribute.

Other recommendations

Additional recommendations for adaptive emails development.

How to get it

The email must contain some explanatory text and a link to confirm the user’s action. Use the following placeholders:

• {{subject}} to place the email header.
• {{text}} to place the email text used on the Xsolla side.
• {{action_link}} to place a link. The link itself generates on the Xsolla side.
• {{button}} to place the button text.

To create a customized email:

1. Go to Publisher Account and open your Login project > Customization > Email notifications.
2. Follow the emails development recommendations when adding an HTML layout for the email.
3. Preview the email in a browser and use the markup validation tool to check the email code.

Example of an email:

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

Continue reading