Skip to main content

概述

“提示”是指请求用户允许向其发送消息的过程。提示是在浏览器或移动应用中显示的弹窗消息,用户需要点击”允许”才能订阅并接收消息。本指南涵盖不同类型的网页提示以及如何配置它们。 网页推送适用于桌面、Android 和 iOS,但 iOS 的网页推送需要额外步骤。如果您有移动应用,请查看如何使用应用内消息提示推送权限 浏览器提供自己的原生系统级权限提示,用户必须看到该提示并点击”允许”才能订阅您网站的推送通知。浏览器现在强烈建议网站在显示原生权限提示时更加有选择性。这就是为什么鼓励在原生提示之前使用 OneSignal 提示或您自己的自定义”软提示”。

OneSignal 提示(软提示)

OneSignal 软提示是用户友好的可自定义提示,在浏览器的原生权限提示之前显示。这些提示本身不会为用户订阅消息,但它们有助于:
  1. 解释订阅消息(推送、邮件或短信)的价值。
  2. 防止浏览器自动阻止权限请求。
  3. 只有在用户表示兴趣后才启动原生浏览器提示。
软提示是浏览器推荐的,有助于最大化参与率,同时保护您的域名声誉。

提示图标

设置 > 推送和应用内 > 网页 中设置默认图标。除非您按消息覆盖,否则此图标会出现在网页推送通知和提示中。
  • 接受的格式:PNG、JPG 或非动画 GIF
  • 建议尺寸:256×256 像素
  • 如果未设置,OneSignal 将使用通用铃铛图标
有关浏览器裁剪、Android Chrome 徽章和按消息覆盖的信息,请参见通知图标
显示网站名称、URL 和默认图标字段的网站设置部分

网页推送设置中的网站设置部分


权限提示设置

配置您希望在网站上显示的提示。在您的 OneSignal 仪表板中,导航到:设置 > 推送和应用内 > 网页设置 > 权限提示设置 从那里点击 添加提示 来选择 OneSignal 可用的提示类型。您还可以编辑列表中已显示的任何现有提示。
带有添加提示按钮的权限提示设置页面

添加新提示或选择您要编辑的提示

每种提示类型都有不同的用例和显示行为。您可以单独使用它们或组合使用,以适合您网站用户体验的方式引导用户完成订阅过程。 可用的提示包括:
  • 滑动提示:用于推送通知和可选类别选择的视觉突出提示。
  • 邮箱/电话提示:用于收集用户邮箱地址、电话号码或两者。
  • 订阅铃铛提示:用于推送订阅的持续浮动小部件,通常放置在网站的底部角落。
  • 自定义链接提示:嵌入在您网站中的可自定义按钮或链接,触发原生浏览器提示。
  • 原生权限提示:用户必须接受的浏览器级提示,才能接收推送通知。

滑动提示与类别

滑动和类别提示在桌面端屏幕顶部中央和移动端底部中央显著出现。这些是在必需的原生权限提示之前显示的高可见度软提示。它们不会独立为用户订阅,但有助于启动订阅流程并捕获用户兴趣。
Chrome 桌面版上带有类别标签的动画滑动提示

带有类别标签的滑动提示

要添加滑动提示,请按以下步骤操作: 典型网站和 WordPress 设置:
  1. 前往 设置 > 推送和应用内 > 网页设置 > 权限提示设置
  2. 选择 添加提示 > 推送提示 > 推送滑动提示
自定义代码设置: 在您的 OneSignal init 代码的 promptOptions 对象中使用 slidedown 属性。详情请参阅 Web SDK 参考
仪表板中的推送滑动提示配置选项

推送滑动提示选项

有关触发提示的详细信息,请参阅自动提示和显示设置

滑动提示文本

您可以自定义滑动提示中显示的文本:
  • 操作消息:最多 90 个字符
  • 按钮标签:每个最多 15 个字符
  • 目前不支持字体、尺寸或颜色的自定义
在仪表板中启用文本自定义选项。如果没有输入文本,将使用默认文本。
滑动提示文本自定义字段

滑动提示文本选项

完成后,点击 完成,然后在下一页再次点击 保存 以使其生效。
对于自定义代码设置,在您的 OneSignal init 代码的 promptOptions 对象中使用 text 属性。详情请参阅 Web SDK 参考

类别

您可以通过添加类别来增强滑动提示——让用户指示对特定消息主题(例如,新闻、销售、更新)感兴趣的复选框。
  • 最多允许 10 个类别
  • 每个类别存储为数据标签,值为 1(已选中)或 0(未选中)
  • 用于根据用户偏好进行细分和定向消息推送
