自定义电邮通知模板

我的服务模式是什么？

快速查看：管理中心 > 渠道 > Talk 和电邮 > 电邮

重要提示：对于试用版，编辑电邮模板的选项默认不启用；对于某些帐户，该选项可能也不启用。要启用编辑，请联系 Zendesk 客户支持，并附上您的子域名、您公司网站链接及您要进行的更改的简要描述。

几乎从您的帐户发送的所有电邮通知（例如工单和帮助中心文章通知）都由电邮模板控制。协作快捷对话电邮通知不使用您的电邮模板。

模板格式为 HTML 和纯文本电邮。每封电邮都包含这两种格式。终端用户看到的版本取决于其电邮客户端的首选设置。

您可以通过一些简单的样式更改自定义 HTML 模板，使其与您的品牌保持一致。您还可以在电邮的文本版本中编辑信息。

提示：阅读此 Zendesk 博客文章，了解如何使用客户服务电邮模板节省时间。

本文章包含以下部分：

• 编辑电邮模板
• 编辑 HTML 模板
• 编辑文本模板
• 了解系统占位符

相关文章：

• 添加或移除电邮中的工单链接
• 添加和移除定界符电邮通知

编辑电邮模板

您可以自定义发送给客户的电邮通知的外观和风格。通知有 HTML 模板和纯文本模板。

如果您使用的是 Enterprise 服务模式，可以先在沙盒环境中修改并测试电邮更改，然后再公开部署（请参阅在沙盒环境中测试更改）。

编辑电邮模板

1. 在管理中心，单击侧栏中的 渠道，然后选择 Talk 和电邮 > 电邮。
2. 在电邮模板部分，单击在电邮中显示用户个人资料照片以在电邮中显示用户个人资料。

   并非所有电邮客户端都默认显示图像。

3. 根据需要修改 HTML 模板。
4. 根据需要修改文本模板。
5. 要使用模板的默认版本重新开始，单击任一模板下面的恢复默认。
6. 单击页面底部的保存。

   电邮模板已更新。

除了自定义电邮模板外，您还可以如下更改电邮：

• 显示用户个人资料照片
• 添加或移除工单链接
• 添加或移除定界符电邮通知
• 使用 Liquid Markup
  注意：虽然 Liquid Markup 支持宏、触发器和自行程序，并可用于工单通知，但不支持帮助中心文章通知，例如发送给关注者的电邮通知。您可按照将电邮模板用于多个品牌的步骤进行操作，而不必使用 Liquid 更改电邮通知的外观。

编辑 HTML 模板

您可通过在 HTML 模板中编辑 HTML 和 CSS 更改 HTML 电邮的外观。

注意：对于试用版，HTML 模板编辑默认不启用。要启用 HTML 模板编辑，请联系 Zendesk 客户支持，并附上您的子域名。

本部分涵盖以下主题：

• 更改 HTML 电邮的外观
• HTML 电邮自定义指南

更改 HTML 电邮的外观

HTML 模板由 DIV 标签和系统占位符组成。

占位符提供了电邮的大部分内容：

• {{content}} 为必填项，不得删除
• {{delimiter}} 仅在通知中使用电邮定界符时才需要
• {{styles}} 和 {{attributes}} 供日后使用，有时被系统用于添加样式和属性，以支持从右到左的区域设置
• {{footer}} 为可选项

模板中不得使用任何其他占位符。有关更多信息，请参阅了解系统占位符。

DIV 标签可将 CSS 样式应用于内容。您可以通过添加或修改 CSS 样式更改电邮的整体外观和风格、定界符或页脚。

如果您要更改文本颜色，请使用足够的颜色对比度以确保内容无障碍。遵循 Web 内容无障碍指南 (WCAG) 的建议，并利用 WebAIM 颜色对比度检查器等工具检查文本和背景之间的对比度。

提示：如果您已设置多个品牌，可参阅 Andrew Soderberg 提供的以下技巧：如何构建电邮模板以将自定义 HTML 布局用于多个品牌。

编辑模板的样式

1. 在管理中心，单击侧栏中的 渠道，然后选择 Talk 和电邮 > 电邮。
2. 在电邮模板组别，根据需要修改 HTML 模板。

   

   要使用任何标准模板占位符，首先输入占位符名称，然后从显示的可用选项中进行选择。

   

3. 单击保存。

例如，以下介绍了如何将页脚的字体颜色更改为蓝绿色：

...
 <div style=" color: #009966;
              margin: 10px 0 14px 0;
              padding-top: 10px;
              border-top: 1px solid #eeeeee;" >
    {{footer}}{{footer_link}}
  </div>
...

字体颜色设置为青色的十六进制值，样式声明如下：

color: #009966;

