邮件自定义

运行机制

登录管理器产品提供一组发送给用户的标准邮件模板:

  • 注册确认
  • 欢迎
  • 验证(包含链接和验证码)
  • 密码更改
  • 邮箱地址更改
  • 多因素认证(MFA)代码
  • MFA设置更改
  • 新闻订阅

模板使用HTML和CSS代码编写。

您可以:

  • 对标准模板进行更改以自定义邮件的外观和内容;
  • 设置用自己的邮件服务从艾克索拉发送邮件或使用SendGrid应用程序发送邮件。

Note
对于上面列出的所有情形(注册确认、欢迎消息等),艾克索拉会向您的用户发送邮件。该功能无法禁用。
Notice
邮件自定义仅在签署产品许可协议后可用。要签署该协议,请前往您发布商帐户中的协议部分。

适用对象

集成了登录管理器并使用艾克索拉数据库或自定义存储的合作伙伴。

邮件开发建议

并没有适用于所有邮件应用程序的统一邮件开发标准,因为每个应用程序显示邮件的方式都不一样。您的邮件设计应尽量简单、简洁,以确保在不同邮件应用程序和设备上的显示趋于一致。

一般结构

JavaScript和CSS

不能通过JavaScript在邮件中添加多媒体内容。如要在邮件中添加动画,请使用GIF图片。如要在邮件中添加视频,请使用图片作为链接将用户定向到视频内容的URL。

部分邮件应用程序仅支持有限的CSS3功能。创建邮件模板时应注意这一点。

请只使用内联样式。大部分邮件应用程序会排除写在style标记中的样式。

Copy
Full screen
Small screen
<div style="text-align: center;"></div>

使用独立区块

建议使用最有效的邮件开发方法,即采用独立区块的形式。该方法有以下优点:

  • 在设备上显示不正确的区块不会影响其他区块的显示。
  • 可在现有邮件中调整区块并快速测试效果。
  • 可创建一套区块然后按照不同邮件的目的快速组合使用。

使用表格

邮件应用程序无法正确处理区块元素和position: absolute属性。要创建包含区块的邮件,请使用表格布局,并指定表格单元格的alignvalign属性。使用表格能更好地适应不同的屏幕。

请避免通过colspanrowspan属性合并单元格,应使用插入表格。

大小和单位

要让内容在大小屏幕上都能正确显示且没有滚动条,请为所有包含内容的容器指定以下设置:

  • 始终指定width: 100%属性。
  • 最大屏幕的宽度限制。建议宽度不要超过800px,因为该值是最适合阅读的宽度。

请不要以%em为单位来指定line-height属性。应只使用像素为单位,以便邮件在所有邮件应用程序和不同屏幕上看起来一样。

使用字体

请使用标准字体。大多数邮件应用程序不支持外部字体。

标准字体:

  • 衬线体:Courier、Courier New、Georgia、Times、Times New Roman
  • 无衬线体:Arial、Black、Tahoma、Verdana、Trebuchet MS

摘要

大部分邮件应用程序会显示一行摘要作为邮件预览。应始终添加摘要,因为它会鼓励用户打开收到的邮件。有些邮件应用程序可能会因为邮件主题太长而截断显示,添加摘要可帮助用户了解邮件的内容。

代码长度

请减少代码长度以便邮件正确显示。例如,Gmail和Yahoo在显示超过100 KB的邮件时会出现问题。

使用图片

开发包含图片的邮件时,请考虑以下事项:

  • 用户可能在邮件应用程序设置中禁用了显示图片。
  • 图片可能需要很长时间加载。
  • 图片质量可能在不同屏幕上有所区别。

请使用PNG或JPEG图片格式,不要用SVG格式,因为大部分邮件应用程序不支持该格式。

对于4K分辨率的显示器,请使用建议大小两倍的图片。例如,对于原本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. 如需要,编辑发件人字段:指定发送人的名称(该信息会在邮件标题中显示)和邮箱地址。默认发送人名称为您登录管理器项目的名称,默认邮箱地址是noreply@login.xsolla.com。填写该字段时,可使用application.name形式的常用变量,例如{{application.name}} <support@yourcompany.com>

Note
非自定义邮件使用标准艾克索拉模板。

邮件模板示例:

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>

本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗?

不想回答

感谢您的反馈!

继续阅读

上次更新时间: 2022年4月22日

发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!