您可以在后期再次显示类别提示,让用户更新其偏好。除非被覆盖,否则之前选择的值将被保留。
  • 标签:用户在提示中看到的内容。建议首字母大写。
  • 标签键:OneSignal 中的标签名称。使用 cat_<category> 命名约定(小写字母,用下划线替代空格)——例如 cat_breaking_newscat_sportscat_apparel。这与 OneSignal 行业指南中使用的约定一致,并允许同一标签命名空间根据页面访问行为自动填充。有关自动打标签模式,请参见按页面主题为用户打标签
  • 更新说明、正向和负向按钮:如果您选择在用户已经订阅推送后再次显示类别提示,则将显示更新说明而不是操作消息。这允许您通知用户他们可以更新其类别。
显示标签和标签键字段的类别配置

带有标签和标签键的类别配置

完成后,点击 完成,然后在下一页再次点击 保存 以使其生效。
对于自定义代码设置,在您的 OneSignal init 代码的 promptOptions 对象中使用 categories 属性。详情请参阅 Web SDK 参考
有关触发提示的详细信息,请参阅自动提示和显示设置

邮箱和电话号码提示

邮箱和电话提示直接在滑动提示中收集可选的用户联系信息。每个字段都具有内置验证以确保正确的格式。 提交后:
  • 为用户创建新的邮件和/或短信订阅
  • 您可以开始通过这些渠道向他们发送消息
要添加此提示:
  • 导航到 设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 邮箱/电话提示
电子邮件和电话号码提示设置选项

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

自定义显示哪些输入字段、文本标签和自动提示延迟。
电子邮件和电话号码提示字段和标签选项

电子邮件和电话号码提示选项

完成后,按 完成,然后在下一页再次 保存 以使其生效。
对于自定义代码设置,在您的 OneSignal init 代码的 promptOptions 对象中将 type 添加为 emailsmssmsAndEmail。详情请参阅 Web SDK 参考
有关触发提示的详细信息,请参阅自动提示和显示设置

订阅铃铛提示

订阅铃铛提示是一个出现在网站底部角落的小型持续小部件。当未订阅的用户点击时,它会触发原生浏览器提示 由于其占用空间最少,铃铛可以始终保持可见,使其成为持续选择加入机会的被动但有效选项。它不需要关闭,并为用户提供了何时订阅的控制权。
网页底部角落的订阅铃铛小部件

订阅铃铛提示小部件

您可以自定义 OneSignal 铃铛提示的颜色、尺寸、底部位置、文本等。
您目前无法更改图标图像或将铃铛放置在顶部角落。
导航到:设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 订阅铃铛提示您可以自定义铃铛的:
  • 颜色
  • 尺寸
  • 底部位置(左侧或右侧)
  • 文本和标签
设置后,点击 完成,然后点击 保存 以应用更改。
仪表板中的订阅铃铛配置

仪表板中的订阅铃铛设置

在您的 Web SDK 初始化选项中使用 notifyButton 参数。您可以在不同的铃铛提示自定义示例之间切换。隐藏: 要在用户订阅后隐藏订阅铃铛或仅在特定页面上显示,请确保在初始化期间在 displayPredicate 函数中返回值 false 解析为值 falsePromise。此函数在显示订阅铃铛之前进行评估。您可以返回任何其他值来显示订阅铃铛。

自定义链接提示

自定义链接提示是一个用户触发的按钮或链接,您可以将其嵌入到网站的任何地方。点击时,它会显示推送通知的原生浏览器提示
带有订阅按钮和说明文本的自定义链接提示

自定义链接提示示例

常见用例:
  • 在博客文章下方:“喜欢这篇文章吗?在我们发布新内容时立即获取更新!”
  • 在您的网站页脚中
  • 在粘性标题或浮动工具栏中
导航到:设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 自定义链接在您想要小部件显示的页面上添加提供的 HTML。配置您的选项,然后点击 完成保存 来激活。
仪表板中的自定义链接提示设置

仪表板中的自定义链接设置

在您的 OneSignal init 代码的 promptOptions 对象中,添加 customlink 对象及其可用属性。
要在您的网站上显示提示,请在您希望小部件出现的位置插入以下 HTML:
html
要随时更改小部件的外观,所有元素都有一个特殊的类 onesignal-reset,它会从元素中删除任何先前的样式,以确保与我们的内部样式没有冲突,并且看起来完全符合您在仪表板中的定义。如果您发现需要重新定义任何 OneSignal 样式,以下是自定义链接小部件中使用的类的简短参考要覆盖其中任何一个,您必须创建具有更高特异性的 CSS 规则,将类名与父元素 id 结合应该就足够了。但请注意冲突,我们的内部样式可能会发生变化。

