创建原生应用内消息
原生应用内消息使用现成的布局,由 Pushwoosh SDK 直接在设备上渲染,而不是像自定义应用内消息那样加载 HTML 页面。这使得它们加载更快,动画更流畅,而且您不需要设计或开发技能即可构建一个。
当您想快速发布促销、提醒或功能公告,并且不需要完全自定义的布局时,请选择原生应用内消息。如果您需要对设计进行完全控制,请改为构建基于 HTML 的应用内消息。
前提条件
Anchor link to在创建原生应用内消息模板之前,请确保:
- Pushwoosh SDK 已集成到您的应用程序中,以便应用内消息可以显示。了解更多
- 您的应用程序运行 iOS SDK 7.2.0+ 或 Android SDK 6.10.0+ 以支持 modal、fullscreen 和 stories。Sheet、carousel 和 banner 需要 iOS SDK 7.2.1+ 或 Android SDK 6.10.1+。Video 需要 iOS SDK 7.2.0+ 或 Android SDK 6.11.0+。
跨平台框架
Anchor link to原生应用内消息模块的提供方式因您的技术栈而异:
- Flutter 会自动捆绑原生应用内消息模块。除了 Pushwoosh Flutter 插件外,无需额外设置。
- React Native、Cordova、Capacitor、Unity 和 Expo 不会捆绑原生应用内消息模块。请自行将其添加到您应用程序的底层 Android/iOS 项目中:Android 上是
pushwoosh-inapp-ui,iOS 上是PushwooshInApp。有关如何将原生模块添加到您的项目,请参阅您框架的集成指南。 - 不支持 Web。原生应用内消息通过 Android 和 iOS SDK 渲染,而 Web SDK 没有原生应用内消息模块。
创建原生应用内消息模板
Anchor link to- 前往 Content → In-apps。
- 点击 Create in-app 旁边的箭头,然后选择 Native in-app。原生编辑器会直接打开。
- 输入模板名称。
- 在编辑器顶部的 Display type 中,选择一个显示类型:modal、fullscreen、stories、sheet、carousel、banner 或 video。每种类型所需的内容请参阅配置显示类型。
编辑器右侧显示实时移动预览,左侧是模板字段,分为 Content、Config 和 Actions 组。您在每个组中看到的内容取决于您选择的显示类型。
配置显示类型
Anchor link toModal
Anchor link to一个居中的卡片,可选择显示在变暗的背景上。
- 在 Content 下,添加标题和消息,每个都有自己的文本颜色,以及一个可选的图片。请参阅添加图片。
- 在 Config 下,设置卡片背景颜色。这将填充文本和图片后面的卡片。
- 如果您希望用户可以通过 ✕ 控件关闭应用内消息而无需点击按钮,请打开 Close button。
- 打开 Dim background 以使卡片后面的屏幕变暗,并将焦点保持在您的消息上。
- 在 Actions 下,添加一个或多个按钮。请参阅配置按钮。

Fullscreen
Anchor link to一张带有文字和按钮的边缘到边缘的封面图片。在左侧面板中填写以下字段:
- 在 Content 下,添加一张封面图片,以及一个标题和一条消息,每个都有自己的文本颜色。请参阅添加图片。
- 在 Config 下,设置封面颜色。它会在封面图片加载时显示,或者如果您将图片留空,它会单独显示。
- 如果您希望用户可以通过 ✕ 控件关闭应用内消息而无需点击按钮,请打开 Close button。
- 在 Actions 下,添加一个或多个按钮。请参阅配置按钮。

Stories
Anchor link to一系列带有顶部进度条的全屏幻灯片,类似于社交媒体故事。每张幻灯片都是 Content 下的一个独立 Stories 条目。
- 填写第一张幻灯片的 Image、Title 和 Message(每个都有自己的文本颜色)。请参阅添加图片。
- 将 Seconds 设置为幻灯片在屏幕上停留的时间,然后前进到下一张。默认值为 5。输入一个 1 到 30 之间的值。超出此范围的值将因验证错误而阻止 Save。
- 或者,点击幻灯片内的 Add 为其添加自己的 CTA 按钮。请参阅配置按钮。

