在内置编辑器中创建应用内消息

在 Pushwoosh 内置编辑器中构建应用内消息模板，无需编写代码。您可以获得一个可重复使用的布局，其中包含内容块、图片、按钮和个性化文本，您可以在 Customer Journey 中、作为一次性应用内消息或从推送中显示。

创建新的应用内模板

应用内模板是您一次性创建的可重用设计，然后在营销活动中向用户展示。您可以通过上传自定义的 HTML ZIP 文件或在内置编辑器中构建来创建模板。本文介绍如何在内置编辑器中从头开始创建模板。按照相同的步骤来自定义现有模板。

前往 Content → In-apps。
点击 Add template。

输入模板名称。
选择创建模板的方式：
- Upload ZIP： 上传一个 ZIP 文件，其中包含您的 HTML 应用内消息。
- Create new template： 在内置编辑器中构建模板。
选择 Create new template。
点击 Add template。

探索编辑器布局

内置编辑器有四个区域。每个区域都有明确的功能。

顶部栏

使用顶部栏重命名模板、撤销错误、保存您的工作，或在需要更改消息在设备上显示方式时打开 In-app settings。请参阅配置应用内消息在设备上的外观。

画布

使用画布查看用户将看到的消息，并直接在布局上编辑文本、图片和按钮。空模板会显示 Start with a block。画布上方有一个手机/平板切换按钮，用于切换预览宽度——它不会改变您的布局，只是改变您预览的屏幕宽度。

图层

图层面板以树状结构列出模板中的每个块，顺序与画布上相同。当您想选择一个嵌套块（例如，组内的按钮）或拖动行来更改内容顺序时，可以从左侧边缘打开它。

右侧面板

使用右侧面板中的 Blocks 向消息添加内容，当您想要一次性应用到整个模板的样式时，使用 Settings。请参阅配置模板范围的样式。

开始构建模板

创建模板后，编辑器会打开一个空画布，右侧是 Blocks 选项卡。

从 Blocks 面板拖动一个块到画布上，或点击面板中的一个块来添加它。
以同样的方式继续添加块，直到布局完成。
当您需要模板范围的样式时，打开 Settings 选项卡。

添加内容块

内容块是内置编辑器中应用内模板的构建部分。您可以将标题、文本、图片、按钮和其他块组合成一个布局。

打开 Blocks 选项卡，将一个块拖到画布上，或点击一个块来添加它。可用块：

标题： 消息中的标题和短标题
文本： 正文和较长的描述
按钮： 可点击的行动号召
图片： 来自媒体库、上传或 URL 的图片
分隔线： 在视觉上分隔区域的线条
2 列： 并排的两个等宽列
3 列： 并排的三个等宽列
4 列： 并排的四个等宽列
33 / 67： 两列，左列约占宽度的 33%，右列约占 67%
67 / 33： 两列，左列约占宽度的 67%，右列约占 33%
计时器： 用于优惠和截止日期的倒计时
菜单： 一行或一列链接，如导航或联系人
社交： 链接到您社交资料的图标
HTML： 自定义 HTML，如表单或嵌入式视频

标题和文本

标题和文本块包含用户在应用内消息中阅读的文案。在画布上编辑文本并使用工具栏进行格式化。

点击标题或文本块，在画布上编辑其文案。选择一些文本以调出格式化工具栏：粗体、斜体、下划线、对齐、链接按钮和文本样式下拉菜单。

合并标签是占位符，可将用户个人资料中的标签值插入到消息中，以便每个订阅者都能看到个性化的文案。要添加一个，请选择文本，点击工具栏中的 Merge Tags，然后从您的帐户中选择一个标签。了解有关个性化应用内消息的更多信息

图片

图片块在应用内模板中显示一张图片。在画布上选择它，以在右侧面板中打开图片设置。

Add image / Replace image： 当块为空时点击添加图片，或当已设置图片时点击替换图片。您可以上传文件或从您的媒体库中选择一个。
Image URL： 粘贴图片的托管链接。
Alt text： 为无障碍性描述图片。
Link URL： 点击图片时打开一个网站。
Link target： 在同一标签页或新标签页中打开链接。
File： 添加图片后，显示正在使用的文件的路径。

在 Spacing 中，打开 Padding 以在图片周围添加空间。使用 All sides 在每边设置相同的内边距，或打开 More options 单独设置每边。

画布上的空图片块，图片设置显示添加图片、图片 URL、替代文本、链接 URL 和间距

按钮

