应用内编辑器块参考

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

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

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

如何配置编辑器块

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

提示

每个块还具有 Visibility 和 Display condition 设置。使用它们可以在手机或桌面上隐藏块，或仅向特定用户显示。 了解更多

标题和文本

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)： 将图片固定为像素大小。将字段留空以使其自动调整大小。在这些字段下方，提示会显示图片渲染的尺寸和上传的尺寸：渲染尺寸的 2 倍，以便图片在手机屏幕上保持清晰。如果上传的文件在任一轴上小于渲染尺寸，则会显示警告，告知您它将被放大并看起来像素化。
• Corner radius (px)： 使图片的角变圆。
• Alignment： 左对齐、居中或右对齐。

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

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

推荐图片尺寸

上传图片时，其尺寸应为 Width (px) / Height (px) 下方提示所显示尺寸的 2 倍。这是需要检查的数字，因为它反映了您自己的 Width/Height 和裁剪设置。当您尚未设置块时，请使用这些常见的插槽宽度作为起点：

图片所在位置	渲染尺寸	至少上传
默认弹出窗口中的全宽图片	最多 600 像素宽	1200 像素宽
手机预览	360–430 像素宽，取决于设备	最多 860 像素宽
平板/桌面预览	768 像素宽	1536 像素宽

宽高比由您决定。布局是响应式的，因此高度会遵循您设置的任何 Height (px) 或裁剪。请参阅文档和弹出窗口尺寸以更改默认弹出窗口宽度。

注意

此表涵盖了内置编辑器中的图片块。原生应用内消息（模态、全屏、故事、工作表、轮播、横幅、视频）目前还没有推荐的封面尺寸。

视频

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 块以在画布上编辑其标签。使用工具栏更改字体大小、文本颜色、粗体、斜体、下划线和对齐方式。

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

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

Open Website

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

URL or Deeplink

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

运行自定义 JavaScript

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

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

onClick 中的可用方法

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

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

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

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

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

5. 对于 Gym 按钮，将此粘贴到 onClick 中：

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

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

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

分隔线

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

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

HTML

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

示例

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

注意

表单和调查示例通过 Pushwoosh 保存设备标签并发送事件。在营销活动中使用它们之前，请在您的帐户中创建自定义事件。

潜在客户表单

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

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 和其他平台。

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

倒计时器

Timer 块是应用内消息中的倒计时。可用于限时优惠、闪购和活动提醒。

要进行设置：

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

条形码

Barcode 块从个性化值（通常是优惠券）渲染可扫描的条形码或 QR 码。

要进行设置：

1. 在 Code 中，保留设备标签 {Coupon|String|}，或单击 Merge tag 并选择另一个存储每个收件人代码的设备标签。应用内消息不评估 Liquid。SDK 在显示应用内消息之前在设备上填充标签。这与使用 {{voucher}} 的电子邮件条形码块不同。

2. 选择 Symbology：
   • QR： 手机可以扫描的方形二维代码。接受任何文本，包括字母数字代码，如 WELCOME2025-A1
   • Code 128： 用于任何文本的线性条形码，包括相同的字母数字代码
   • EAN-13： 欧洲和许多其他地区的常见零售条形码。仅限数字，12-13 个字符
   • EAN-8： 用于小包装的较短零售条形码。仅限数字，7-8 个字符
   • UPC-A： 北美的常见零售条形码。仅限数字，11-12 个字符
3. 如果您选择了 QR，请设置 Error correction。这会添加备用数据，以便在代码的一部分被覆盖、磨损或难以看清时仍能扫描。选择 L、M、Q 或 H（默认为 M）。更高级别可以承受更多损坏，但会使图案更密集，这在小尺寸下可能更难读取。对于其他符号，请跳过此字段。
4. 可选择打开 Print the code in digits 以在代码下方显示值。

5. 在 Appearance 中，将 Bars color 设置为比 Background 更深——大多数扫描仪无法读取深色背景上的浅色条。将 Width (px) 和 Height (px) 设置为至少 600×200，以便代码在典型的手机摄像头范围内保持可扫描。将 Quiet zone, modules 保留为 Auto 以使用默认边距。

注意

在画布上，该块显示一个示例条形码，而不是真实的收件人代码。像 {Coupon|String|} 这样的设备标签仅在设备上填充，因此预览也无法构建真实的图像。在发布前，请在真实设备上检查条形码。仅对每个期望长度的纯数字标签值使用 EAN-13、EAN-8 或 UPC-A。对于像 WELCOME2025-A1 这样的字母数字代码，请改用 Code 128 或 QR。

列

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： 显示每个用户当前废弃购物车中的项目。如何设置废弃购物车营销活动

注意

Catalog rule 和 Cart 需要您计划中的 Content Templates，以及一个 API access token（Settings → API Access）。如果 Source 选择器无法切换到其中之一，或者该块不渲染产品，请联系支持或您的客户经理，或创建一个令牌并重新选择来源。

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

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

保存和重用块

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

1. 在画布上选择该块。
2. 单击块工具栏中的书签图标（Save block for reuse）并为其命名。

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

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

保持副本同步

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

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

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

注意

每次您打开一个应用内模板时，Pushwoosh 都会检查其同步的副本并更新任何过期的副本。一个提示会显示刷新了多少个。如果源有更新的内容，副本的设置会显示一个警告，直到您重新打开模板或单击 Update from source。如果源被删除，副本将保留其最后的内容，您只能 Detach from source。