- 点击最后一张幻灯片下方的 Add 添加另一张幻灯片,然后为其重复步骤 1-3。
- 在 Config 下,如果您希望故事在最后一张幻灯片结束后从第一张重新开始,请打开 Loop。
- 如果您希望用户可以在所有幻灯片播放完毕前退出,请打开 Close button。

完成的故事对用户来说是什么样子的示例
Anchor link toSheet
Anchor link to一个从屏幕下边缘向上滑动的底部工作表。顶部的把手允许用户向下拖动以关闭。
在左侧面板中填写以下字段:
- 在 Content 下,添加标题和消息,每个都有自己的文本颜色,以及一个可选的图片。请参阅添加图片。
- 在 Config 下,设置工作表背景颜色。这将填充文本和图片后面的面板。
- 如果您希望用户可以通过 ✕ 控件关闭工作表而无需点击按钮,请打开 Close button。
- 在 Actions 下,添加一个或多个按钮。请参阅配置按钮。

Carousel
Anchor link to一个全屏消息,包含多张用户可以滑动的卡片。底部的点表示当前活动的卡片。在 Content 下,每张卡片都是一个独立的 Cards 条目。
- 填写第一张卡片的 Image、Title 和 Message(每个都有自己的文本颜色)。请参阅添加图片。
- 为卡片设置 Action。选择 close 以在用户点击卡片时关闭应用内消息,或选择 url 打开一个链接(选项与配置按钮相同)。
- 点击最后一张卡片下方的 Add 添加另一张卡片,然后为其重复步骤 1-2。
- 如果您希望用户可以在不点击卡片的情况下离开轮播,请打开 Close button。

Banner
Anchor link to一个固定在屏幕顶部或底部边缘的紧凑条,用于不应阻挡整个 UI 的消息。
- 在 Content 下,添加标题和消息,每个都有自己的文本颜色,以及一个可选的小图片。请参阅添加图片。
- 在 Config 下,将 Position 设置为 top 或 bottom,以将横幅固定在您想要的屏幕边缘。
- 将 Auto-dismiss, sec 设置为在指定秒数后自动关闭横幅。将其留空以保持横幅直到用户关闭它。
- 设置条的背景颜色。
- 如果您希望横幅上有一个 ✕ 控件,请打开 Close button。
- 在 Actions 下,将 Action 设置为 close 或 url。横幅没有单独的按钮。点击横幅上的任何位置都会执行此操作。有关 close 和 url 的行为,请参阅配置按钮。

Video
Anchor link to一个全屏播放器,用于播放 HLS 流媒体链接(.m3u8)或直接的 .mp4 文件,顶部可选择添加标题、消息和按钮。
- 在 Content 下,将 Video URL(必填)设置为指向
.m3u8或.mp4文件的绝对 HTTPS 链接。或者,添加一个在播放开始前显示的 Poster 图片,以及一个在视频无法播放时显示的 Fallback image。 - 添加标题和消息,每个都有自己的文本颜色。
- 在 Config 下,打开 Loop 以在视频结束后重新开始播放。
- 打开 Muted 以在静音状态下开始播放。
- 如果您希望用户可以在不等待视频结束的情况下关闭应用内消息,请打开 Close button。
- 在 Actions 下,添加一个或多个按钮。请参阅配置按钮。

配置文本字段
Anchor link to文本字段不支持多行文本。如果您按 Enter 键,编辑器可能会显示换行符,但 Pushwoosh 会保存一个空格。在设备上,文本将显示为一行。
要添加表情符号,请点击字段工具栏旁边的 Emoji。表情符号在与纯文本相同的文本字段中受支持。请检查实时预览以查看它们在布局中的外观。
添加动态内容
Anchor link to每个文本字段都支持使用标签和 User ID 进行个性化设置。
- 点击字段工具栏旁边的 Personalization。
- 在 Tag 下,选择一个标签或 User ID。
- 选择一个格式修饰符(例如,CapitalizeFirst 或 regular)。
- 或者,输入一个 Default Tag Value。
- 点击 Insert。

