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

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

<Aside type="note">
在开始之前，请集成 Pushwoosh SDK，以便应用内消息可以显示在您的应用中。[了解更多](/zh/product/messaging-channels/in-apps/)
</Aside>

## 创建新的应用内模板

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

1.  前往 **Content** → **In-apps**。
2.  点击 **Add template**。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="内容应用内消息页面，模板列表右上角有“添加模板”按钮"/>

3.  输入模板名称。
4.  选择创建模板的方式：
    *   **Upload ZIP：** [上传一个 ZIP 文件](/zh/developer/guides/content/rich-media-templates-syntax)，其中包含您的 HTML 应用内消息。
    *   **Create new template：** 在内置编辑器中构建模板。
5.  选择 **Create new template**。
6.  点击 **Add template**。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="新模板表单，包含名称字段、上传 ZIP 选项，并已选择创建新模板"/>


### 探索编辑器布局

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

**顶部栏**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="应用内编辑器的顶部栏，包含模板名称、撤销、重做、应用内设置和保存"/>

**画布**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="应用内编辑器中的空画布，中央有“从一个块开始”的提示" width="480"/>

**图层**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="图层面板以树状结构列出卡片、图片、标题、文本、计时器、按钮和页脚"/>

**右侧面板**

使用右侧面板中的 **Blocks** 向消息添加内容，当您想要一次性应用到整个模板的样式时，使用 **Settings**。请参阅[配置模板范围的样式](#configure-template-wide-styling)。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="右侧面板中的块选项卡，包含标题、文本、按钮、图片和其他内容块" width="320"/>

### 开始构建模板

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

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


<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="空的内嵌编辑器，画布上有“从一个块开始”的提示，并且块面板已打开"/>

### 添加内容块

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

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

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

### 标题和文本

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

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

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

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


### 图片

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

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="画布上的空图片块，图片设置显示添加图片、图片 URL、替代文本、链接 URL 和间距" width="600"/>

### 按钮

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

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

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

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

#### 打开网站

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

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

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

#### 运行自定义 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.  在**文本**或**标题**块中添加一个问题，例如：“您对哪项运动感兴趣？”
2.  为每个选项添加一个**按钮**，例如：**瑜伽**和**健身房**。

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

### 分隔线

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

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

### 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="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>
```


</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="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>
```


</details>

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

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

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

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


</details>

</TabItem>
</Tabs>



### 菜单

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

对于每个菜单项，设置：

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

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

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

### 社交

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

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

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

### 倒计时器

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

要进行设置：

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

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

### 列

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

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

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

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

## 配置模板范围的样式

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="设置选项卡，包含文档、弹出窗口以及块和列的默认样式部分" width="320"/>

可用部分：

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

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


<Aside type="note">
没有高度设置。弹出窗口会随着其内容增长。对于全屏消息，请在 **Settings** 中设置 **Width**，并在 **In-app settings** 中选择 **Fullscreen**。
</Aside>

## 本地化模板

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

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

<Aside type="note">
您添加的任何块都会以相同的内容显示给每种语言。请记住为您模板中使用的每种语言翻译新的文本和按钮标签。
</Aside>

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

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

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

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

<Aside type="note">
**无**和**淡入淡出**目前在 Android 上有效。在 iOS 上，消息会立即出现和消失（对齐方式即将推出）。
</Aside>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="应用内设置模态框，包含位置、动画、滑动关闭和关闭按钮选项"/>

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

## 保存模板

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

<Aside type="note">
保存会将您的应用内模板存储在 **Content** → **In-apps** 中。从那里您可以预览、编辑和管理模板。[了解更多](/zh/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## 使用已保存的模板

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

*   [将应用内消息作为客户旅程的一部分显示](/zh/product/customer-journey/journey-elements/#in-app)
*   [发送点击后打开应用内消息的推送](/zh/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
*   [向您的用户显示单个应用内消息](/zh/product/messaging-channels/in-apps/)