跳到内容

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

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

{
"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

请务必在您的邮件中包含退订链接,以便为收件人提供轻松选择退出未来通信的选项,以遵守法规并尊重他们接收邮件的偏好。

按如下方式将 退订链接 添加到您的邮件中:

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

在您发送邮件时,属性值 %%PW_EMAIL_UNSUBSCRIBE%% 将被替换为 Pushwoosh 退订 链接。当收件人点击该链接时,他们将选择退出您的邮件,并计入该特定邮件在 消息历史 中的退订率。

保存邮件内容

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 将测试消息发送到提供的邮件地址。
发送测试邮件确认对话框,包含示例数据字段