概述
“提示”是指要求用户允许向其发送推送通知的过程。提示是由浏览器或移动应用程序显示的弹窗消息,用户需要点击”允许”才能订阅并接收推送通知。 网页推送适用于桌面、Android 和 iOS,但请注意 iOS 的网页推送需要一些额外的配置步骤。如果您有移动应用,请查看如何使用应用内消息提示推送权限。 浏览器提供自己的原生系统级权限提示,用户必须看到该提示并点击”允许”才能订阅您网站的推送通知。浏览器现在强烈建议网站在显示原生权限提示时更加有选择性。这就是为什么鼓励在原生提示之前使用 OneSignal 提示或您自己的自定义”软提示”。OneSignal 提示(软提示)
OneSignal 软提示是用户友好的可自定义提示,在浏览器的原生权限对话框之前显示。这些提示本身不会为用户订阅消息,但它们有助于:- 解释订阅消息(推送、邮件或短信)的价值。
- 防止浏览器自动阻止权限请求。
- 只有在用户表示兴趣后才启动原生浏览器提示。
提示图标
要自定义网页推送通知中显示的图标,请前往您的 OneSignal 仪表板:设置 > 推送和应用内 > 网页设置。 在 网站设置 部分,配置 默认图标 URL。除非另有指定,否则此图标会出现在您的所有通知中。- 接受的格式:
.png或.jpg - 建议尺寸:
256x256像素(以满足 Safari 的要求) - 如果未设置,OneSignal 将使用通用铃铛图标

图片显示了您的网站推送设置中的网站设置部分。这是您配置网站名称、网站 URL 和默认图标的地方。
权限提示设置
配置您希望在网站上显示的提示,以鼓励用户订阅。在您的 OneSignal 仪表板中,导航到:设置 > 推送和应用内 > 网页设置 > 权限提示设置 从那里点击 添加提示 来选择 OneSignal 可用的提示类型。您还可以编辑列表中已显示的任何现有提示。
添加新提示或选择您要编辑的提示。
- 滑动提示:用于推送通知和可选类别选择的视觉突出提示。
- 邮箱/电话提示:用于收集用户邮箱地址、电话号码或两者。
- 订阅铃铛提示:用于推送订阅的持续浮动小部件,通常放置在网站的底部角落。
- 自定义链接提示:嵌入在您网站中的可自定义按钮或链接,触发原生浏览器提示。
- 原生权限提示:用户必须接受的浏览器级提示,才能接收推送通知。
滑动提示与类别
滑动和类别提示在桌面端屏幕顶部中央和移动端底部中央显著出现。这些是在必需的原生权限提示之前显示的高可见度软提示。它们不会独立为用户订阅,但有助于启动订阅流程。
显示带有类别标签的滑动提示的示例。
- 前往 设置 > 推送和应用内 > 网页设置 > 权限提示设置
- 选择 添加提示 > 推送提示 > 推送滑动提示
init 代码的 promptOptions 对象中使用 slidedown 属性。详情请参阅 Web SDK 参考。
推送滑动提示选项。
滑动提示文本
您可以自定义滑动提示中显示的文本:- 操作消息:最多 90 个字符
- 按钮标签:每个最多 15 个字符
- 目前不支持字体、尺寸或颜色的自定义

滑动提示文本选项。
init 代码的 promptOptions 对象中使用 text 属性。详情请参阅 Web SDK 参考。类别
您可以通过添加类别来增强滑动提示——让用户指示对特定消息主题(例如,新闻、销售、更新)兴趣的复选框。- 最多允许 10 个类别
- 每个类别存储为数据标签,值为 1(已选中)或 0(未选中)
- 用于根据用户偏好进行用户群分组和目标消息推送
- 标签:用户在提示中看到的内容。建议首字母大写。
- 标签键:OneSignal 中的标签名称。建议使用小写字母和下划线(
_)替代空格。 - 更新说明、正向和负向按钮:如果您选择在用户已经订阅推送后再次显示类别提示,则将显示更新说明而不是操作消息。这允许您通知用户他们可以更新其类别。

类别示例。标签是用户看到的内容,而标签键是在 OneSignal 中设置为标签键的内容,值为 '1'。
init 代码的 promptOptions 对象中使用 categories 属性。详情请参阅 Web SDK 参考。邮箱和电话号码提示
邮箱和电话提示直接在滑动提示中收集可选的用户联系信息。每个字段都具有内置验证以确保正确的格式。 提交后:- 为用户创建新的邮件和/或短信订阅
- 您可以开始通过这些渠道向他们发送消息
- 导航到 设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 邮箱/电话提示。

电子邮件和电话号码提示设置

电子邮件和电话号码提示设置
init 代码的 promptOptions 对象中将 type 添加为 email、sms 或 smsAndEmail。详情请参阅 Web SDK 参考。订阅铃铛提示
订阅铃铛提示是一个出现在网站底部角落的小型持续小部件。当未订阅的用户点击时,它会触发原生浏览器提示。 由于其占用空间最少,铃铛可以始终保持可见,使其成为持续选择加入机会的被动但有效选项。它不需要关闭,并为用户提供了何时订阅的控制权。
订阅铃铛提示
典型网站和 WordPress 设置:订阅铃铛提示
典型网站和 WordPress 设置:订阅铃铛提示
- 颜色
- 尺寸
- 底部位置(左侧或右侧)
- 文本和标签

