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

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

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

## 创建新的应用内模板

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

1. 前往 **内容** → **应用内消息**。
2. 点击 **添加模板**。

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

3. 输入模板名称。
4. 选择创建模板的方式：
   * **创建新模板：** 在内置编辑器中构建模板。
   * **上传 ZIP：** [上传一个 ZIP 文件](/zh/developer/guides/content/rich-media-templates-syntax)，其中包含您的 HTML 应用内消息。
   * **创建原生富媒体：** 构建一个由 SDK 渲染的原生应用内消息。[了解更多](/zh/product/content/in-apps/create-native-in-app-messages/)
5. 选择 **创建新模板**。
6. 点击 **添加模板**。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="添加新模板对话框，包含名称字段、已选择的创建新模板、上传 ZIP 和创建原生富媒体选项"/>

## 探索编辑器布局

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

### 顶部栏

顶部栏用于管理整个模板：其名称、撤销历史、保存状态、在设备上的外观（**应用内设置**）、语言（**自动翻译** 和语言切换器）以及手机或桌面预览宽度。请参阅[配置应用内消息在设备上的外观](/zh/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device)和[本地化模板](#localize-the-template)。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="应用内编辑器顶部栏，包含模板名称、撤销、重做、应用内设置、语言切换器、自动翻译、手机和桌面预览以及已保存状态"/>

打开顶部栏中的 **⋮** 菜单以获取更多操作：

#### 预览

**预览** 功能让您可以在保存消息前进行试用：点击按钮、浏览多屏流程，并检查在手机或桌面上的布局。

<img src="/rich-media-create-rich-media-in-the-built-in-editor-44.webp" alt="预览面板，包含手机和桌面切换、重启，以及一个显示图片、优惠文本、计时器和领取按钮的应用内消息" width="480"/>

预览中可用的功能：

* 按钮和多屏流程会真实运行。
* 链接和深层链接会被报告，但不会打开。
* SDK 调用和打开/点击统计数据保持关闭。
* 语言与语言切换器中的设置匹配。Merge Tags 保持为占位符。

在预览标题栏中，切换手机和桌面视图以查看两种布局。点击 **重启** 以从头开始再次显示消息。要退出预览，请按 Esc 键或在面板外单击。

#### 品牌手册

* **品牌手册：** 打开您账户的[品牌手册](/zh/product/content/brand-book/)。
* **应用品牌手册样式：** 重新设置模板样式以匹配您的品牌手册（设置后）。
* **重置自定义样式：** 移除模板上的样式覆盖并恢复为默认设置。


### 画布

在画布上编辑消息：点击文本、图片和按钮进行更改。使用顶部栏中的手机/桌面切换器检查布局在不同宽度下的外观。该切换器仅更改预览，不更改布局本身。

### 图层

图层面板以树状结构列出模板中的每个块，顺序与画布上相同。从左边缘打开它以选择嵌套块（例如，组内的按钮）或拖动行以重新排序内容。

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

### 右侧面板

在三个选项卡之间切换：

* **块：** 向消息中添加内容。请参阅[应用内编辑器块参考](/zh/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/)。
* **设置：** 一次性将样式应用于整个模板。请参阅[配置应用内模板设置](/zh/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)。
* **AI：** 与 AI 助手聊天，根据提示生成或编辑内容。

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

## 添加内容块

1. 打开右侧面板中的 **块** 选项卡。
2. 将一个块拖到画布上，或单击一个块将其添加到模板末尾。
3. 继续添加块，直到布局完成。

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

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

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

有关每个块的设置，请参阅[应用内编辑器块参考](/zh/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/)，以及[如何保存和重用块](/zh/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks)。

### 向特定用户显示块

并非每个用户都需要看到相同的块。在块上设置 **显示条件**，使其根据用户的 [Tags](/zh/product/audience-data-and-segmentation/user-data-tags/tags/) 显示或隐藏。您仍然发送一个模板，但每个人只看到适用于他们的部分。

在画布上选择块，在右侧面板中打开 **显示条件**，然后打开 **有条件地显示此块**。[了解更多](/zh/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)

## 本地化模板

多语言模板在一个应用内设计中为每种语言存储本地化文案。使用顶部栏中的语言切换器添加语言并按语言编辑内容。点击 **自动翻译** 以生成翻译。有关多语言消息在各渠道中的工作方式，请参阅[多语言消息](/zh/product/personalization/multi-language/)。

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

## 配置模板设置

使用两个地方来设置消息的样式和位置：

* **设置** 选项卡（右侧面板）：文档大小、颜色、排版和块的默认样式。
* **应用内设置**（顶部栏）：屏幕上的位置、动画和关闭按钮。

[了解更多](/zh/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)

## 保存模板

点击顶部栏中的 **保存** 以保存您的更改。使用顶部栏中的 **撤销**/**重做** 来回退和前进您的编辑。

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