应用内编辑器块参考

您可以在内置编辑器画布上添加的每个块的参考。

每种块类型在消息中都有不同的用途：

标题： 标题和短标题
文本： 正文和较长的描述
按钮： 可点击的行动号召
图片： 来自媒体库、上传或 URL 的图片
视频： 可点击的视频缩略图，可打开 YouTube 或 Vimeo 视频
卡片： 在一个布局中包含图片、标题、文本和按钮
分隔线： 分隔区域的线条
列：并排布局（2、3 或 4 个等宽列，或 33/67 和 67/33 的分割）
计时器： 优惠和截止日期的倒计时
菜单： 一行或一列的导航或联系链接
社交： 链接到您的社交资料的图标
HTML： 自定义 HTML，例如表单、调查或嵌入式视频
产品： 来自您的产品目录或用户废弃购物车的产品卡片网格

如何配置编辑器块

从 Blocks 选项卡中将一个块拖到画布上，或单击它以将其添加到末尾。选择该块以在右侧面板中打开其设置，并配置内容、链接、大小和间距。

标题和文本

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

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

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

图片

Image 块在应用内模板中显示一张图片。

在画布上选择它以在右侧面板中打开 Image 设置。

Add image / Replace image： 当块为空时单击 Add image，或当已设置图片时单击 Replace image。您可以上传文件或从您的媒体库中选择一个。
Image URL： 粘贴图片的托管链接。
Alt text： 为可访问性描述图片。
Prompt： 您使用 Generate with AI 创建的图片的 AI 生成提示。
Width (px) / Height (px)： 将图片固定为像素大小。将字段留空以使其自动调整大小。
Corner radius (px)： 将图片的角变圆。
Alignment： 左对齐、居中或右对齐。

在 Link 中，设置一个 Action Type（例如 Open Website 或 URL or Deeplink）及其 URL，以便在点击图片时打开某些内容，以及一个 Link target 以在同一选项卡或新选项卡中打开它。

在 Spacing 中，打开 Padding 以在图片周围添加空间。使用 All sides 在每侧添加相同的填充，或打开 More options 以分别设置每侧。

视频

Video 块将 YouTube 或 Vimeo 视频作为可点击的缩略图添加到消息中。消息显示一个带有 ▶ 叠加层的静态图片。点击它会在 YouTube 或 Vimeo 应用或浏览器中打开视频。

在画布上选择该块以打开其设置：

Video URL： 粘贴 YouTube 或 Vimeo 链接。编辑器会自动获取缩略图。
Alt text： 为可访问性描述视频。
Thumbnail URL： 保留自动获取的缩略图，或单击 Add thumbnail / Replace thumbnail 从媒体库中选择一个，或直接粘贴托管链接。
Play button overlay： 默认开启。关闭以显示没有 ▶ 叠加层的纯缩略图。
Width (px)、Corner radius (px) 和 Alignment： 控制缩略图的外观及其在布局中的位置。

卡片

Card 块将图片与标题、文本和按钮配对在一个现成的布局中，因此您不必手动放置和对齐四个独立的块。

Layout： 选择图片相对于内容的位置，或打开 Wrap text around image。
Image： 添加或替换图片，设置替代文本，编辑 AI 生成的 Prompt，添加 Padding，并设置 Corner radius (px)。
Size & fit： 设置图片的 Width、Height、Crop（原始或固定比例）和 Fit（覆盖或焦点）。确切的字段取决于您选择的 Layout。
Link： 使整个卡片在被点击时打开一个 URL。

编辑卡片的标题、文本和按钮的方式与编辑独立的标题、文本和按钮块相同。

按钮

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

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

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

单击工具栏中的链接图标以打开 Insert/Edit Link。
选择一个 Action type：Open Website、URL or Deeplink 或 Custom Javascript。
填写该操作的字段（见下文）。
单击 Save。

Open Website

当用户点击按钮时，Open Website 会打开一个网页。在 URL 中输入地址，例如 https://example.com。

URL or Deeplink

当用户点击按钮时，URL or Deeplink 会打开一个链接或深层链接。在 URL 中输入地址，例如应用屏幕：myapp://screen。

按钮工具栏，插入/编辑链接对话框已打开，操作类型为 URL 或深层链接，URL 设置为 myapp://screen

Run custom JavaScript

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

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

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

onClick 中可用的方法

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

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

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

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

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

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

对于 Gym 按钮，将此代码粘贴到 onClick 中：

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

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

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

分隔线

Divider 是内容块之间的水平线。使用它在模板中直观地分隔区域。

在设置面板中配置 line style（实线、虚线、点线）、color、thickness 和 width。

HTML

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

示例

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

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

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

HTML 代码

<!DOCTYPE html>
<html lang="en">
<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>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</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="en">
<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>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</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>In-App Video Example</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>

菜单

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

对于每个菜单项，设置：

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

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

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

社交

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

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

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

倒计时器

Timer 块是应用内消息中的倒计时。使用它来进行限时优惠、闪购和活动提醒。

要进行设置：

在 Countdown 中，设置 End date 和 End time，然后为计时器标签选择 Timezone 和 Language。
打开 Labels 以在数字下方显示“天/小时/分钟/秒”的标题，或关闭以仅显示数字。
在 Appearance 中，设置 Background、Digits color、Labels color，以及数字（默认 40px）和标签（默认 16px）的字体大小。
根据需要调整 Spacing（填充）。

列

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

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

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

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

产品

Products 块显示一个来自共享模板的产品卡片网格。每个卡片可以包括图片、标题、描述、价格和购买按钮。该模板为每个产品重复。

在设置面板的 Source 下，选择产品的来源：

Manual： 手动输入产品，或单击 Pick from catalog… 从您的产品目录中按 ID 选择特定项目。您可以在同一个块中混合使用这两种方式。
Catalog rule： 根据类别和排序顺序自动拉取产品，在消息显示时从目录中实时解析。
Cart： 显示每个用户当前废弃购物车中的项目。如何设置废弃购物车营销活动

选择来源后，这些设置控制网格及其卡片的外观：

Number of products（或 Max products shown for Cart）：显示多少个卡片。
Columns： 每行 1、2 或 3 个卡片。
Gap： 卡片之间的空间。
Description limit： 描述文本被修剪到的字符限制，以便卡片保持一致的大小。
Card template： 选择一个布局，然后为每个卡片设置 Card background、Card corner radius 和 Content padding。

保存和重用块

保存一个块以便在此或其他应用内模板中重用，而不是每次都重新构建它。

在画布上选择该块。
单击块工具栏中的书签图标（Save block for reuse）并给它一个名称。

已保存的块出现在 Blocks 选项卡底部的 Saved blocks 下。

将已保存的块拖到画布上，或单击它以将其添加到模板的末尾。
单击已保存块磁贴上的 × 以删除它。

保持副本同步

当您保存一个块时，打开 Keep copies in sync 以将每个插入的副本链接到同一个源。一次编辑源，更改将应用于使用该块的所有地方。

同步的副本在画布上被锁定。您不能直接编辑它。选择该副本以打开其设置：

Edit synced block： 解锁此副本以便您可以更改它。顶部会出现一个横幅。单击 Apply to all 将您的更改保存到源和所有其他副本，或单击 Cancel 放弃它们。您一次只能解锁一个同步的块。
Update from source： 用源的最新版本替换此副本。
Detach from source： 将此副本与源取消链接，以便您可以单独编辑它。