原生权限提示

原生权限提示是由浏览器控制的对话框,用户必须接受它才能订阅您网站的推送通知。此提示:
  • 订阅所必需
  • 在 OneSignal 软提示后自动触发
  • 外观、文本或行为不可自定义
Chrome 上的原生浏览器权限提示

Chrome 上的原生权限提示

浏览器原生提示行为

不同的浏览器施加独特的行为和限制以减少垃圾权限请求。为了对抗垃圾信息和不良用户体验,OneSignal 将在以下列出的某些情况下自动默认使用滑动提示。 如果您不想显示滑动提示并希望直接使用原生权限提示,您必须关闭自动提示选项并使用我们的 Web SDK requestPermission() 方法 如下所述,直接显示原生权限提示可能无法在所有浏览器中正常工作。

Chrome

Chrome 80+ 可能会显示更安静的 UI 而不是完整的提示:
  • 自动应用于经常拒绝提示的用户
  • 也适用于拒绝率高的网站
Chrome 更安静的通知权限 UI

Chrome 桌面版上的更安静通知 UI

如果用户在原生提示上点击”X”,Chrome 会实施退让逻辑:
  • 您有 3 次提示机会
  • 在第 3 次关闭后,提示将被抑制 7 天(来源)。
使用典型网站和 WordPress 设置来配置原生权限提示将在 Chrome 移动设备上自动显示滑动提示。我们故意在 Android 上添加了双重提示,因为 Android 版 Chrome 的原生权限提示是一个非常不友好的弹窗,会占据您网站的整个屏幕,这可以防止您的用户在访问您的网站时有不好的体验。如果您不想显示滑动提示,您必须在提示编辑器中关闭自动提示开关(别忘了按保存按钮),然后使用 Web SDK requestPermission() 方法

Firefox

Firefox 72+ 开始要求用户手势来触发原生权限提示。如果您尝试在 Firefox 上自动显示原生权限提示,您将在浏览器中看到如下图标,要求用户点击该图标以显示原生权限提示。
Firefox 地址栏中的通知权限图标

Firefox 通知权限图标

使用典型网站和 WordPress 设置来配置原生权限提示将在 Firefox 上自动显示滑动提示。我们故意在 Firefox 上添加了双重提示,因为在任何一种情况下都需要 2 步选择加入,而滑动提示是一种更引人注目的方式来提高参与度。如果您不想显示滑动提示,您必须在提示编辑器中关闭自动提示开关(别忘了按保存按钮),然后使用 Web SDK requestPermission() 方法

Safari

Safari 12.1+ 开始要求用户手势来触发原生权限提示。
使用典型网站和 WordPress 设置来配置原生权限提示在 Safari 上将无法工作,因为存在此用户手势要求。我们故意在 Safari 上添加了滑动提示,因为它需要 2 步选择加入。

Edge

Edge 使用基于信任的模型:
  • 如果网站不可信,提示将被抑制并由浏览器栏中的铃铛图标替代:
Edge 为不可信网站显示的铃铛图标

Edge 中为不可信网站显示的铃铛图标

  • 如果网站可信,原生提示正常出现:
Edge 为可信网站显示的原生权限提示

Edge 中可信网站的原生提示


自动提示和显示设置

为了最大化参与度并避免干扰您的用户,最好在他们在您的网站上花费一些时间后再显示提示。OneSignal 允许您使用两个延迟条件根据用户行为自动显示提示:
  • 页面浏览次数: 用户在您网站上加载任何页面的次数
  • 页面停留秒数: 用户在页面上必须花费的时间量
这些延迟使用 AND 条件应用,意味着在提示出现之前必须满足两个条件。 示例: 如果您将延迟设置为 3 次页面浏览和 30 秒,则提示将在第三次页面加载时、经过 30 秒后显示。如果用户没有与提示交互,它将继续在每次页面加载(30 秒后)时显示,直到被点击或被关闭。
  • 导航到:设置 > 推送和应用内 > 网页设置 > 权限提示设置
  • 选择提示或创建新的提示
  • 启用自动提示
  • 设置您的延迟首选项(页面浏览次数和时间延迟)
页面浏览次数和秒数的自动提示延迟设置

