网页权限提示

概述

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

OneSignal 提示（软提示）

OneSignal 软提示是用户友好的可自定义提示，在浏览器的原生权限对话框之前显示。这些提示本身不会为用户订阅通知，但它们有助于：

解释订阅通知（推送、邮件或短信）的价值。
防止浏览器自动阻止权限请求。
只有在用户表示兴趣后才启动原生浏览器提示。

软提示是浏览器推荐的，有助于最大化选择加入率，同时保护您的域名声誉。

提示图标

要自定义网页推送通知中显示的图标，请前往您的 OneSignal 仪表板：设置 > 推送和应用内 > 网页设置。在 网站设置 部分，配置 默认图标 URL。除非另有指定，否则此图标会出现在您的所有通知中。

接受的格式：.png 或 .jpg
建议尺寸：256x256 像素（以满足 Safari 的要求）
如果未设置，OneSignal 将使用通用铃铛图标

此设置可以随时更改。

图片显示了您的网站推送设置中的网站设置部分。这是您配置网站名称、网站 URL 和默认图标的地方。

权限提示设置

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

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

每种提示类型都有不同的用例和显示行为。您可以单独使用它们或组合使用，以适合您网站用户体验的方式引导用户完成订阅过程。可用的提示包括：

滑动提示：用于推送通知和可选类别选择的视觉突出提示。
邮箱/电话提示：用于收集用户邮箱地址、电话号码或两者。
订阅铃铛提示：用于推送订阅的持续浮动小部件，通常放置在网站的底部角落。
自定义链接提示：嵌入在您网站中的可自定义按钮或链接，触发原生浏览器提示。
原生权限提示：用户必须接受的浏览器级提示，才能接收推送通知。

滑动提示与类别

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

显示带有类别标签的滑动提示的示例。

要添加滑动提示：

前往 设置 > 推送和应用内 > 网页设置 > 权限提示设置
选择 添加提示 > 推送提示 > 推送滑动提示

对于自定义代码设置，在您的 OneSignal init 代码的 promptOptions 对象中使用 slidedown 属性。详情请参阅 Web SDK 参考。

推送滑动提示选项。

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

滑动提示文本

您可以自定义滑动提示中显示的文本：

操作消息：最多 90 个字符
按钮标签：每个最多 15 个字符
目前不支持字体、尺寸或颜色的自定义

在仪表板中启用文本自定义选项。如果没有输入文本，将使用默认文本。

滑动提示文本选项。

完成后，点击完成，然后在下一页再次点击保存以使其生效。

对于自定义代码设置，在您的 OneSignal init 代码的 promptOptions 对象中使用 text 属性。详情请参阅 Web SDK 参考。

类别

您可以通过添加类别来增强滑动提示——让用户指示对特定消息主题（例如，新闻、销售、更新）兴趣的复选框。

最多允许 10 个类别
每个类别存储为数据标签，值为 1（已选中）或 0（未选中）
用于根据用户偏好进行用户群分组和目标消息推送

您可以在后期再次显示类别提示，让用户更新其偏好。除非被覆盖，否则之前选择的值将被保留。

标签：用户在提示中看到的内容。建议首字母大写。
标签键：OneSignal 中的标签名称。建议使用小写字母和下划线（_）替代空格。
更新说明、正向和负向按钮：如果您选择在用户已经订阅推送后再次显示类别提示，则将显示更新说明而不是操作消息。这允许您通知用户他们可以更新其类别。

类别示例。标签是用户看到的内容，而标签键是在 OneSignal 中设置为标签键的内容，值为 '1'。

完成后，点击完成，然后在下一页再次点击保存以使其生效。

对于自定义代码设置，在您的 OneSignal init 代码的 promptOptions 对象中使用 categories 属性。详情请参阅 Web SDK 参考。

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

邮箱和电话号码提示

邮箱和电话提示直接在滑动提示中收集可选的用户联系信息。每个字段都具有内置验证以确保正确的格式。提交后：

为用户创建新的邮件和/或短信订阅
您可以开始通过这些渠道向他们发送消息

要添加此提示：

导航到 设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 邮箱/电话提示。

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

自定义显示哪些输入字段、文本标签和自动提示延迟。

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

完成后，按完成，然后在下一页再次保存以使其生效。

对于自定义代码设置，在您的 OneSignal init 代码的 promptOptions 对象中将 type 添加为 email、sms 或 smsAndEmail。详情请参阅 Web SDK 参考。

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

