# 应用内编辑器块参考

[内置编辑器](/zh/product/content/in-apps/no-code-in-app-editor/create-rich-media-in-the-built-in-editor/)画布上可以添加的每个块的参考。

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

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

## 如何配置编辑器块

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

<Aside type="tip">
每个块还具有 **Visibility** 和 **Display condition** 设置。使用它们可以在手机或桌面上隐藏块，或仅向特定用户显示。 [了解更多](/zh/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
</Aside>

### 标题和文本

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="在画布上选中的标题块，文本格式化工具栏显示样式和格式化选项"/>

Merge Tags 是占位符，可将用户个人资料中的 [Tag](/zh/product/audience-data-and-segmentation/user-data-tags/tags/) 值插入到消息中，以便每个订阅者都能看到个性化的文案。要添加一个，请选择文本，在工具栏中单击 **Merge Tags**，然后从您的帐户中选择一个 Tag。[了解有关个性化应用内消息的更多信息](/zh/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### 图片

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-40.webp" alt="画布上的图片块，图片设置显示替换图片、图片 URL、替代文本、使用 AI 生成替代文本、提示、宽度、高度、圆角半径和对齐方式" width="600"/>


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

*   **Add image** / **Replace image：** 当块为空时单击 **Add image**，或当已设置图片时单击 **Replace image**。您可以上传文件或从您的[媒体库](/zh/product/content/media-store/)中选择一个。
*   **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 应用或浏览器中打开视频。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-38.webp" alt="画布上的视频块，视频设置显示视频 URL、替代文本、替换缩略图、缩略图 URL 和播放按钮叠加层" width="600"/>

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

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


### 卡片

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-37.webp" alt="画布上的卡片块，卡片设置显示布局、替换图片、图片 URL、替代文本、提示、内边距和圆角半径" width="600"/>

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

编辑卡片的标题、文本和按钮的方式与编辑独立的[标题、文本](#heading-and-text)和[按钮](#button)块相同。

### 按钮

**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`。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="按钮的插入/编辑链接对话框，操作类型为打开网站，并带有一个 URL 字段"/>

#### URL or Deeplink

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-45.webp" alt="按钮工具栏，插入/编辑链接对话框已打开，操作类型为 URL 或深层链接，URL 设置为 myapp://screen"/>

#### 运行自定义 JavaScript

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="按钮的插入/编辑链接对话框，操作类型为自定义 JavaScript，onClick 设置为 closeInApp"/>

**onClick 中可用的方法**

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

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

1.  在 **Text** 或 **Heading** 块中添加一个问题，例如：“你喜欢哪种运动？”
2.  为每个选项添加一个 **Button**，例如：**瑜伽**和**健身房**。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="带有瑜伽和健身房按钮的应用内模板，以及瑜伽按钮的自定义 JavaScript onClick"/>

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

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

5.  对于**健身房**按钮，将此代码粘贴到 **onClick** 中：

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


当用户点击**瑜伽**时，Pushwoosh 会在其设备上写入 `interest` 标签并关闭应用内消息。然后，您可以在[分群](/zh/product/audience-data-and-segmentation/segmentation/)或 [Customer Journey](/zh/product/customer-journey/journey-elements/#in-app) 中定位该用户。

<LinkCard title="了解更多关于如何使用 JavaScript 创建应用内消息" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### 分隔线

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

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

### HTML

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


##### 示例

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

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

<Tabs>
<TabItem label="潜在客户表单">

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="应用内编辑器中的 HTML 潜在客户表单，包含姓名和电子邮件字段以及一个“发送代码”按钮" width="360"/>

<details>
<summary>HTML 代码</summary>

```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>
```


</details>

</TabItem>
<TabItem label="调查">

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="应用内编辑器中的 HTML 调查，询问用户喜欢何时锻炼，并提供四个时间选项" width="360"/>

<details>
<summary>HTML 代码</summary>

```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>
```


</details>

</TabItem>
<TabItem label="视频">

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

<details>
<summary>HTML 代码</summary>

```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>
```


</details>

</TabItem>
</Tabs>



### 菜单

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

对于每个菜单项，设置：

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

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

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

### 社交

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="社交块设置，包含 TikTok、Instagram 和 Facebook 链接，以及对齐方式、图标大小和间距" width="320"/>

### 倒计时器

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

要进行设置：

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="计时器块设置，包含倒计时结束日期和时间、标签、外观和间距选项"/>

### 列

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

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

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

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

### 产品

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-47.webp" alt="产品块，包含两个产品卡片，显示图片、标题、描述、价格和立即购买按钮"/>

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

*   **Manual：** 手动输入产品，或单击 **Pick from catalog…** 从您的[产品目录](/zh/product/content/product-catalog/)中按 ID 选择特定项目。您可以在同一个块中混合使用这两种方式。
*   **Catalog rule：** 根据类别和排序顺序自动拉取产品，在消息显示时从目录中实时解析。
*   **Cart：** 显示每个用户当前废弃购物车中的项目。[如何设置废弃购物车营销活动](/zh/product/how-to-guides/lifecycle-marketing-campaigns/how-to-set-up-an-abandoned-cart-campaign/)

<Aside type="note">
**Catalog rule** 和 **Cart** 需要您的计划中有 **Content Templates**，以及一个 [API access token](/zh/developer/api-reference/api-access-token/)（**Settings → API Access**）。如果 **Source** 选择器无法切换到其中之一，或者块不渲染产品，请联系支持或您的客户经理，或创建一个令牌并重新选择来源。
</Aside>

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

*   **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**）并给它一个名称。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-42.webp" alt="卡片块工具栏，包含上移、下移、复制、删除、保存块以供重用和询问 AI 图标"/>

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

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

### 保持副本同步

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

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

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

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