概述
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。
- 使用发送测试电子邮件预览在各客户端和设备上的渲染效果。
- 在计划或发送前修复布局问题。
链接和跟踪
默认情况下，HTML 电子邮件启用链接跟踪。- 支持多链接跟踪
- 点击显示在消息报告中
取消订阅链接
所有营销电子邮件都应包含取消订阅链接。 没有有效取消订阅选项的电子邮件更可能：- 被标记为垃圾邮件
- 损害发件人声誉
- 被收件箱提供商阻止
- OneSignal 的默认取消订阅链接
- 使用自定义取消订阅页面（可选）
HTML 电子邮件最佳实践
始终使用内联 CSS
大多数电子邮件客户端会删除<style> 块和外部样式表。
试试这个工具：响应式电子邮件 CSS 内联器
深色模式样式
当用户启用深色模式时，许多电子邮件客户端会应用自动颜色反转。这种行为可能导致不可预测的结果，例如按钮显示为黑色背景和黑色文字。为确保一致的渲染，我们建议明确定义您的电子邮件在浅色和深色模式下的外观。 最佳实践：- 内联定义基础样式。 始终直接在元素上设置背景色和文字色，而不是依赖默认值或透明度。
- 为深色模式使用媒体查询。 Apple Mail 和 iOS 上的 Outlook 等客户端支持
@media (prefers-color-scheme: dark)，您可以在其中为深色模式覆盖样式。 - 谨慎应用
!important。 为深色模式覆盖添加!important有助于防止收件箱在您的自定义样式之上叠加反转规则。 - 标示主题支持。 在 HTML head 中包含以下元标记以减少自动反转：
跨客户端测试。Gmail（iOS、Android、Web）、Outlook 和 Apple Mail 的行为都不相同。测试有助于及早发现问题。
推荐的电子邮件图像尺寸
纵横比：- 头部/横幅图像：
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–200KB以下 - 总电子邮件大小（包括图像）在
1MB以下 - 更小 = 更快的加载时间和更好的送达率
- JPG：最适合照片
- PNG：最适合图形、徽标、透明度
- GIF：用于简单动画（保持文件大小较小）
- WebP：在电子邮件中尚未得到广泛支持 — 避免使用
- 始终包含 alt 文本以提高可访问性和在图像无法加载时使用
- 使用内联 CSS 进行样式设置（许多客户端会删除
<style>标签） - 避免背景图像（支持不一致）
- 跨客户端测试（Gmail、Outlook、Apple Mail 的渲染都不同）
- Outlook 经常忽略图像尺寸，因此在 HTML 中同时设置 width 和 height 属性
为图像添加 alt 标签
Alt 文本提高可访问性，并确保即使图像被阻止或无法加载也能传达信息。| 电子邮件客户端 | 阻止图像？ | 显示 Alt 文本 | 样式化 Alt 文本 |
|---|---|---|---|
| AOL | 是 | 是 | 是 |
| Gmail | 是 | 是 | 是 |
| Yahoo | 是 | 是 | 是 |
| Outlook | 有时 | 是 | 是 |
命名和格式化您的 HTML
为了可访问性，使用语义 HTML 和有意义的标签命名。这有助于屏幕阅读器更准确地解释您的内容。 此外，使用标准颜色格式和适当的缩进以便于维护。检查损坏的链接
损坏的链接会降低送达率，并可能将您的电子邮件标记为垃圾邮件。在发送前彻底测试所有链接。仅使用支持的 HTML
电子邮件客户端不支持：- JavaScript
<iframe>- HTML 表单
- 嵌入音频或视频
- Flash
- CSS 定位或分层技巧
发送前验证
发送前，请验证您的电子邮件：- 测试所有链接
- 验证取消订阅行为
- 向 Gmail、Outlook 和 Apple Mail 发送测试电子邮件
- 检查深色模式渲染
如果您的电子邮件在主要客户端中正确渲染且取消订阅功能正常，则可以发送。