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

添加新模板

要创建应用内消息模板，请前往 内容 (Content) → 应用内消息 (In-apps) 并点击 添加模板 (Add template)：

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

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

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

输入模板名称，选择 创建新模板 (Create new template)，然后点击 添加模板 (Add template)：

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

常规模板设置

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

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

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

全屏应用内消息

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

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

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

图片和文本	高分辨率：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

部分屏幕应用内消息

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

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

添加内容

内容块

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

如果您想在一行中放置多个内容元素，请将 列 (Columns) 元素添加到模板中。选择所需的块类型并向每列添加内容：

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

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

纵向和横向

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

纵向（移动设备选项卡）

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

横向（桌面设备选项卡）

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

横向布局中的列

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

在使用列设计完横向应用内消息后，切换到 移动设备 (Mobile) 选项卡。向下滚动到设置面板底部的 响应式设计 (RESPONSIVE DESIGN) 部分，并启用 在移动设备上不堆叠 (Do Not Stack on Mobile) 选项。

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

内容元素

标题

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

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

文本

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

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

图片

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

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

您还可以尝试 AI 图片生成。为此，请点击 魔术图片 (Magic Image) 部分的按钮，描述您想要创建的图片，然后点击 生成图片 (Generate Images)：

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

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

按钮

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

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

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

分隔线

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

表单

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

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

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

要添加另一个字段，请点击 添加新字段 (Add New Field) 并选择数据类型：

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

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>

菜单

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

要添加菜单项，请点击 添加新项 (Add New Item)：

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

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

图片轮播

轮播 (Carousel) 元素在单个应用内消息中以可滑动的滑块形式显示多张图片。用它来展示多个产品、截图或入门步骤。

要设置轮播：

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

倒计时器

计时器 (Timer) 元素为您的应用内消息添加一个倒计时。用它来进行限时优惠、闪购和活动提醒。设置目标日期和时间，然后自定义计时器的外观。

要设置计时器：

选中 计时器 (Timer) 块后，在面板顶部切换 移动设备 (Mobile) 和 桌面设备 (Desktop) 来配置每个视图。
在 倒计时 (Countdown) 部分，将 结束时间 (End Time) 设置为倒计时应归零的日期和时间。为计时器标签选择 时区 (Timezone) 和 语言 (Language)。
打开 标签 (Labels) 以在数字下方显示天、小时、分钟和秒，或关闭以仅显示倒计时数字。
在 样式 (Styling) 部分，设置 背景 (Background)、数字颜色 (Digits Color) 和 标签颜色 (Labels Color)。选择 数字字体 (Digits Font)、数字字号 (Digits Font Size)、标签字体 (Labels Font) 和 标签字号 (Labels Font Size)。
根据需要配置 图片 (Image)、操作 (Action) 和 常规 (General) 中的其他选项。

表格

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

要设置表格：

选中 表格 (Table) 块后，在面板顶部切换 移动设备 (Mobile) 和 桌面设备 (Desktop) 来配置每个视图。
在 布局 (Layout) 部分，使用 + 和 - 按钮设置 列 (Columns) 和 行 (Rows)。
选择 背景颜色 (Background Color)。打开 边框 (Border) 来设置样式、粗细和颜色，或使用 更多选项 (More Options) 进行高级边框设置。打开 条纹行 (Striped Rows) 来交替行背景。
在预览中点击一个单元格以输入标题或正文文本。
在 标题 (Header) 和 内容 (Content) 中，自定义标题和正文单元格的字体、颜色和文本对齐方式。
根据需要配置 链接 (Links)、常规 (General) 和 响应式设计 (Responsive Design)。

内容个性化

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

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

多语言模板

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

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

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

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

要配置应用内设置：

点击屏幕顶部的 设置 (Settings)。

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

设置消息在屏幕上的位置

选择消息应出现的位置。

选项包括：全屏 (Fullscreen)、顶部 (Top)、居中 (Center)、底部 (Bottom)

选择进入动画

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

选项包括：上 (Up)、下 (Down)、左 (Left)、右 (Right)

选择退出动画

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

选项包括：上 (Up)、下 (Down)、左 (Left)、右 (Right)

启用滑动关闭（可选）

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

选项包括：左 (Left)、右 (Right)、上 (Up)、下 (Down)

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

选择您的偏好后，点击 应用 (Apply) 保存更改或 取消 (Cancel) 放弃更改。

保存并使用模板

点击 保存 (Save) 应用更改。

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