Email customization

How it works

The Login product provides a set of standard templates for emails you send to users:

• Registration confirmation
• Welcome
• Confirmation (with a link and code)
• Password change
• Email address change
• Multi-factor authorization (MFA) code
• MFA settings change
• News subscription

Templates are written in HTML and CSS.

You can:

• make any changes to the standard templates to customize the look and content of the emails;
• set up sending emails from Xsolla using your mail service or sending emails using the SendGrid application.

Who can use it

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

Email development recommendations

There is no unified email development standard for email applications – each application displays emails differently. You should create a simple and concise design to ensure your email is displayed similarly across different email applications and devices.

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.

Some email applications have limited support for CSS3 features. Keep this in mind when you create an email template.

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

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

Development by independent blocks

• 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

Code length

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

How to get it

The email you send to the user should contain explanatory text and a link to confirm the user’s actions. For each element of the email, you can use:

• your own text that will be displayed in the same language it was written;
• Xsolla standard texts localized in 20 languages.

Xsolla texts are inserted into the email template as variables (placeholders), for example:

• {{subject}} – the email header text.
• {{text}} – the email body text.
• {{action_link}} – the link text. The link address is generated by Xsolla.
• {{button}} – the button text.

When generating an email, text from the corresponding language is used instead of the placeholders.

The language for the email is selected based on the user’s locale. The following methods are available for determining the user’s locale:

• When integrating via the Login widget, you can pass the user’s locale from your application’s interface to the widget when it is opened. The widget then passes the locale to the Login API methods.
• When integrating via the Login API, you can pass the user’s locale from your application’s interface to the Login API method when the method is called.
• If you don’t pass the user’s locale, the language is determined from the IP address or the browser’s language.

To customize the email template:

1. Go to your Publisher Account and open your project > Login.
2. Click Configure in the pane of a Login project.
3. Go to the Customization block and select the Email customization section.

4. Select the email template from the drop-down list.
5. If the template opens in Preview mode, click the toggle button (top right) to switch to HTML mode.
6. Add or modify the HTML layout of the email, taking into account the recommendations.
7. To check how the email will be displayed, switch to Preview mode.

8. Check the validity of the email code.
9. If necessary, edit the Send emails from field: specify the name of the sender, which will be displayed in the email header, and the sender’s email address. The name of your Login project is used as the default sender name, and the default email address is noreply@login.xsolla.com. When you fill in the field, you can use any common variables of the form application.name. For example, {{application.name}} <>.

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