概述
OneSignal 提供两种应用内消息编辑器:- 拖放编辑器 GUI 适合非技术创作者
- HTML 编辑器适合希望对布局、行为和响应式设计进行像素级精确控制的开发人员。

展示应用内代码和渲染效果的图片
- 布局: 构建复杂的响应式布局(例如,并排的 CTA 按钮)。
- 表单: 内联收集输入信息(邮箱、反馈、调查)。
- 字体和品牌: 使用自定义网络字体和 CSS 变量。
- JS 操作: 跟踪点击、标记用户、发送结果等。
需求
- iOS: 3.9.0+
- Android: 4.6.3+
- 如果您的应用使用较旧的 SDK,应用内消息将以中心模态布局进行渲染。
创建和预览 HTML 应用内消息
转到消息 > 新建应用内消息来创建、编辑、测试、暂停、复制或删除您的应用内消息。 在左侧输入您的 HTML 代码并实时预览。使用发送测试应用内消息来测试响应式设计和效果。
显示 HTML 编辑器和预览的图片
添加可跟踪标签
在交互元素上添加data-onesignal-unique-label
,以便跟踪和处理点击。
使用 JavaScript 绑定点击操作
在应用内 JS 库文档中了解更多。
资源支持
资源在渲染时从您提供的 URL 加载。个性化
使用 Liquid 语法动态插入用户数据值:- 元素内的文本,如
div
、p
、li
<style>
块内- 在属性
href
、src
、action
和data
中
<script>
标签内- 跨复杂嵌套内容,其中解析会变得模糊,例如:
可访问性和响应式设计
使用 CSS 媒体查询和平台字体来适应设备尺寸和操作系统文本设置。安全区域(刘海、主页栏)
现代设备具有安全区域(如刘海或主页栏)。使用safe-area-inset-*
变量来为您的布局添加内边距:
嵌入视频
您可以使用<iframe>
在应用内消息中直接嵌入视频(例如 YouTube、Vimeo)。
这对于演示、宣传或入门流程非常有用。
大多数浏览器只允许在视频静音开始时自动播放,所以始终在嵌入 URL 中包含 &mute=1
。
自动播放视频可能影响性能。保持视频简短,并避免在单个应用内消息中嵌入多个自动播放的视频。
示例:自动播放 YouTube 嵌入
下面的代码片段展示了如何在应用内消息中将 YouTube 视频居中显示,并设置固定尺寸(560×315):理解自动播放行为
- 嵌入 URL(/embed/VIDEO_ID)是自动播放所必需的——正常的 watch?v= 链接不会生效。
- 添加 ?autoplay=1&mute=1 确保视频自动播放并符合浏览器的自动播放规则。
- allow=“autoplay; encrypted-media” 属性授予自动播放权限。
- .video-box 使用固定的 560×315px 尺寸(YouTube 默认的 16:9 比例),使视频显示为包含式而不是全屏拉伸。
- body 设置为 flex 容器,使用 justify-content: center 和 align-items: center 将视频框精确地定位在屏幕中央。
性能提示
- 优先使用内联关键 CSS;延迟加载繁重脚本。
- 优化图片(使用带有
object-fit
的尺寸化<img>
),尽可能使用现代格式。 - 保持 HTML 载荷简洁;避免大型 base64 数据。
- 使用系统字体或使用
font-display: swap
的高性能网络字体。 - 减小文件大小并使用适当的分辨率:
- Apple 图片指南
- Android 图片概览
- OneSignal 与 imagekit.io 无关联,但它是一个有用的优化工具。
跨设备测试
经常发送测试消息以确认不同设备类型上的行为和布局。请参见查找和设置测试订阅。常见问题
我可以移除横幅样式应用内消息的灰色背景或阴影吗?
可以。对于顶部/底部横幅,请更新您的 SDK 并设置: iOS 5.1.5+我可以重复使用来自其他提供商的应用内模板吗?
可以。将您的 HTML 粘贴到编辑器中,并用 OneSignal 应用内 JS 方法替换分析/操作。我没有模板。如何开始?
使用提供的启动模板或浏览可用模板。建议具备一些 HTML/CSS 经验。需要什么 SDK 版本?
- iOS: 3.9.0+
- Android: 4.6.3+