跳到内容

HTML 代码编辑器

YouTube 视频:使用 HTML 从头开始构建您的电子邮件内容

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

创建电子邮件内容

Anchor link to

要开始创建电子邮件内容,请将您的 HTML 代码粘贴到 HTML 选项卡中。编辑器会在您工作时提供实时的电子邮件预览。

或者,您也可以点击底部面板中的 Upload HTML File 来上传 HTML 文件。

要为您的电子邮件增添个性化色彩,请使用自定义标签。为此:

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

要在电子邮件中包含表情符号,请点击编辑器底部的 Emoji 图标。

添加图片

Anchor link to

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

要重复使用 Media store 中的图片,请在此处复制其 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 替换为您从 Media store 复制的 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é!"
}
}

在编辑器中的 Localization Tab 中构建并添加本地化数据后,使用占位符将其整合到您的 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 中,而无需每次都手动复制内容。

要将一个内容插入到另一个内容中,请使用以下语法:

{% 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。

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

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

点击次数会计入该消息在 Message History 中的退订率。

从所有类别退订

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

完成电子邮件创建后,点击编辑器顶部的 Save 按钮。

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

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

如果您还没有 设置发件人详细信息,请确保也完成此操作。然后,点击 Save

现在您的电子邮件内容已准备就绪,可以用于电子邮件营销活动。了解更多

发送测试电子邮件

Anchor link to

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

要发送测试电子邮件,请在电子邮件编辑器中点击 Test email

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

在打开的窗口中:

  1. Email address 字段中,输入您希望接收测试电子邮件的电子邮件地址。

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

已验证的测试电子邮件地址选择下拉菜单
  1. 如果您的电子邮件包含动态内容(个性化数据的占位符),请添加示例值以进行测试。

例如:

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

这些值将替换测试电子邮件中的实际收件人数据,让您可以验证动态内容的显示方式。

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