订阅铃铛提示

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

订阅铃铛提示

您可以自定义 OneSignal 铃铛提示的颜色、尺寸、底部位置、文本等！🛑 您目前无法更改图标图像或将铃铛放置在顶部角落。

典型网站和 WordPress 设置：订阅铃铛提示

导航到：设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 订阅铃铛提示您可以自定义铃铛的：

颜色
尺寸
底部位置（左侧或右侧）
文本和标签

设置后，点击完成，然后点击保存以应用更改。

仪表板中的订阅铃铛设置

自定义代码设置：订阅铃铛提示

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

// 您的其他初始化选项在这里
notifyButton: {
    enable: true, /* 使用订阅铃铛所必需的 */
    size: 'medium', /* 'small'、'medium' 或 'large' 中的一个 */
    theme: 'default', /* 'default'（红-白）或 'inverse'（白-红）中的一个 */
    position: 'bottom-right', /* 'bottom-left' 或 'bottom-right' */
    offset: {
        bottom: '0px',
        left: '0px', /* 仅在 bottom-left 时应用 */
        right: '0px' /* 仅在 bottom-right 时应用 */
    },
    showCredit: false, /* 隐藏 OneSignal 徽标 */
    text: {
        'tip.state.unsubscribed': '订阅通知',
        'tip.state.subscribed': "您已订阅通知",
        'tip.state.blocked': "您已阻止通知",
        'message.prenotify': '点击订阅通知',
        'message.action.subscribed': "感谢订阅！",
        'message.action.resubscribed': "您已订阅通知",
        'message.action.unsubscribed': "您将不会再次收到通知",
        'dialog.main.title': '管理网站通知',
        'dialog.main.button.subscribe': '订阅',
        'dialog.main.button.unsubscribe': '取消订阅',
        'dialog.blocked.title': '解除阻止通知',
        'dialog.blocked.message': "按照以下说明允许通知："
    }
}

自定义链接提示

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

自定义链接提示

常见用例：

在博客文章下方：“喜欢这篇文章吗？在我们发布新内容时立即获取更新！”
在您的网站页脚中
在粘性标题或浮动工具栏中

典型网站和 WordPress 设置：自定义链接提示

导航到：设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 自定义链接。在您想要小部件显示的页面上添加提供的 HTML。配置您的选项，然后点击完成和保存来激活。

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

自定义代码设置：自定义链接

在您的 OneSignal init 代码的 promptOptions 对象中，添加 customlink 对象及其可用属性。

// 您的其他初始化选项在这里
promptOptions: {
  customlink: {
    enabled: true, /* 使用自定义链接所必需的 */
    style: "button", /* 值为 'button' 或 'link' */
    size: "medium", /* 'small'、'medium' 或 'large' 中的一个 */
    color: {
      button: '#E12D30', /* 如果 style = "button"，按钮背景的颜色 */
      text: '#FFFFFF', /* 提示文本的颜色 */
    },
    text: {
      subscribe: "订阅推送通知", /* 未订阅时提示的文本 */
      unsubscribe: "取消订阅推送通知", /* 已订阅时提示的文本 */
      explanation: "获取对您重要的各种内容的更新", /* 提示按钮前显示的可选文本 */
    },
    unsubscribeEnabled: true, /* 控制提示在订阅后是否可见 */
  }
}

要在您的网站上显示提示，请在您希望小部件出现的位置插入以下 HTML：

html

<div class='onesignal-customlink-container'></div>

典型和自定义代码设置：附加样式

要随时更改小部件的外观，所有元素都有一个特殊的类 onesignal-reset，它会从元素中删除任何先前的样式，以确保与我们的内部样式没有冲突，并且看起来完全符合您在仪表板中的定义。如果您发现需要重新定义任何 OneSignal 样式，以下是自定义链接小部件中使用的类的简短参考

类名	应用于
onesignal-customlink-container	主容器
onesignal-customlink-subscribe	操作按钮
onesignal-customlink-explanation	带有自定义说明文本的段落
state-subscribed	主容器内的所有组件
state-unsubscribed	主容器内的所有组件
button	如果处于按钮模式，则为操作按钮
link	如果处于链接模式，则为操作按钮
small	主容器内的所有组件
medium	主容器内的所有组件
large	主容器内的所有组件
hide	如果 unsubscribeEnabled 设置为 false，则为主容器内的所有组件

