跳转到主要内容

概述

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

展示应用内代码和渲染效果的图片

HTML 编辑器的功能:
  • 布局: 构建复杂的响应式布局(例如,并排的 CTA 按钮)。
  • 表单: 内联收集输入信息(邮箱、反馈、调查)。
  • 字体和品牌: 使用自定义网络字体和 CSS 变量。
  • JS 操作: 跟踪点击、标记用户、发送结果等。

需求

  • iOS: 3.9.0+
  • Android: 4.6.3+
    • 如果您的应用使用较旧的 SDK,应用内消息将以中心模态布局进行渲染。

创建和预览 HTML 应用内消息

转到消息 > 新建应用内消息来创建、编辑、测试、暂停、复制或删除您的应用内消息。 在左侧输入您的 HTML 代码并实时预览。使用发送测试应用内消息来测试响应式设计和效果。

显示 HTML 编辑器和预览的图片

添加可跟踪标签

在交互元素上添加 data-onesignal-unique-label,以便跟踪和处理点击。
<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>

使用 JavaScript 绑定点击操作

// Tag the user when they click a button
document.querySelector(".tag-user").onclick = (e) => {
  OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
应用内 JS 库文档中了解更多。

资源支持

资源在渲染时从您提供的 URL 加载。
<img src="https://media.onesignal.com/iam/default_image_20200320.png" alt="Promo" />

个性化

使用 Liquid 语法动态插入用户数据值:
<div>Hi there {{ name | default: 'you' }}!</div>
支持的上下文:
  • 元素内的文本,如 divpli
  • <style> 块内
  • 在属性 hrefsrcactiondata
不支持在:
  • <script> 标签内
  • 跨复杂嵌套内容,其中解析会变得模糊,例如:
<div>
  Hi {{name}}
  <span>Here's your coupon!</span>
</div>

可访问性和响应式设计

使用 CSS 媒体查询和平台字体来适应设备尺寸和操作系统文本设置。
@media only screen and (max-width: 620px) {
  .btn-primary { width: 100% !important; }
}
/* Respect dynamic text sizes on iOS */
:root { font: -apple-system-body; }

安全区域(刘海、主页栏)

现代设备具有安全区域(如刘海或主页栏)。使用 safe-area-inset-* 变量来为您的布局添加内边距:
body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  padding-left: var(--safe-area-inset-left);
  margin: 0;
}

嵌入视频

您可以使用 <iframe> 在应用内消息中直接嵌入视频(例如 YouTube、Vimeo)。 这对于演示、宣传或入门流程非常有用。 大多数浏览器只允许在视频静音开始时自动播放,所以始终在嵌入 URL 中包含 &mute=1
自动播放视频可能影响性能。保持视频简短,并避免在单个应用内消息中嵌入多个自动播放的视频。

示例:自动播放 YouTube 嵌入

下面的代码片段展示了如何在应用内消息中将 YouTube 视频居中显示,并设置固定尺寸(560×315):
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center; /* center horizontally */
        align-items: center;     /* center vertically */
        background: #f0f0f0;     /* optional background */
      }
      .video-box {
        width: 560px;  /* fixed width */
        height: 315px; /* fixed height (16:9 ratio) */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        border-radius: 8px;
        overflow: hidden;
        background: #000;
      }
      .video-box iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="video-box">
      <iframe src="https://www.youtube.com/embed/bH60T1PZg1c?autoplay=1&mute=1"
        allow="autoplay; encrypted-media"
        allowfullscreen>
      </iframe>
    </div>
  </body>
</html>

理解自动播放行为

  • 嵌入 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 的高性能网络字体。
  • 减小文件大小并使用适当的分辨率:

跨设备测试

经常发送测试消息以确认不同设备类型上的行为和布局。请参见查找和设置测试订阅

常见问题

我可以移除横幅样式应用内消息的灰色背景或阴影吗?

可以。对于顶部/底部横幅,请更新您的 SDK 并设置: iOS 5.1.5+
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

我可以重复使用来自其他提供商的应用内模板吗?

可以。将您的 HTML 粘贴到编辑器中,并用 OneSignal 应用内 JS 方法替换分析/操作。

我没有模板。如何开始?

使用提供的启动模板或浏览可用模板。建议具备一些 HTML/CSS 经验。

需要什么 SDK 版本?

  • iOS: 3.9.0+
  • Android: 4.6.3+
较旧的 SDK 将回退到中心模态渲染。

应用内消息在离线时能工作吗?

不能。消息需要活跃的互联网连接来获取和渲染内容。
I