按钮是应用内消息中可点击的行动号召。用它来打开 URL、运行自定义 JavaScript 或关闭消息。

点击按钮块，在画布上编辑其标签。使用工具栏更改字体大小、文本颜色、粗体、斜体、下划线和对齐方式。

要设置用户点击按钮时发生的操作：

点击工具栏中的链接图标以打开 Insert/Edit Link。
选择一个 Action type。
填写该操作的字段（见下文）。
点击 Save。

打开网站

Open Website 在用户点击按钮时打开一个链接。在 URL 中输入地址。您可以输入：

一个网站：https://example.com
一个在您的应用内打开一个屏幕的应用链接：myapp://promo
不使用 JavaScript 关闭应用内消息：pushwoosh://close

运行自定义 JavaScript

Custom Javascript 在用户点击按钮时运行代码。在 onClick 字段中输入代码。

当点击应该在 Pushwoosh 中执行某些操作，而不仅仅是打开一个链接时，请使用此功能。应用中的人仍然看到一个普通按钮。他们看不到标签或事件。您决定屏幕上接下来会发生什么：保持消息打开，或在同一个 onClick 中关闭它。

按钮的插入/编辑链接对话框，操作类型为自定义 Javascript，onClick 设置为 closeInApp

onClick 中的可用方法

pushwoosh.closeInApp()：关闭应用内消息。省略它以在点击后保持消息打开。
pushwoosh.sendTags({...})：将值保存为设备标签，供以后的营销活动使用。
pushwoosh.postEvent(...)：发送一个自定义事件，例如启动一个 Customer Journey。
pushwoosh.getTags(...)：读取当前标签。在自定义 HTML 中用于更改消息显示内容时很有用。
pushwoosh.getCustomData()：读取从打开此应用内消息的推送中传递的自定义数据。

示例：让用户选择一个兴趣并保存以供以后的营销活动使用

在文本或标题块中添加一个问题，例如：“您对哪项运动感兴趣？”
为每个选项添加一个按钮，例如：瑜伽和健身房。

带有瑜伽和健身房按钮的应用内模板，以及瑜伽按钮的自定义 Javascript onClick

为每个按钮将 Action type 设置为 Custom Javascript。
对于瑜伽按钮，将此粘贴到 onClick 中：

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

对于健身房按钮，将此粘贴到 onClick 中：

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

当用户点击瑜伽时，Pushwoosh 会在其设备上写入 interest 标签并关闭应用内消息。然后，您可以在细分或 Customer Journey 中定位该用户。

了解更多关于如何使用 JavaScript 创建应用内消息

分隔线

分隔线是内容块之间的水平线。用它在模板中视觉上分隔区域。

在设置面板中配置线条样式（实线、虚线、点线）、颜色、粗细和宽度。

HTML

HTML 块允许您将自定义 HTML 粘贴到应用内模板中。当没有专门的表单块用于应用内消息时，用它来创建自定义表单、调查或嵌入式视频。

示例

以下示例展示了在应用内模板中使用 HTML 块的常见方式：潜在客户表单、调查和嵌入式视频。

此潜在客户表单将姓名和电子邮件写为标签，发送一个 promo_requested 事件，显示一条感谢信息，然后关闭应用内消息。

应用内编辑器中的 HTML 潜在客户表单，包含姓名和电子邮件字段以及一个“发送代码给我”按钮

HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>获取您的 20% 折扣</h2>
<p>留下您的姓名和电子邮件——我们将立即发送优惠码。</p>

<div id="form">
  <input type="text" id="name" placeholder="您的姓名" />
  <input type="email" id="email" placeholder="您的电子邮件" />
  <button onclick="submit()">发送优惠码给我</button>
</div>

<div class="thanks" id="thanks">
  🎉 完成！请检查您的收件箱以获取优惠码。
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

此调查将选定的锻炼时间保存为标签，发送一个 schedule_survey_completed 事件，显示一条感谢信息，然后关闭应用内消息。

HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>您喜欢什么时间锻炼？</h2>
<p>帮助我们为您安排最佳课程</p>