仪表板中的订阅铃铛设置
自定义代码设置:订阅铃铛提示
自定义代码设置:订阅铃铛提示
notifyButton 参数。您可以在不同的铃铛提示自定义示例之间切换。隐藏: 要在用户订阅后隐藏订阅铃铛或仅在特定页面上显示,请确保在初始化期间在 displayPredicate 函数中返回值 false 或 解析为值 false 的 Promise。此函数在显示订阅铃铛之前进行评估。您可以返回任何其他值来显示订阅铃铛。自定义链接提示
自定义链接提示是一个用户触发的按钮或链接,您可以将其嵌入到网站的任何地方。点击时,它会显示推送通知的原生浏览器提示。
自定义链接提示
- 在博客文章下方:“喜欢这篇文章吗?在我们发布新内容时立即获取更新!”
- 在您的网站页脚中
- 在粘性标题或浮动工具栏中
典型网站和 WordPress 设置:自定义链接提示
典型网站和 WordPress 设置:自定义链接提示

仪表板中的自定义链接设置
自定义代码设置:自定义链接
自定义代码设置:自定义链接
init 代码的 promptOptions 对象中,添加 customlink 对象及其可用属性。典型和自定义代码设置:附加样式
典型和自定义代码设置:附加样式
onesignal-reset,它会从元素中删除任何先前的样式,以确保与我们的内部样式没有冲突,并且看起来完全符合您在仪表板中的定义。如果您发现需要重新定义任何 OneSignal 样式,以下是自定义链接小部件中使用的类的简短参考| 类名 | 应用于 |
|---|---|
| onesignal-customlink-container | 主容器 |
| onesignal-customlink-subscribe | 操作按钮 |
| onesignal-customlink-explanation | 带有自定义说明文本的段落 |
| state-subscribed | 主容器内的所有组件 |
| state-unsubscribed | 主容器内的所有组件 |
| button | 如果处于按钮模式,则为操作按钮 |
| link | 如果处于链接模式,则为操作按钮 |
| small | 主容器内的所有组件 |
| medium | 主容器内的所有组件 |
| large | 主容器内的所有组件 |
| hide | 如果 unsubscribeEnabled 设置为 false,则为主容器内的所有组件 |
原生权限提示
原生权限提示是由浏览器控制的对话框,用户必须接受它才能订阅您网站的推送通知。此提示:- 订阅所需
- 在 OneSignal 软提示(如滑动提示或自定义链接)后自动触发
- 外观、文本或行为不可自定义

Chrome上的原生权限提示
浏览器原生提示行为
不同的浏览器施加独特的行为和限制以减少垃圾权限请求。为了对抗垃圾信息和不良用户体验,OneSignal 将在以下列出的某些情况下自动默认使用滑动提示。 如果您不想显示滑动提示并希望直接使用原生权限提示,您必须关闭自动提示选项并使用我们的 Web SDKrequestPermission() 方法。 请注意,如下所述,直接显示原生权限提示可能无法在所有浏览器中正常工作。
Chrome
Chrome 80+ 可能会显示更安静的 UI 而不是完整的提示:- 自动应用于经常拒绝提示的用户
- 也适用于拒绝率高的网站

Chrome 桌面版上更安静 UI 的示例。
- 您有 3 次提示机会
- 在第 3 次关闭后,提示将被抑制 7 天(来源)。
Firefox
Firefox 72+ 开始要求用户手势来触发原生权限提示。如果您尝试自动显示原生权限提示,您将在浏览器中看到一个图标,要求用户点击该图标以显示原生权限提示。
Firefox 图标
Safari
Safari 12.1+ 开始要求用户手势来触发原生权限提示。Edge
Edge uses a trust-based model:- 如果网站不可信,提示将被抑制并由浏览器栏中的铃铛图标替代:

在 Edge 中为不熟悉或不可信的网站显示的铃铛图标。
- 如果网站可信,原生提示正常出现:

在 Edge 中,原生提示直接在可信网站上显示。
自动提示和显示设置
为了最大化参与度并避免干扰您的用户,最好在他们在您的网站上花费一些时间后再延迟显示提示。OneSignal 允许您使用两个延迟条件根据用户行为自动显示提示:- 页面浏览次数: 用户在您网站上加载任何页面的次数
- 页面停留秒数: 用户在页面上必须花费的时间量
典型网站和 WordPress 设置:自动提示
典型网站和 WordPress 设置:自动提示
- 导航到:设置 > 推送和应用内 > 网页设置 > 权限提示设置
- 选择提示或创建新的提示
- 启用自动提示
- 设置您的延迟首选项(页面浏览次数和时间延迟)

