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

添加新模板

要创建应用内消息模板，请前往内容 → 应用内消息，然后点击 添加模板：

在这里，您有两种创建模板的方式：

上传 ZIP — 上传一个 ZIP 文件，其中包含您的 HTML 应用内消息。
创建新模板 — 在可视化编辑器中构建模板。创建后，您可以从预构建模板或空白模板开始。

在本文中，我们将介绍如何从头开始创建模板。按照相同的步骤自定义您现有的模板。

输入模板名称，选择 创建新模板，然后点击 添加模板：

您可以基于默认模板创建新的应用内消息页面，也可以选择空白模板从头开始。

常规模板设置

在添加内容块之前，请在 弹出窗口 选项卡上配置模板：

设置弹出窗口在屏幕上的位置。
更改弹出窗口的宽度和高度。
调整边框圆角。
为整个模板配置内容设置：对齐方式、宽度、字体和颜色。
设置背景颜色或添加背景图片。
自定义关闭按钮的位置和外观。

全屏和部分屏幕的应用内消息使用相同的编辑器。在下方选择一种格式，并设置匹配的弹出窗口宽度和高度。

全屏应用内消息

使用全屏应用内消息进行用户引导、付费墙和促销活动（如 offerwalls）。

在 弹出窗口 选项卡上，将宽度和高度设置为接近目标设备屏幕尺寸，以便消息覆盖大部分显示区域。

全屏应用内消息的图片建议（纵向）

图片和文本	高分辨率：1200 x 1000 像素最小尺寸：600 x 500 像素宽高比：6:5
仅图片	高分辨率：1200 x 2000 像素最小尺寸：600 x 1000 像素宽高比：3:5

图片和文本

高分辨率：1200 x 1000 像素

最小尺寸：600 x 500 像素

宽高比：6:5

仅图片

高分辨率：1200 x 2000 像素

最小尺寸：600 x 1000 像素

宽高比：3:5

部分屏幕应用内消息

部分屏幕的应用内消息是紧凑的覆盖式消息，弹出窗口后方仍有部分应用可见。可用于选择加入提示、公告和促销内容。

在 弹出窗口 选项卡上，设置较小的宽度和高度，使弹出窗口不会覆盖整个屏幕。

添加内容

内容块

通过将所需的内容块拖放到模板主体中来定义模板布局。您可以添加标题、文本、图片、按钮、分隔线、可填写表单、HTML 块、菜单、图片轮播、倒数计时器和表格。

如果要在同一行中放置多个内容元素，请将分栏元素添加到模板中。选择所需的块类型并向每栏添加内容：

要更改布局的背景颜色，请单击其外边距。确保已选择整个布局，然后选择颜色：

如果选择了整个布局，您还可以编辑内边距设置并上传背景图片。

纵向和横向

Pushwoosh 提供了在纵向和横向两种方向上创建应用内消息内容的灵活性。这确保了您的营销活动在所有设备上都具有视觉吸引力和有效性。

纵向（移动设备选项卡）

要创建专为纵向设计的应用内消息（通常用于移动设备），请导航到编辑器中的 移动设备选项卡。在这里，您可以设计适合智能手机屏幕垂直布局的内容。

横向（桌面设备选项卡）

对于横向应用内消息（通常更适合宽屏），请导航到编辑器中的 桌面设备选项卡。在这里，您可以构建应用内消息以利用更宽的水平空间。

横向布局中的分栏

如果您需要在横向应用内消息中添加分栏，请首先添加分栏元素。定义您需要的分栏数量和布局。

在使用分栏设计完横向应用内消息后，切换到 移动设备选项卡。向下滚动到设置面板底部的 响应式设计 部分，并启用 在移动设备上不堆叠 选项。

Pushwoosh 还允许您在应用内消息中混合搭配分栏布局。您可以将特定分栏配置为垂直堆叠，同时保持其他分栏水平排列。为此，请根据需要调整每个分栏块。

内容元素

标题

