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

添加新模板

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

在这里，您有三个选项：

上传包含您的 HTML 应用内消息的 ZIP 文件。
选择并自定义一个预构建的模板。
从头开始构建您自己的模板。

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

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

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

添加内容

布局

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

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

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

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

创建纵向和横向应用内消息

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

纵向应用内消息

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

横向应用内消息

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

为横向应用内消息添加分栏

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

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

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

内容元素

标题

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

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

文本

文本的自定义方式与标题相同。您可以更改字体、颜色、文本对齐方式、行高和内边距参数。

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

图片

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

或者，您可以指定 图片 URL (Image URL) 而不是上传文件。

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

在 操作 (Action) 部分，您可以设置点击图片时应执行的操作。您可以打开一个网站（或指向您应用内页面的深层链接）或关闭弹窗。您还可以插入自定义的 JavaScript 处理程序属性来设置图片点击操作。如果不需要任何操作，请忽略此设置。

按钮

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

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

要指定点击按钮后应执行的操作，请转到 操作 (Action) 部分并选择所需选项。您可以打开网站或关闭弹窗。您还可以插入自定义的 JavaScript 处理程序属性来设置按钮点击操作。

分隔线

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

表单

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

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

字段类型 (Field Type)：应在字段中传输的数据类型；
字段名称 (Field Name)：传递字段数据的参数名称；
字段标签 (Field Label)：显示在字段上方的文本；
占位符文本 (Placeholder Text)；
指示该字段是否为提交表单所必需的复选框。

要添加另一个字段，请点击 添加新字段 (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>