自动提示延迟设置

  • 点击完成,然后保存
如果您想要以编程方式触发提示,请保持自动提示禁用状态并使用 Web SDK 提示方法
在您的 OneSignal init 代码的 promptOptions 对象中使用 autoPromptdelay 选项。还有一些方法可以直接触发所需的滑动或原生提示。有关更多详细信息,请参阅 Web SDK 参考
如果您想要对提示显示时机有更多控制——例如,仅在特定页面上或在特定操作后显示:
  1. 禁用自动提示
  2. 使用 SDK 的滑动或原生提示方法通过代码显示提示

滑动提示退让逻辑

一旦显示滑动提示(推送、类别或邮箱/电话)并被关闭(通过允许、取消或关闭对话框),它将退让并按定义的时间表重新出现: 例如,如果用户在滑动提示上点击”允许”但随后在浏览器的原生提示上点击”X”(未订阅),滑动提示将遵循上述退让周期。
此逻辑适用于推送、类别和邮箱/电话滑动提示。您可以使用我们的 Web SDK 滑动提示方法绕过退让逻辑。有关原生提示退让逻辑,请参阅浏览器原生提示行为。您无法绕过原生提示的退让逻辑,因为这由浏览器控制。
如果用户清除 Cookie 或浏览器数据,退让周期将重置,提示可能会像第一次一样再次出现。

请求网页推送权限的最佳实践

获得用户授予网页推送权限需要时机、信任和用户友好的设计。遵循这些最佳实践来最大化选择加入率,同时保持积极的网站体验。

在何时询问方面要有策略

时机比频率更重要。在用户已经参与或显示意图时显示权限提示。例如:
  • 在他们将商品添加到购物车或参与帖子或评论后
  • 当他们更新个人资料或登录账户时
  • 在完成显示对您品牌承诺的操作时
在这些时刻提示用户会提高接受率,因为他们对您的内容和价值更加投入。 如果您的网站有个人资料或偏好中心,请在那里包含推送(和其他渠道)选择加入控制。这增强了透明度,并让用户更好地控制他们如何接收更新。请参阅我们的偏好中心指南以获取更多详细信息。

使用订阅铃铛提示

铃铛提示是用户随时订阅的持久性、非侵入性方式。这个浮动铃铛图标非常适合长期参与,因为它:
  • 保持订阅选项可见而不中断浏览。
  • 允许用户选择何时订阅。
  • 通过不强制立即请求权限来建立信任。
铃铛提示对于回访访客和最初关闭权限请求的用户特别有效。

让用户使用类别个性化他们的订阅

类别提示让用户选择他们想要的主题或消息类型——如”促销”、“产品更新”或”博客文章”。这种方法:
  • 使提示感觉不那么侵入性和更相关
  • 提高参与度和消息点击率
  • 通过提前设定期望来减少后续退订
个性化选择加入可以提高长期保留率,因为用户感觉可以控制体验。

随时间测试和优化

不要依赖单一策略。测试不同的提示类型、消息和时机,以查看什么内容能与您的受众产生共鸣。 尝试这种方法:
选择加入行为可能因季节、设备类型和地区而异——因此请定期测试以找到参与度和用户舒适度之间的正确平衡。

常见问题

提示显示问题

如果以下任何条件为真,浏览器的原生权限提示可能不会显示: 1. 浏览器阻止了提示显示。 导航到浏览器的设置并检查”通知”权限设置。Chrome 示例:chrome://settings/content/notifications
Chrome 浏览器通知权限设置页面

Chrome 通知设置

在此示例中:
  • 用户选择了”不允许网站发送通知”,这将阻止显示原生权限提示。这必须显示”网站可以要求发送通知”才能允许显示原生权限提示。
  • 用户已将 https://yoursite.com 添加到”不允许发送通知”列表中,这将阻止显示原生权限提示。必须从列表中删除才能允许显示原生权限提示。
特定浏览器文档:
  • Chrome - 此页面说明如何在 Chrome 中管理通知,方法是转到设置 > 隐私和安全 > 网站设置 > 通知,您可以在其中控制默认行为并管理各个网站的权限。
  • Firefox - 本指南介绍了 Firefox 的 Web 推送通知,说明如何通过设置 > 隐私和安全 > 通知管理通知权限,以及如何通过地址栏的网站信息图标控制特定网站的权限。
  • Safari - 此 Apple 指南说明如何通过 Safari > 偏好设置 > 网站 > 通知在 Mac 上自定义 Safari 通知,您可以在其中管理哪些网站可以发送通知,并通过系统偏好设置控制通知行为。
  • Edge - 本文详细说明了如何通过导航到设置 > 隐私、搜索和服务 > 网站权限 > 通知来管理 Edge 通知,或通过单击地址栏中的网站信息图标。
