跳转到主要内容

​
概述

OneSignal 的拖放编辑器让您可以使用模块化块元素构建应用内消息——无需编码。如果您喜欢使用标记语言，请参见使用 HTML 设计应用内消息。

应用内消息拖放编辑器

​
前置条件

  • 在您的应用中安装并初始化 OneSignal SDK。
  • 推荐使用最新功能的 SDK 版本：iOS 5.1.5+，Android 5.1.9+。具体功能的最低版本要求见下文。
  • 图片托管在高性能 CDN 上（如果自托管则推荐）并适当调整大小。

​
消息类型（布局）

消息在屏幕上的显示方式：
消息类型描述
顶部从顶部滑下。适用于简洁的通知和确认消息。
中心从中心展开并部分填充屏幕。适用于大多数使用场景。
底部从底部滑上。适用于快讯栏和同意提示。
全屏展开填充整个屏幕。可以有边距或无边距。添加轮播图以实现多屏流程。

展示您可以创建的应用内消息类型的图像。

​
轮播图

轮播图让您创建多屏流程——引导流程、功能介绍或多步骤优惠。 选择全屏消息类型并点击创建轮播图按钮。您最多可以添加 10 张卡片（屏幕）。每张卡片都可以包含任意组合的可自定义块。

轮播图示例

​
方向支持

应用内消息支持竖屏和横屏模式。

显示竖屏和横屏方向的图像。

​
块和布局设置

所有内容都位于背景块（画布）内。在背景上使用内边距来控制外部间距；在单个块上使用外边距来控制元素之间的间距。 保持布局一致性的快速规则
  1. 使用内边距控制与消息边缘的距离。
  2. 使用外边距分隔块（例如，标题 → 按钮）。
  3. 避免在同一侧堆叠大量内边距和外边距。
  4. 优先使用居中、基于流的布局而不是绝对定位。
  5. 发布前始终在不同设备上预览。

背景块（画布）

​
文本

用于标题、描述或个性化文案。
  • 响应式尺寸：宽度/高度以百分比表示。
  • 字体：Google Fonts。
  • 格式化：粗体、斜体、下划线。
  • 颜色：十六进制或 RGBA（支持透明度）。
  • 对齐：左对齐、居中、右对齐。
  • 尺寸：可调节的字体大小。
高级选项
  • 外边距：块周围的空间。
提示

文本块

​
图像

添加图像来说明功能或优惠。格式：.jpg、.png、.gif（最大 5MB）。为了性能优化，推荐使用托管 URL。
  • 宽高比：推荐 16:9、4:3、3:2。
  • 点击操作：可选（链接、深度链接、标签、结果、提示）。
高级选项：
  • 点击时关闭
  • 外边距：块周围的空间。
提示
  • 基于标签引用服务器上的不同图像。参见动态 URL。
    • 示例图像 URL：https://example.com/images/{{ tag_key }}.png

图像块

​
按钮

驱动导航、反馈或权限提示等操作。
  • 文本和字体：自定义 CTA 文案和样式。
  • 颜色和尺寸：自定义按钮视觉效果。
  • 图像：可选图标/图像。
  • 圆角半径：设置圆角。
  • 点击操作：支持标记、结果、提示和深度链接。
高级选项
  • 点击时关闭
  • 外边距：块周围的空间。
  • 边框和阴影：完全可自定义。
提示
  • 使用数据标签个性化按钮文案或链接。
  • 通过设置背景不透明度 = 0来制作纯图像按钮。
  • 使用微妙的阴影（低不透明度，高模糊）来突出主要 CTA。

按钮块

​
关闭按钮

控制关闭（X）图标的可见性和样式。
  • 切换：启用/禁用。
  • 自定义图标：.jpg、.png、.svg、.gif。推荐尺寸：10x10px。
  • 点击操作：可选。
高级选项
  • 外边距：块周围的空间。
提示
  • 如果禁用关闭按钮，请确保设置关闭操作或关闭时间以允许用户退出。
  • 在轮播图中很有用，当您希望用户浏览所有卡片时。

关闭按钮

​
背景

为您的布局和品牌设置基础。
  • 图像支持：.jpg、.png、.gif
  • 颜色：支持 RGBA
  • 点击操作：可选
高级选项
  • 内边距：内容与消息边缘之间的空间（默认 24px）
  • 点击时关闭

背景编辑器

​
个性化和本地化

使用数据标签在每个用户基础上个性化应用内消息。 有关本地化，请参见多语言消息了解更多详情。

​
常见问题

​
如何制作全屏应用内消息？需要什么 SDK 版本？

要创建无边距的应用内消息：
  • iOS SDK 3.9.0+
  • Android SDK 4.6.3+
使用旧版 SDK 的用户仍然可以看到消息，但会有默认边距。

​
如何移除横幅样式应用内消息的灰色背景或投影？

要移除顶部/底部横幅的覆盖层，请更新您的 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"/>