插入的标签在字段中显示为一个芯片。在点击 Insert 之前,您可以更改标签、修饰符和默认值。个性化使用与动态内容相同的标签、修饰符和默认值。
当您点击 Save 时,Pushwoosh 会检查每个文本字段中的动态内容和 Liquid。如果某个字段无法解析(例如,未关闭的 {% if %} 标签),Save 将被阻止,并显示一个 Dynamic content contains errors 的提示,指出损坏的字段和语言。请在此处修复,然后再次点击 Save。
配置按钮
Anchor link toModal、fullscreen、每个 stories 幻灯片、sheet 和 video 使用相同的按钮字段:
- Button text 及其颜色。
- Background、Border color 和 Border radius。
- **Action:**选择用户点击按钮时发生的操作:
- **close:**关闭应用内消息。
- **url:**打开您在出现的字段中输入的链接。使用网址(例如,
https://example.com)或指向您应用程序的深层链接(例如,myapp://product/123)。

点击 Add 添加另一个按钮,或点击按钮上的 × 将其删除。
添加图片
Anchor link to每个图片字段(图片、封面图片以及每张卡片或幻灯片的图片)的工作方式都相同。将托管的图片 URL 直接粘贴到字段中,或点击旁边的 Choose from Media storage 打开媒体库并选择您已上传的图片。从媒体库中选择图片会替换字段中当前的任何 URL。
添加条形码
Anchor link to在 Choose from Media storage 旁边,点击 Build a barcode 打开一个抽屉,该抽屉会生成可扫描的 Code 128、EAN-13、EAN-8、UPC-A 或 QR 码,并将生成的 URL 写入字段中:

- Code。要编码的值:可以是一个固定的代码,如
SAVE20,也可以是一个设备标签,如{Coupon|String|}或{LoyaltyCardNumber|String|},这样每个收件人都会看到自己的代码。设备标签会在应用内消息出现前,在收件人的设备上用其实际值填充。默认为{Coupon|String|}。

- Symbology。选择条形码格式:Code 128、EAN-13、EAN-8 和 UPC-A 是手持扫描仪读取的标准零售条形码,而 QR 是任何手机摄像头都可以扫描的方形码。
- Error correction。仅在将 Symbology 设置为 QR 后出现。现实世界中的 QR 码可能会被划伤、模糊或部分被徽标覆盖,而纠错是嵌入代码中的额外信息,以便即使有损坏也能扫描。选择它可以容忍的损坏程度:
L、M、Q或H,从最不稳健到最稳健。更高级别可以容忍更多损坏,但会产生更密集、更复杂的代码。默认为M。

- Print the code in digits。在代码下方显示值。

当 Code 是设备标签时,预览会替换为示例值,因为它无法解析真实收件人的标签。像 SAVE20 这样的固定代码会完全按照输入进行预览。
点击 Insert into the image field 将生成的 URL 复制到上方的 Image 字段中。

添加本地化
Anchor link to默认情况下,原生应用内消息只有一种语言。要添加更多语言:
- 点击顶部栏中语言选择器旁边的 +。
- 选择要添加的语言,然后点击 Apply。

- 使用顶部栏中的语言选择器在语言之间切换,并为每种语言填写文本字段。
保存模板
Anchor link to点击右上角的 Save 以保存您的更改。
然后,该模板会与您的其他应用内模板一起出现在 Content → In-apps 中。
在活动中使用它
Anchor link to原生应用内消息模板会与您的其他应用内模板一起出现在模板选择器中。
您可以用它来:
- 发送即时应用内消息
- 向 Customer Journey 添加应用内消息步骤
- 当用户点击推送时打开应用内消息