跳到内容
开发者文档支持 请求演示 登录
Pushwoosh.com

使用 HTML 代码编辑器创建邮件内容

YouTube 视频：使用 HTML 从零开始构建您的邮件内容

如果您精通 HTML 并喜欢自己编写代码，您可以使用 Pushwoosh HTML 代码编辑器创建邮件。

创建邮件内容

Anchor link to

要开始创建邮件内容，请将您的 HTML 代码粘贴到 HTML 选项卡中。当您处理邮件时，编辑器会提供实时预览。

或者，您可以通过单击底部面板中的 上传 HTML 文件 来上传 HTML 文件。

要为您的邮件增添个性化色彩，请使用自定义标签。为此：

  1. 单击编辑器底部的 标签 图标。
  2. 选择所需的标签及其修饰符，并根据需要提供默认值。
  3. 单击 插入 将自定义标签包含到您的邮件内容中。
自定义标签插入界面，显示标签选择和默认值选项

要在邮件中包含表情符号，请单击编辑器底部的 表情符号 图标。

添加图片

Anchor link to

要向邮件中添加图片，请在 HTML 中包含一个 <img> 标签，并将其 src 属性设置为图片 URL。

要重复使用 媒体库 中的图片，请在此处复制其 URL 并将其粘贴到 src 属性中。有关步骤，请参阅 复制图片 URL。

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

将 YOUR-MEDIA-STORE-URL 替换为您从媒体库复制的 URL。

使用本地化

Anchor link to

本地化使您能够为使用不同语言的用户提供个性化体验。

在 HTML 代码编辑器中，您可以通过定义默认语言并添加多种语言选项来使用本地化。例如，您可以设置一条默认的英文消息，然后添加德语和西班牙语的翻译。这确保您的邮件内容能适应每个用户的语言偏好。

以下是如何构建本地化数据的示例。此示例使用英语作为默认语言，并包含德语和西班牙语的翻译。

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

一旦您的本地化数据结构化并添加到编辑器的 本地化选项卡 中，就可以使用占位符将其整合到您的 HTML 内容中。占位符会根据用户的语言偏好，动态地将本地化文本插入到您的内容中。以下是在您的 HTML 中实现它的方法：

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

考虑以下场景：您正在宣传咖啡混合产品的限时折扣。通过使用上述的本地化结构，您可以有效地向使用不同语言的用户传达您的促销信息。您的促销 HTML 代码可能如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>


  </div>
</body>
</html>

通过此设置，如果用户的语言是德语，他们将看到德语邮件。选择接收英文邮件的用户将看到英文版本。选择接收西班牙语邮件的用户将收到西班牙语版本。这确保所有收件人都能以他们偏好的语言收到您的消息。

插入和组合邮件内容块

Anchor link to

Pushwoosh 允许您通过将一个邮件内容插入到另一个邮件内容中来组合邮件内容。这使得在不同邮件中重复使用页眉、页脚或特定内容块变得容易。

例如，如果您有 邮件内容 A（页眉）和 邮件内容 B（新闻通讯），您可以将 邮件内容 A 插入到 邮件内容 B 中，而无需每次都手动复制内容。

语法

Anchor link to

要将一个内容块插入到另一个内容块中，请使用以下语法：

{% email_content "AAAAA-BBBBB" %}

其中 “AAAAA-BBBBB” 是您要插入的邮件内容的 ID。您可以在邮件内容列表中的内容名称下方找到该 ID。

邮件内容 ID 显示，展示内容名称和唯一标识符

示例

假设您有两个内容块：

  • 页眉内容 (ID: “AAAAA-BBBBB”)，具有预定义的页眉设计。
  • 新闻通讯内容，您希望在其中包含页眉。

要将页眉插入到新闻通讯中，您将使用以下代码：

{% email_content "AAAAA-BBBBB" %}

这使您可以轻松地在多个邮件营销活动中重复使用预定义的页眉。它节省了时间并确保了邮件的一致性。

添加退订链接

Anchor link to

在您的邮件中包含一个退订链接，以便收件人可以根据法规和他们的偏好选择退出。Pushwoosh 提供了三个可以在您的 HTML 中使用的变量。

退订链接

Anchor link to

添加此链接，以便用户可以从他们收到的消息中选择退出：

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

当您发送邮件时，该变量将被替换为 Pushwoosh 退订 URL。

  • 当订阅偏好中心启用时，收件人仅从分配给该邮件的类别（例如，新闻通讯）中退订。会出现一个确认屏幕，他们可以在其中 重新订阅 该类别或 管理偏好 以调整所有邮件类别。 了解更多

  • 当订阅偏好中心未启用时，收件人将从所有营销邮件中退订。

点击次数会计入 消息历史 中该消息的退订率。

从所有类别退订

Anchor link to

添加一个链接，一次性将用户从所有邮件类别中退订：

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>

偏好中心链接

Anchor link to

添加一个直接链接到 偏好中心，用户可以在其中管理他们接收的类别：

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>

了解偏好中心的工作原理

下面的屏幕截图显示了一个使用所有三种链接类型的页脚。

包含所有三种退订链接的邮件页脚示例：退订、管理偏好、从所有邮件退订

保存邮件内容

Anchor link to

完成邮件创建后，单击编辑器顶部的 保存 按钮。

保存邮件内容对话框，显示名称和标签字段

在出现的新窗口中，为您的邮件指定一个清晰的名称，可以与您的主题行相同。此外，创建一个标签以帮助您在邮件列表中轻松找到它。

如果您尚未 设置发件人详细信息，请确保也完成此操作。然后，单击 保存。

现在您的邮件内容已准备就绪，可以在邮件营销活动中使用。 了解更多

发送测试邮件

Anchor link to

在发送邮件营销活动之前，您可以发送一封测试邮件，以预览内容在收件人收件箱中的显示方式。这使您可以在最终确定营销活动之前检查布局、内容和任何个性化元素，以确保准确性。如果需要，可以根据测试结果调整内容。

要发送测试邮件，请在邮件编辑器中单击 测试邮件。

邮件编辑器界面中的测试邮件按钮

在打开的窗口中：

  1. 在 邮件地址 字段中，输入您希望接收测试邮件的邮件地址。

如果 KYC 尚未完成，您需要从测试地址列表中选择一个已验证的邮件地址，而不是输入邮件地址。

已验证的测试邮件地址选择下拉菜单
  1. 如果您的邮件包含动态内容（个性化数据的占位符），请添加用于测试目的的示例值。

例如：

  • Age (integer): 输入一个数字来代表年龄占位符（例如，21）。
  • FirstName (string): 输入一个示例名字（例如，David）。

这些值将在测试邮件中替换实际的收件人数据，让您能够验证动态内容的显示方式。

  1. 填写完必要的详细信息后，单击 发送测试邮件 将测试消息发送到提供的邮件地址。
发送测试邮件确认对话框，包含示例数据字段