如何自定义发送给用户的电子邮件

运行机制

对于发送给用户的以下邮件,您可以自定义其外观和内容:

  • 帐户确认
  • 电子邮箱更改
  • 密码更改

电子邮件使用HTML和CSS进行自定义。

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"属性。

其他建议

自适应邮件开发的其他建议

如何获取

电子邮件必须包含解释性文字和确认用户操作的链接。请使用以下占位符:

  • {{subject}}用于放置邮件标题。
  • {{text}}用于放置在艾克索拉侧使用的邮件文本。
  • {{action_link}}用于放置链接。链接本身在艾克索拉侧生成。
  • {{button}}用于放置按钮文字。

要创建自定义邮件:

  1. 前往发布商帐户,然后打开登录管理器项目 > 自定义 > 电子邮件通知
  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
如要从自定义地址发送电子邮件,请联系您的帐户经理。
本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗?

不想回答

感谢您的反馈!

继续阅读

上次更新时间: 2021年6月9日

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

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