您可以编辑标题的字体、颜色、文本对齐方式、行高和内边距参数。

您还可以让 AI 为您生成标题文本以节省时间。点击 智能标题 部分的按钮，输入一些关键词，然后点击 获取建议：

文本

文本的自定义方式与标题相同（在编辑器中，此块标记为段落）。您可以更改字体、颜色、文本对齐方式、行高和内边距参数。

您还可以使用 智能文本 选项来增强您的文本：

图片

要添加图片，请单击图片块并将您的文件拖到编辑器面板中：

或者，您可以指定 图片 URL 而不是上传文件。您还可以将媒体库中图片的 URL 粘贴到 图片 URL 字段中。

您还可以尝试 AI 图像生成。为此，请单击 魔法图片 部分的按钮，描述您想要创建的图片，然后单击 生成图片：

要将文本直接放置在图片上，请选择图片块并单击 应用效果。单击文本，插入您的内容，并调整其参数：

在操作部分，打开 操作类型 下拉菜单，设置单击图片时发生的操作：URL 或 Deeplink（打开网站或应用内页面的深层链接）、关闭弹出窗口 或 自定义 Javascript（插入自定义 JavaScript 处理程序）。如果不需要任何操作，请保持选择 关闭弹出窗口。

按钮

将按钮添加到模板后，您可以自定义其文本、颜色、内边距和边框。

AI 可以帮助您构思按钮文本。只需单击 智能按钮 部分的按钮，输入关键词，然后单击 获取建议：

要指定单击按钮后应执行的操作，请转到操作部分并打开 操作类型 下拉菜单：URL 或 Deeplink（打开网站或深层链接）、关闭弹出窗口 或 自定义 Javascript（插入自定义 JavaScript 处理程序）。

分隔线

分隔线是您可以放置在内容块之间的线条。使用它们来构建模板并强调最重要的块。您可以更改分隔线的宽度、线条类型、对齐方式和内边距设置。

表单

表单允许您收集用户的电子邮件、电话号码、偏好以及其他可能对未来通信有用的信息。此元素配置为标准 HTML 表单：数据通过 GET 或 POST 请求发送到 URL 字段中指定的地址。

单击字段名称以配置其参数：

字段类型：应在字段中传输的数据类型；
字段名称：传递字段中数据的参数名称；
字段标签：显示在字段上方的文本；
占位符文本；
指示提交表单时该字段是否为必填项的复选框。

要添加另一个字段，请单击 添加新字段 并选择数据类型：

您可以自定义表单参数，例如宽度、对齐方式、字段间距、按钮文本、颜色和字体。

HTML

HTML 块允许您将自己的自定义 HTML 代码添加到模板中。

这对于通过交互式或视觉上吸引人的元素来增强您的应用内消息特别有用。例如，如果您希望为调查创建自定义表单，您可以使用 HTML 块来包含您自己设计的表单。

设置表单后，您可以直接在 Pushwoosh 内跟踪统计数据，从而轻松分析结果和用户互动。要实现此功能，您需要开发团队的帮助，请与他们分享此链接。

在默认模板中，有一个带有自定义调查表单的预设计应用内消息模板。您可以将其用作自己调查表单的参考或起点。

此外，您还可以通过嵌入视频来增强您的应用内消息，以获得更具吸引力的用户体验。以下是如何使用 HTML 嵌入 YouTube 视频的示例：

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

菜单

菜单元素允许您将多个可点击项放置在一行或一列中。例如，您可以添加导航栏或公司联系方式。

要添加菜单项，请单击 添加新项：

添加项目文本并设置单击项目时应执行的操作：

选择水平或垂直菜单类型，并在必要时在项目之间添加分隔符：

图片轮播

轮播元素在单个应用内消息中以可滑动的滑块形式显示多张图片。用它来展示多个产品、屏幕截图或用户引导步骤。

要设置轮播：