要覆盖其中任何一个，您必须创建具有更高特异性的 CSS 规则，将类名与父元素 id 结合应该就足够了。但请注意冲突，我们的内部样式可能会发生变化。

原生权限提示

原生权限提示是由浏览器控制的对话框，用户必须接受它才能订阅您网站的推送通知。此提示：

订阅所需
在 OneSignal 软提示（如滑动提示或自定义链接）后自动触发
外观、文本或行为不可自定义

原生权限提示

浏览器原生提示行为

不同的浏览器施加独特的行为和限制以减少垃圾权限请求：

Chrome

Chrome 80+ may display a quieter UI instead of the full prompt:

自动应用于经常拒绝提示的用户
也适用于拒绝率高的网站

如果用户在原生提示上点击“X”，Chrome 会实施退让逻辑：

You have 3 attempts to prompt
After the 3rd dismissal, the prompt is suppressed for 7 days (source).

Firefox

Firefox 72+ requires a user gesture to trigger the prompt
Auto-prompts are blocked, and users must actively interact with a site element

Safari

Safari 12.1+ prompts require a user gesture
Auto-prompting is silently blocked unless triggered by a direct interaction

Edge

Edge uses a trust-based model:

如果网站不可信，提示将被抑制并由浏览器栏中的铃铛图标替代：

在 Edge 中为不熟悉或不可信的网站显示的铃铛图标。

如果网站可信，原生提示正常出现：

在 Edge 中，原生提示直接在可信网站上显示。

自动提示和显示设置

为了最大化参与度并避免干扰您的用户，最好在他们在您的网站上花费一些时间后再延迟显示提示。OneSignal 允许您使用两个延迟条件根据用户行为自动显示提示：

页面浏览次数： 用户在您网站上加载任何页面的次数
页面停留秒数： 用户在页面上必须花费的时间量

这些延迟使用 AND 条件应用，意味着在提示出现之前必须满足两个条件。 示例： 如果您将延迟设置为 3 次页面浏览和 30 秒，则提示将在第三次页面加载后 30 秒后显示。如果用户没有与提示交互，它将继续在每次页面加载（在 30 秒后）上显示，直到被点击或被解除。

典型网站和 WordPress 设置：自动提示

导航到：设置 > 推送和应用内 > 网页设置 > 权限提示设置
选择提示或创建新的提示
启用自动提示
设置您的延迟首选项（页面浏览次数和时间延迟）

示例：此提示设置为在第三次页面浏览后 30 秒显示。

点击完成，然后保存

如果您想要编程式触发提示，请保持自动提示禁用状态并使用 Web SDK 提示方法。

自定义代码设置：自动提示

在您的 OneSignal init 代码的 promptOptions 对象中使用 autoPrompt 和 delay 选项。还有一些方法可以直接触发所需的滑动或原生提示。有关更多详细信息，请参阅 Web SDK 参考。

手动触发（代替自动提示）

如果您想要对提示显示时机有更多控制——例如，仅在特定页面上或在特定操作后显示：

禁用自动提示
使用 SDK 的滑动或原生提示方法通过代码显示提示

滑动提示退让逻辑

一旦显示滑动提示（推送、类别或邮箱/电话）并被解除（通过允许、取消或关闭对话框），它将退让并按定义的时间表重新出现：

交互结果	下次提示时机
第一次解除	等待 3 天
第二次解除	等待 7 天
第三次及后续解除（未订阅）	等待 30 天

例如，如果用户在滑动提示上点击”允许”但随后在浏览器的原生提示上点击”X”（未订阅），滑动提示将遵循上述退让周期。

此逻辑适用于推送、类别和邮箱/电话滑动提示。您可以使用我们的 Web SDK 滑动提示方法绕过退让逻辑。有关原生提示退让逻辑，请参阅浏览器原生提示行为。您无法绕过原生提示的退让逻辑，因为这由浏览器控制。

如果用户清除 Cookie 或浏览器数据，退让周期将重置，提示可能会像第一次一样再次出现。

常见问题

如何翻译/本地化提示？

目前您需要选择自定义代码设置。然后通过检测用户浏览器语言并使用不同文本初始化 OneSignal SDK 来编程式地更改提示的语言。原生权限提示将自动翻译为浏览器设置的语言。

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

使用自定义代码设置，您可以使用不同的提示选项初始化 OneSignal。您需要设置自己的方式来触发初始化 OneSignal 的 A/B/C/D 等测试。作为额外的好处，您可以使用订阅更改方法来检测用户何时订阅，并根据哪个测试赢得了订阅来添加数据标签。

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