示例:此提示设置为在第三次页面浏览后 30 秒显示。
- 点击完成,然后保存
自定义代码设置:自动提示
自定义代码设置:自动提示
init 代码的 promptOptions 对象中使用 autoPrompt 和 delay 选项。还有一些方法可以直接触发所需的滑动或原生提示。有关更多详细信息,请参阅 Web SDK 参考。手动触发(代替自动提示)
手动触发(代替自动提示)
- 禁用自动提示
- 使用 SDK 的滑动或原生提示方法通过代码显示提示
滑动提示退让逻辑
一旦显示滑动提示(推送、类别或邮箱/电话)并被解除(通过允许、取消或关闭对话框),它将退让并按定义的时间表重新出现:| 交互结果 | 下次提示时机 |
|---|---|
| 第一次解除 | 等待 3 天 |
| 第二次解除 | 等待 7 天 |
| 第三次及后续解除(未订阅) | 等待 30 天 |
请求网页推送权限的最佳实践
获得用户授予网页推送权限需要时机、信任和用户友好的设计。遵循这些最佳实践来最大化选择加入率,同时保持积极的网站体验。在何时询问方面要有策略
时机比频率更重要。在用户已经参与或显示意图时显示权限提示。例如:- 在他们将商品添加到购物车或参与帖子或评论后
- 当他们更新个人资料或登录账户时
- 在完成显示对您品牌承诺的操作时
使用订阅铃铛提示
铃铛提示是用户随时订阅的持久性、非侵入性方式。这个浮动铃铛图标非常适合长期参与,因为它:- 保持订阅选项可见而不中断浏览。
- 允许用户选择何时订阅。
- 通过不强制立即请求权限来建立信任。
让用户使用类别个性化他们的订阅
类别提示让用户选择他们想要的主题或消息类型——如”促销”、“产品更新”或”博客文章”。这种方法:- 使提示感觉不那么侵入性和更相关
- 提高参与度和消息点击率
- 通过提前设定期望来减少后续取消订阅
随时间测试和优化
不要依赖单一策略。测试不同的提示类型、消息和时机,以查看您的受众产生共鸣的内容。 尝试这种方法:- 从原生浏览器提示开始几个月,以衡量您的基线选择加入率。
- 收集数据后,尝试使用滑动提示或自定义提示流程来提高跨浏览器和受众群体的转化率。
- 使用我们的 SDK 的
permissionPromptDisplay和permissionChange事件 以及slidedown事件 跟踪性能。
常见问题和故障排除
提示显示问题
如果以下任何条件为真,浏览器的原生权限提示可能不会显示: 1. 浏览器阻止了提示显示。 导航到浏览器的设置并检查”通知”权限设置。Chrome 示例:chrome://settings/content/notifications

Chrome 通知设置
- 用户选择了”不允许网站发送通知”,这将阻止显示原生权限提示。这必须显示”网站可以要求发送通知”才能允许显示原生权限提示。
- 用户已将
https://yoursite.com添加到”不允许发送通知”列表中,这将阻止显示原生权限提示。必须从列表中删除才能允许显示原生权限提示。
- Chrome - 此页面说明如何在 Chrome 中管理通知,方法是转到设置 > 隐私和安全 > 网站设置 > 通知,您可以在其中控制默认行为并管理各个网站的权限。
- Firefox - 本指南介绍了 Firefox 的 Web 推送通知,说明如何通过设置 > 隐私和安全 > 通知管理通知权限,以及如何通过地址栏的网站信息图标控制特定网站的权限。
- Safari - 此 Apple 指南说明如何通过 Safari > 偏好设置 > 网站 > 通知在 Mac 上自定义 Safari 通知,您可以在其中管理哪些网站可以发送通知,并通过系统偏好设置控制通知行为。
- Edge - 本文详细说明了如何通过导航到设置 > 隐私、搜索和服务 > 网站权限 > 通知来管理 Edge 通知,或通过单击地址栏中的网站信息图标。
常见问题
如何在 Facebook、Instagram 或 TikTok 等社交媒体应用中显示提示?
如何在 Facebook、Instagram 或 TikTok 等社交媒体应用中显示提示?
为什么滑动提示一直显示?
为什么滑动提示一直显示?
- 您处于隐身模式、私人浏览模式或访客浏览模式。
- 您在不使用自动提示选项的情况下以编程方式触发提示。请参阅 Web SDK 参考并检查您使用的提示方法。
为什么当我想要原生浏览器提示时看到滑动提示?
为什么当我想要原生浏览器提示时看到滑动提示?
自定义
如何翻译/本地化提示?
如何翻译/本地化提示?
我可以进行 A/B 测试提示吗?
我可以进行 A/B 测试提示吗?
我可以根据他们订阅的页面对订阅进行细分吗?
我可以根据他们订阅的页面对订阅进行细分吗?
我可以更改铃铛图标吗?
我可以更改铃铛图标吗?
我可以根据页面更改类别吗?
我可以根据页面更改类别吗?
如何跟踪滑动提示事件?
如何跟踪滑动提示事件?
为什么当我想要原生权限提示时,在移动设备上看到滑动提示?
为什么当我想要原生权限提示时,在移动设备上看到滑动提示?
requestPermission() 方法。