选中轮播块后，在面板顶部切换 移动设备 和 桌面设备 以配置每个视图。
在图片部分，使用 图片 1、图片 2、图片 3 等选项卡选择幻灯片。单击 + 添加另一张幻灯片，或单击删除图标移除当前幻灯片。
对于选定的幻灯片，单击 上传图片 或从 更多图片 中选择一个选项。您还可以将托管链接粘贴到 图片 URL 中，包括来自您的媒体库的图片。
为幻灯片输入 替代文本。要调整图片本身，请单击缩略图预览旁边的 编辑图片。
如果需要其他幻灯片设置，请单击面板底部的 显示更多选项。

倒数计时器

计时器 元素为您的应用内消息添加倒计时。可用于限时优惠、闪购和活动提醒。设置目标日期和时间，然后自定义计时器的外观。

要设置计时器：

选中 计时器 块后，在面板顶部切换 移动设备 和 桌面设备 以配置每个视图。
在 倒计时 部分，将 结束时间 设置为倒计时应归零的日期和时间。为计时器标签选择时区和语言。
打开标签以在数字下方显示天、小时、分钟和秒，或关闭以仅显示倒计时数字。
在样式部分，设置背景、数字颜色 和 标签颜色。选择 数字字体、数字字体大小、标签字体 和 标签字体大小。
根据需要配置图片、操作和常规中的其他选项。

表格

表格元素可让您以行和列的形式呈现结构化内容，例如方案比较、定价或功能列表。添加或删除行和列，并自定义边框、内边距和文本样式。

要设置表格：

选中表格块后，在面板顶部切换 移动设备 和 桌面设备 以配置每个视图。
在布局部分，使用 + 和 - 按钮设置列和行。
选择 背景颜色。打开边框以设置样式、粗细和颜色，或使用 更多选项 进行高级边框设置。打开 条纹行 以交替行背景。
单击预览中的单元格以输入页眉或正文文本。
在页眉和内容中，自定义页眉和正文单元格的字体、颜色和文本对齐方式。
根据需要配置链接、常规和 响应式设计。

内容个性化

个性化主文本、标题或按钮文本，使您的内容更具相关性和吸引力。例如，您可以用用户的名字称呼他们或提及他们的偏好。

首先，您需要设置标签并配置从用户那里收集数据（例如，通过反馈表单）。创建应用内消息时，选择所需的内容块，单击 合并标签，然后选择您要使用的标签：

多语言模板

您可以为用户使用的每种语言本地化应用内消息模板的文本。为此，请在 可编辑语言 列表中切换语言，并分别编辑每种语言的内容：

如果内容未本地化，它将以 语言设置 中指定为默认的语言显示。

自定义应用内消息的外观和行为（iOS 和 Android 原生）

使用 应用内设置 来控制您的应用内消息在原生 iOS 和 Android 应用上的外观和行为。您可以调整屏幕位置、选择动画并启用滑动关闭手势。

要配置应用内设置：

单击屏幕顶部的设置。

在设置窗口中，通过调整可用选项来选择您希望应用内消息的外观和行为：

设置消息在屏幕上的位置

选择消息应出现的位置。

选项包括：全屏、顶部、居中、底部

选择进入动画

选择消息在屏幕上出现的方式。在设置中，这是 呈现动画 选项。

上
下
左
右
淡入： 消息淡入视图。
无：消息立即出现，没有动画。
默认： 使用您应用代码中定义的动画（SDK 默认）。

选择退出动画

选择消息消失的方式。在设置中，这是 关闭动画 选项。

上
下
左
右
淡出： 消息淡出视图。
无：消息立即消失，没有动画。
默认： 使用您应用代码中定义的动画（SDK 默认）。

启用滑动关闭（可选）

允许用户通过向一个或多个方向滑动来关闭消息。

选项包括：左、右、上、下

显示所有应用内消息设置选项的表单，包括消息位置、进入和退出动画以及滑动关闭手势方向

选择您的偏好后，单击应用以保存更改或取消以放弃它们。

保存并使用模板

单击保存以应用更改。

现在您可以通过以下方式之一使用您的应用内消息模板：