概述
HTML 编辑器让您使用自己的 HTML 发送完全自定义的品牌电子邮件。 您应该在以下情况下使用 HTML 编辑器：- 需要完全控制布局、间距和样式
- 已有可投入生产的 HTML 电子邮件模板
- 熟悉电子邮件客户端限制
HTML 电子邮件与网页不同。许多 HTML 和 CSS 功能在电子邮件客户端中不受支持或渲染不一致。
先决条件
在使用 HTML 编辑器之前，请确保您：- 具有构建响应式 HTML 电子邮件的经验
- 在可公开访问的 URL 上托管所有图像（您的网站、CDN、S3 等）
预期结果
设置后，您的电子邮件将：- 在主要客户端（Gmail、Outlook、Apple Mail）中一致渲染
- 正确跟踪链接点击
- 包含有效的取消订阅机制
- 通过垃圾邮件和送达率检查
导入您自己的模板
如果您已有 HTML 电子邮件模板，可以通过以下任一方式将其添加到 OneSignal：- 使用电子邮件模板转发
- 使用 Create Template API 程序化创建模板
- 将 HTML 复制粘贴到 HTML 编辑器中
使用 HTML 编辑器
创建电子邮件消息时，选择 HTML 编辑器 作为编辑器类型。- 在编辑器中粘贴或编写您的 HTML。
- 使用发送测试电子邮件预览在各客户端和设备上的渲染效果。
- 在计划或发送前修复布局问题。
链接和跟踪
默认情况下，HTML 电子邮件启用链接跟踪。支持多链接跟踪，点击次数显示在消息报告中。链接
为电子邮件配置链接跟踪、多链接跟踪和点击分析。
深度链接
通过电子邮件链接将收件人路由到应用中的特定页面。
取消订阅链接
所有营销电子邮件都必须包含取消订阅链接。 没有有效取消订阅选项的电子邮件更可能：- 被标记为垃圾邮件
- 损害发件人声誉
- 被收件箱提供商拦截
- OneSignal 的默认取消订阅链接
- 使用自定义取消订阅页面（可选）
HTML 电子邮件最佳实践
始终使用内联 CSS
大多数电子邮件客户端会删除<style> 块和外部样式表。
推荐工具：响应式电子邮件 CSS 内联器
深色模式样式
当启用深色模式时，许多电子邮件客户端会自动反转颜色，可能导致不可预测的结果——按钮可能显示为黑色背景和黑色文字，或徽标可能消失。请明确定义您的电子邮件在浅色和深色模式下的外观，以避免这些问题。各电子邮件客户端的深色模式行为
| 客户端 | 行为 | 是否支持 prefers-color-scheme CSS？ |
|---|---|---|
| Apple Mail（iOS/macOS） | 完全颜色反转 | 是 |
| Gmail（iOS/Android 应用） | 部分反转——更改浅色背景但不更改所有颜色 | 否 |
| Gmail（Web） | 不应用深色模式渲染 | 不适用 |
| Outlook（Windows） | 使用 Word 渲染引擎完全反转 | 否——忽略大多数 CSS 覆盖 |
| Outlook（Mac/iOS） | 部分反转 | 是 |
| Yahoo Mail | 部分反转 | 否 |
| Samsung Mail | 完全反转 | 否 |
最佳实践
- 内联定义基础样式。 始终直接在元素上设置背景色和文字色，而不是依赖默认值或透明度。
- 为深色模式使用媒体查询。 支持
@media (prefers-color-scheme: dark)的客户端（Apple Mail、Mac/iOS 上的 Outlook）允许您为深色模式覆盖样式。 - 谨慎使用
!important。 为深色模式覆盖添加!important有助于防止收件箱在您的自定义样式之上叠加反转规则。 - 标示主题支持。 在 HTML
<head>中包含以下元标记以减少自动反转：
- 避免纯白和纯黑。 使用接近白色的浅色和深灰色，以减少完全反转客户端的影响。
- 谨慎使用透明 PNG。 透明背景上的深色徽标在深色背景下会变得不可见。请添加浅色轮廓，或使用内置背景的版本。
有关使用拖放编辑器添加深色模式 CSS 的分步说明，请参见使用拖放功能设置深色模式样式。
推荐的电子邮件图像尺寸
纵横比
纵横比
- 头部/横幅图像：
3:1或4:1（例如，600×200或600×150） - 主图像：
16:9或2:1（例如，600×338或600×300） - 方形图像：
1:1（例如，300×300）— 适用于产品网格 - 缩略图：
1:1或4:3 - 最大宽度：
600–700px是标准（大多数电子邮件客户端） - 为视网膜显示器以
2x设计（例如，1200px宽，显示为600px）
文件大小
文件大小
- 单张图像保持在
100–200 KB以下 - 总电子邮件大小（包括图像）在
1 MB以下 - 图像越小，加载越快，送达率越好
文件格式
文件格式
- JPG — 最适合照片
- PNG — 最适合图形、徽标及带透明度的图像
- GIF — 用于简单动画（保持文件大小较小）
- WebP — 在电子邮件中尚未得到广泛支持，建议避免使用
常规提示
常规提示
- 始终包含 alt 文本以提高可访问性，并在图像无法加载时传达信息
- 使用内联 CSS 进行样式设置（许多客户端会删除
<style>标签） - 避免使用背景图像（客户端支持不一致）
- 跨客户端测试——Gmail、Outlook 和 Apple Mail 的渲染方式各不相同
- Outlook 经常忽略图像尺寸，因此请在 HTML 中同时设置
width和height属性
为图像添加 alt 文本
Alt 文本提高可访问性，并确保即使图像被拦截或无法加载也能传达信息。大多数主要电子邮件客户端均会显示并样式化 alt 文本：| 电子邮件客户端 | 拦截图像？ | 显示 Alt 文本 | 样式化 Alt 文本 |
|---|---|---|---|
| AOL | 是 | 是 | 是 |
| Gmail | 是 | 是 | 是 |
| Yahoo | 是 | 是 | 是 |
| Outlook | 有时 | 是 | 是 |
仅使用支持的 HTML
电子邮件客户端不支持：- JavaScript
<iframe>- HTML 表单
- 嵌入音频或视频
- CSS 定位或分层技巧
发送前验证
发送前，请检查以下内容：- 所有链接均有效（损坏的链接会影响送达率，并可能触发垃圾邮件过滤器）
- 取消订阅链接功能正常
- 测试电子邮件在 Gmail、Outlook 和 Apple Mail 中正常渲染
- 深色模式渲染效果可接受
- HTML 使用语义标签和适当缩进，以提高可访问性和可维护性
如果您的电子邮件在主要客户端中正确渲染且取消订阅功能正常，则可以发送。
个性化
使用 Liquid 模板语言在 HTML 中直接插入订阅者特定内容，例如姓名、标签或备用值。示例：{{ first_name | default: "there" }}
消息个性化
可用的个性化变量及其使用方式。
使用 Liquid 语法
条件语句、过滤器、循环及高级 Liquid 模式。
常见问题
我可以重用现有的电子邮件模板吗？
可以。通过电子邮件模板转发将模板转发到 OneSignal，使用 Create Template API 上传模板，或将 HTML 直接复制粘贴到编辑器中。我可以使用自定义字体吗？
可以，但支持程度各异。请使用@font-face 声明自定义字体，并始终包含系统字体备用项。Windows 上的 Outlook 完全忽略 Web 字体，会回退到系统默认字体。
为什么我的电子邮件在深色模式下显示不同？
每个电子邮件客户端对深色模式的处理方式不同——有些完全反转颜色，有些部分反转，Gmail Web 版完全不应用深色模式。请参阅上方的客户端行为表格了解具体说明。建议明确定义浅色和深色模式样式以控制渲染效果。电子邮件中不支持哪些 HTML 和 CSS 功能？
不支持 JavaScript、<iframe>、HTML 表单、嵌入音频/视频及 CSS 定位。请对所有样式使用内联 CSS——大多数客户端会删除 <style> 块和外部样式表。
电子邮件的最大大小是多少？
总电子邮件大小（HTML + 图像）请保持在 1 MB 以下。HTML 超过 102 KB 的电子邮件会被 Gmail 截断，折叠以下的内容将隐藏在”查看完整消息”链接后面。相关页面
使用拖放功能设计电子邮件
可视化电子邮件构建器，无需编写完整 HTML 即可设计电子邮件。
电子邮件概述
使用 OneSignal 发送电子邮件的端到端指南。
电子邮件模板
跨活动保存和重用电子邮件设计。
取消订阅链接
添加默认或自定义取消订阅链接以符合合规要求。
消息个性化
使用标签、Liquid 语法和动态内容个性化电子邮件。
电子邮件模板转发
将现有 HTML 电子邮件模板导入 OneSignal。