2. 用户已经允许通知或已经订阅。 在浏览器的设置中,检查您的网站 URL 是否列在”允许发送通知”列表中。 3. 您处于隐身模式、私人浏览模式或访客浏览模式。 在隐身模式、私人浏览模式或访客浏览模式下,原生权限提示不会显示。用户无法在这些模式下订阅通知。 4. 您使用的浏览器和设备不支持网页推送通知。 确保您使用支持网页推送的浏览器和设备 5. 未满足 iOS/iPadOS 要求。 对于 iOS,提示用户订阅有一些额外要求。更多信息可以在 iOS/iPadOS 移动网页推送指南中查看。
如果您仍然遇到问题,请参阅我们的网页推送故障排除指南

如何在社交媒体应用的 Webview 中显示提示?

社交媒体应用(Instagram、TikTok、Facebook 等)使用的 Webview 不支持网页推送通知。该应用必须在支持网页推送的完整浏览器中打开您的网站。

为什么滑动提示一直显示?

有两个常见原因:
  1. 您处于隐身模式、私人浏览模式或访客浏览模式。
  2. 您在不使用自动提示选项的情况下以编程方式触发提示。请参阅 Web SDK 参考并检查您使用的提示方法。

关闭提示后,它何时再次显示?

对于 OneSignal 提示,请参阅滑动提示退让逻辑。对于原生权限提示,请参阅浏览器原生提示行为

为什么我看到滑动提示而不是原生浏览器提示?

某些浏览器在显示原生提示之前需要用户手势。在这些情况下,OneSignal 会自动先显示滑动提示。详情请参阅浏览器原生提示行为

如何翻译或本地化提示?

使用自定义代码设置以编程方式检测用户的浏览器语言,并使用不同的文本初始化 OneSignal SDK。原生权限提示会自动翻译为浏览器设置的语言。

我可以对提示进行 A/B 测试吗?

可以。使用自定义代码设置,您可以使用不同的提示选项初始化 OneSignal。您需要设置自己的方法来触发 A/B 测试。使用订阅更改事件检测用户何时订阅,并根据哪个变体胜出来添加标签

我可以根据他们订阅的页面对订阅进行细分吗?

可以。参见按订阅页面自动细分指南。

我可以更改铃铛图标吗?

不可以。您无法更改铃铛图像,但可以自定义颜色、文本和位置(左下方或右下方)。

为什么我的无障碍审计会标记订阅铃铛?

当前版本的 Web SDK 为铃铛按钮提供了默认的无障碍名称 “Manage notifications”,因此它可以通过 Lighthouse、PageSpeed Insights 和 axe 使用的”按钮必须具有可识别文本”检查。要更改或本地化该标签,请使用自定义代码设置notifyButton.text 中设置 launcher.button.aria-label 键。

我可以根据页面更改类别吗?

可以,有两种方式。要在不同页面上显示不同的类别复选框,请使用自定义代码设置并按页面配置 categories promptOptions。要在读者浏览时自动应用 cat_<category> 标签(不显示提示),请参见按页面主题为用户打标签——自动打标签模式使用与类别提示相同的标签命名空间,因此这两种方法可以完美结合。

如何跟踪滑动提示事件?

OneSignal Web SDK 提供滑动提示事件方法来检测提示何时显示、何时关闭以及收到”允许”或”取消”操作。

我如何只在特定页面上显示提示?

禁用自动提示,然后在您希望显示提示的特定页面上使用滑动提示 SDK 方法。铃铛提示无法按页面禁用。

为什么我在移动设备上看到滑动提示而不是原生提示?

Android 版 Chrome 会显示一个占据整个屏幕的原生提示,干扰浏览体验。OneSignal 会先显示滑动提示以提供更好的用户体验。要绕过此行为,请在提示编辑器中关闭自动提示,并使用 Web SDK requestPermission() 方法

相关页面

Web SDK 参考

提示方法、事件和初始化选项的完整 API 参考。

iOS Web 推送

iOS 和 iPadOS Web 推送支持所需的额外设置步骤。

Web 推送故障排除

诊断和解决常见的 Web 推送通知问题。

偏好中心

让用户管理他们的通知偏好和渠道选择加入。