可以！请参阅我们的指南按订阅页面自动分段。

我可以更改铃铛图标吗？

您无法更改铃铛图像，但您可以更改颜色、文本并将其放置在页面的左下方或右下方。

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

可以！这需要使用自定义代码设置并根据上述设置配置通过代码添加类别。

如何跟踪滑动提示事件？

OneSignal Web SDK 具有滑动提示事件方法来检测它何时在屏幕上显示、何时关闭以及“允许”或“取消”操作。

在关闭网页推送提示后，提示何时再次显示？

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

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

您必须禁用自动提示选项，然后将滑动提示代码添加到您希望显示提示的特定页面。如果您使用铃铛提示，目前无法按页面逐个禁用它。

为什么当我想要原生浏览器提示时，在 Firefox 上看到滑动提示？

在 Firefox 72+ 中有一个更改，要求用户点击按钮才能显示原生浏览器提示。如果您尝试自动显示原生浏览器提示，您将在浏览器中看到这样的图标：

Firefox 图标

用户必须点击此图标才能在 Firefox 上查看原生权限提示。这就是为什么我们在 Firefox 上默认使用滑动提示，因为无论哪种情况都需要两步选加入。如果您不希望默认显示滑动提示，您必须在提示编辑器中关闭自动提示开关（别忘了按保存按钮），然后使用 Web SDK requestPermission() 方法。

为什么当我想要原生权限提示时，在移动设备上看到滑动提示？

在2017年12月5日，Google 更改了 Android 版 Chrome 上原生权限提示的外观。它是一个非常不用户友好的弹窗，会占据您网站的整个屏幕。我们故意在 Android 上添加了双重提示，以防止您的用户在您的网站上有不好的体验。如果您不希望显示滑动提示，您必须在提示编辑器中关闭自动提示开关（别忘了按保存按钮），然后使用 Web SDK requestPermission() 方法。

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

请确保您不在隐身模式、私人浏览模式或访客浏览模式中。

为什么我的提示不显示？

如果以下条件之一为真，浏览器的原生权限提示可能不会显示：

浏览器阻止了提示的显示。
用户已经允许通知或已经订阅
用户阻止了通知。如果用户点击“阻止”（Chrome）、“不允许”（Safari）或“从不允许”（Firefox），他们就无法再次被提示，必须通过浏览器设置中的多步骤流程进行订阅。这就是为什么建议使用 OneSignal 提示。
自动提示已关闭且没有调用 requestPermission();
原生权限提示在隐身模式、私人浏览模式或访客浏览模式下不会显示。在 Safari 12.1+ 或 Firefox 72+ 上也不会立即显示（更多详情）。
请确保您使用支持网页推送的浏览器和设备。

检查您的提示设置，确保自动提示已开启，或您正在使用我们的 Web SDK 来提示用户。对于 iOS，提示用户订阅有一些额外要求。更多信息可以在 iOS/iPadOS 移动网页推送指南中查看。最后是按照这些步骤重置您的 Cookie 和浏览器缓存，像首次访问者一样访问您的网站。

开始使用和设置

消息渠道

旅程

受众和自定义事件

分析和集成

隐私和安全

网页权限提示

概述

OneSignal 提示（软提示）

提示图标

权限提示设置

滑动提示与类别

滑动提示文本

类别

邮箱和电话号码提示

订阅铃铛提示

自定义链接提示

原生权限提示

浏览器原生提示行为

Chrome

Firefox

Safari

Edge

自动提示和显示设置

滑动提示退让逻辑

常见问题

开始使用和设置

消息渠道

旅程

受众和自定义事件

分析和集成

隐私和安全

​概述

​OneSignal 提示（软提示）

​提示图标

​权限提示设置

​滑动提示与类别

​滑动提示文本

​类别

​邮箱和电话号码提示

​订阅铃铛提示

​自定义链接提示

​原生权限提示

​浏览器原生提示行为

​Chrome

​Firefox

​Safari

​Edge

​自动提示和显示设置

​滑动提示退让逻辑

​常见问题

概述

OneSignal 提示（软提示）

提示图标

权限提示设置

滑动提示与类别

滑动提示文本

类别

邮箱和电话号码提示

订阅铃铛提示

自定义链接提示

原生权限提示

浏览器原生提示行为

Chrome

Firefox

Safari

Edge

自动提示和显示设置

滑动提示退让逻辑

常见问题