<button class="option" onclick="pick('morning')">☀️ 上午 (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ 下午 (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 晚上 (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 仅限周末</button>

<div class="thanks" id="thanks">收到！我们将为您发送最佳时间表 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

此示例在应用内消息中嵌入一个 YouTube 视频。

HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应用内视频示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>应用内视频示例</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

菜单

菜单块将多个可点击项放置在一行或一列中。用它来创建导航栏或公司联系人列表。

对于每个菜单项，设置：

Label： 用户看到的文本
URL： 项目打开的位置
Target： 同一标签页或新标签页

在块设置中，您还可以设置：

Direction： 水平或垂直
Alignment： 左对齐、居中或右对齐
Separator： 项目之间的可选分隔符
字体、大小、粗细、字母间距和链接/文本颜色

社交

社交块显示一行链接到您个人资料的社交媒体图标。用它来将用户从应用内消息发送到 Facebook、Instagram、X 和其他平台。

添加平台条目，然后设置对齐方式、图标大小和图标之间的间隙。

社交块设置，包含 TikTok、Instagram 和 Facebook 链接，以及对齐方式、图标大小和间隙

倒计时器

计时器块是应用内消息中的倒计时。用它来显示限时优惠、闪购和活动提醒。

要进行设置：

在 Countdown 中，设置结束日期和结束时间，然后选择计时器标签的时区和语言。
打开 Labels 以在数字下方显示“天/小时/分钟/秒”的标题，或关闭以仅显示数字。
在 Appearance 中，设置背景、数字颜色、标签颜色，以及数字（默认为 40px）和标签（默认为 16px）的字体大小。
根据需要调整间距（内边距）。

列

列将画布分割成并排的部分，以便您可以将内容并排放置在一行中。

将以下块之一拖到画布上：

2 列： 两个等宽列
3 列： 三个等宽列
4 列： 四个等宽列
33 / 67： 左列约 33% 宽，右列约 67%
67 / 33： 左列约 67% 宽，右列约 33%

然后向每列添加内容。要更改模板中所有列的间距，请打开 Settings → Columns defaults 并调整外边距、列内边距和列之间的间隙。

配置模板范围的样式

模板设置控制整个应用内模板的样式：文档大小和背景、弹出窗口外观以及块的默认样式。

打开右侧面板中的 Settings 选项卡。

可用部分：

Document： 整个消息区域的大小和外观：宽度、内边距、背景颜色或图片、文本颜色、字体系列以及块之间的间隙。
Popup： 消息在变暗背景上的位置：圆角半径，以及叠加颜色和不透明度。
Block defaults： 您稍后添加的块的共享起始样式，因此新内容与模板匹配，直到您在画布上覆盖某个块。
Columns defaults： 每个列布局的间距：外边距、每列内的内边距以及列之间的间隙。
Card defaults： 在布局中对内容进行分组的卡片容器的起始外观，直到您单独设置卡片样式为止。
Button group defaults： 多个按钮作为一个组放在一起时的间距和对齐方式。
Button defaults： 新按钮块的起始外观，以便 CTA 在整个模板中保持一致，直到您单独设置一个样式。
Divider defaults： 新分隔线块的起始线条样式、颜色、粗细和宽度。

默认值适用于单个块未覆盖它们的任何地方。

本地化模板

多语言模板将每种语言的本地化文案存储在一个应用内设计中。使用画布上方的语言切换器添加语言并按语言编辑内容。有关多语言消息在各渠道中的工作方式，请参阅多语言消息。

您尚未为当前语言翻译的内容会显示为灰色。开始输入以创建翻译。在您这样做之前，默认语言会一直显示。

配置应用内消息在设备上的外观

应用内设置控制消息在设备上的显示和行为：位置、动画、滑动手势和关闭按钮。这些设置仅适用于 iOS 和 Android Native。

点击顶部栏中的 In-app settings：

Position on Screen： 全屏、顶部、中部或底部。
Present Animation / Close Animation： 无、淡入淡出、左、右、上或下，或默认使用您应用的 SDK 默认值。

Animation Duration (MS)： 100 到 3000 毫秒。留空以使用 SDK 默认时间。
Swipe to Close： 启用左、右、上和下的任意组合。
Show close button： 打开或关闭关闭控件。打开时，设置位置（右上、左上、右下、左下）、背景（一种颜色或透明）和图标颜色。与此模态框中的其他设置不同，关闭按钮的外观会渲染到消息本身中，并显示在每个平台上，而不仅仅是 iOS 和 Android Native。

点击 Apply 保存您的选择，或点击 Cancel 放弃它们。

保存模板

点击顶部栏中的 Save 以保存您的更改。使用顶部栏中的 Undo/Redo 在您的编辑中前后移动。

使用已保存的模板

保存应用内模板后，您可以在 Customer Journey 中、作为一次性应用内消息或当用户点击推送时向用户显示它。