注意：链接的颜色无法自定义。链接使用 CSS 伪类（例如 :hover）进行样式设计，例如：a:hover {color:#FF00FF;}。然而，内联 CSS 不支持 CSS 伪类，且 Gmail 等主要电邮客户端会剔除任何非内联 CSS。

要向模板添加公司徽标等图像，请插入引用该图像的 IMG 标签。例如：

<img src="http://YOURWEBSITE.com/logo.png"/>

注意：在添加徽标和其他图像之前，请记住大多数电邮客户端默认不显示图像。

要将超链接添加到徽标，请将 IMG 标签放入定位标记（如下所示）：

<a href="http://YOURACCOUNT.zendesk.com"><img src="http://YOURWEBSITE.com/logo.png"></a>

有关更多信息，请参阅以下资源：

• Mozilla 开发者网络上的 CSS 门户
• 帮助中心 CSS 指南

HTML 电邮自定义指南

您可以广泛自定义 HTML 模板，但请记住，Zendesk 不支持自定义编码。如果您的帐户创建于 2022 年 6 月 15 日或之后，则该模板符合 HTML5 标准。要了解关于受支持的 HTML5 工单标签的更多信息，请参阅 www.w3docs.com 上的 HTML5 元素参考。

设计 HTML 电邮并不容易，因为 HTML 和 CSS 在不同网络浏览器和电邮客户端中的呈现方式各不相同。某些类型的格式甚至可能被解释为垃圾信息。

一般而言，自定义应尽可能简单，并遵循以下准则：

• 请勿使用 CSS3 样式声明，而务必使用 CSS1 或 2。
• 请勿添加更多 DIV 组别。
• 尽量减少文本格式。大量粗体文本可能触发垃圾信息过滤器。
• 请勿添加太多图像（另一个触发垃圾信息过滤器的因素），并缩小您使用的图像的比例。
• 对所有图像使用 ALT 标签，该标签可在用户允许显示图像之前显示图像描述。
• 如果您了解图像的宽度和高度，请直接定义。这样可以强制电邮客户端在下载图像之前在电邮布局中保留图像空间。
• 并非所有电邮客户端都支持背景图像，因此请勿将其用于信息或功能设计。
• 请勿链接到已关闭 Zendesk 帐户中的图像。如果目标收件人不是已注册并登录的用户，则图像会损坏。

编辑文本模板

如果用户选择不阅读 HTML 格式的电邮消息，将使用文本电邮模板。该模板由两个系统占位符组成：

{{content}}

{{footer}}

占位符 {{content}} 可插入文本定界符、工单标题、根据业务规则生成的文本（触发器、自行程序或宏），以及工单评论。占位符 {{footer}} 是可选项。您可以根据需要将其移除。有关更多信息，请参阅了解系统占位符。

注意：文本模板中不需要占位符 {{delimiter}}。占位符 {{content}} 包含定界符文本。

要在电邮中添加一行文本，只需将其添加到模板中。

Thanks for contacting MondoCam Support!

{{content}}

{{footer}}

编辑文本模板

1. 在管理中心，单击侧栏中的 渠道，然后选择 Talk 和电邮 > 电邮。
2. 向下滚动到电邮模板部分。
3. 根据需要修改文本模板。
4. 单击页面底部的保存。

了解系统占位符

通知电邮的大部分内容都是由 Zendesk 系统动态生成。电邮模板中的占位符表示动态生成的内容。占位符需要加双花括号，例如 {{footer}}。

占位符可插入定界符文本、电邮内容和页脚。

{{delimiter}}

显示这行文本“##- 请在此行以上输入您的回复 -##”。系统使用定界符来将旧的内容与新的内容分隔开来。当有人回复电邮时，回复中的新内容将作为评论添加到工单中。如果您使用的是电邮定界符，则 HTML 模板必须含有此占位符。请参阅自定义电邮中的定界符文本。

{{content}}

显示电邮内容，可能包括工单评论和用户个人资料照片。内容定义在触发器、自行程序，或从您的帐户发送电邮的其它工具中。请参阅创建和管理触发器用于工单更新和通知。

{{quoted_content}}

可选。显示消息历史记录。被引用的内容通常在用户的电邮应用程序中折叠，但用户可以展开。例如，在 Gmail 中，用户单击省略号 (…)。请参阅了解简化的电邮讨论串。

引用的内容可以不包含附件，具体取决于工单的创建方式：

• 如果工单是通过电邮创建的，则引用的内容不会包含附件。
• 如果工单是通过网络表格（或其他非电邮渠道）创建的，则附件会包含在引用的内容中。

{{footer}}

可选。显示“此电邮是由 YourZendeskName 提供的服务”这行文本。还将在发送给专员的电邮中显示工单属性，例如状态和请求者。属性不会显示在发送给终端用户的电邮中。

{{footer_link}}

可选。显示这行文本“由 Zendesk 提供”。Zendesk 这个词是转到 https://www.zendesk.com 的链接。

{{styles}}

可选。供日后使用。目前，如果系统检测到区域设置是从右到左，会使用此占位符添加样式。

{{attributes}}

可选。供日后使用。目前，如果系统检测到区域设置是从右到左，会使用此占位符添加属性。