跳转到主要内容


概述

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

OneSignal 提示(软提示)

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

提示图标

要自定义网页推送通知中显示的图标,请前往您的 OneSignal 仪表板:设置 > 推送和应用内 > 网页设置 网站设置 部分,配置 默认图标 URL。除非另有指定,否则此图标会出现在您的所有通知中。
  • 接受的格式:.png.jpg
  • 建议尺寸:256x256 像素(以满足 Safari 的要求)
  • 如果未设置,OneSignal 将使用通用铃铛图标
此设置可以随时更改。

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


权限提示设置

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

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

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

滑动提示与类别

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

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

要添加滑动提示:
  1. 前往 设置 > 推送和应用内 > 网页设置 > 权限提示设置
  2. 选择 添加提示 > 推送提示 > 推送滑动提示
对于自定义代码设置,在您的 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 添加为 emailsmssmsAndEmail。详情请参阅 Web SDK 参考
有关触发提示的详细信息,请参阅自动提示和显示设置

订阅铃铛提示

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

订阅铃铛提示

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

仪表板中的订阅铃铛设置

在您的 Web SDK 初始化选项中使用 notifyButton 参数。您可以在不同的铃铛提示自定义示例之间切换。隐藏: 要在用户订阅后隐藏订阅铃铛或仅在特定页面上显示,请确保在初始化期间在 displayPredicate 函数中返回值 false 解析为值 falsePromise。此函数在显示订阅铃铛之前进行评估。您可以返回任何其他值来显示订阅铃铛。
// 您的其他初始化选项在这里
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': "按照以下说明允许通知:"
    }
}

自定义链接提示

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

自定义链接提示

常见用例:
  • 在博客文章下方:“喜欢这篇文章吗?在我们发布新内容时立即获取更新!”
  • 在您的网站页脚中
  • 在粘性标题或浮动工具栏中
导航到:设置 > 推送和应用内 > 网页设置 > 权限提示设置 > 添加提示 > 自定义链接在您想要小部件显示的页面上添加提供的 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上的原生权限提示

浏览器原生提示行为

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

Chrome

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

Chrome 桌面版上更安静 UI 的示例。

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

Firefox

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

Firefox 图标

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

Safari

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

Edge

Edge uses a trust-based model:
  • 如果网站不可信,提示将被抑制并由浏览器栏中的铃铛图标替代:

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

  • 如果网站可信,原生提示正常出现:

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


自动提示和显示设置

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

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

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

滑动提示退让逻辑

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

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

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

在何时询问方面要有策略

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

使用订阅铃铛提示

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

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

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

随时间测试和优化

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

常见问题和故障排除

提示显示问题

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

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 移动网页推送指南中查看。
如果您仍然遇到问题,请参阅我们的网页推送故障排除指南

常见问题

如果您尝试通过社交媒体应用(Instagram、TikTok、Facebook 等)查看您的网站,如果它使用 Webview,您可能看不到网页提示。Webview 不支持网页推送通知。该应用必须在支持网页推送通知的浏览器中打开您的网站。
滑动提示一直显示通常有 2 个原因:
  1. 您处于隐身模式、私人浏览模式或访客浏览模式。
  2. 您在不使用自动提示选项的情况下以编程方式触发提示。请参阅 Web SDK 参考并检查您使用的提示方法。
对于 OneSignal 提示,请参阅滑动提示退让逻辑对于原生权限提示,请参阅浏览器原生提示行为
查看上面的浏览器原生提示行为部分以获取更多详细信息。

自定义

目前您需要选择自定义代码设置。然后通过检测用户浏览器语言并使用不同文本初始化 OneSignal SDK 来编程式地更改提示的语言。原生权限提示将自动翻译为浏览器设置的语言。
使用自定义代码设置,您可以使用不同的提示选项初始化 OneSignal。您需要设置自己的方式来触发初始化 OneSignal 的 A/B/C/D 等测试。作为额外的好处,您可以使用订阅更改方法来检测用户何时订阅,并根据哪个测试赢得了订阅来添加数据标签
可以!请参阅我们的指南按订阅页面自动分段
您无法更改铃铛图像,但您可以更改颜色、文本并将其放置在页面的左下方或右下方。
可以!这需要使用自定义代码设置并根据上述设置配置通过代码添加类别。
OneSignal Web SDK 具有滑动提示事件方法来检测它何时在屏幕上显示、何时关闭以及”允许”或”取消”操作。
您必须禁用自动提示选项,然后将滑动提示代码添加到您希望显示提示的特定页面。如果您使用铃铛提示,目前无法按页面逐个禁用它。
在2017年12月5日,Google 更改了 Android 版 Chrome 上原生权限提示的外观。它是一个非常不用户友好的弹窗,会占据您网站的整个屏幕。我们故意在 Android 上添加了双重提示,以防止您的用户在您的网站上有不好的体验。如果您不希望显示滑动提示,您必须在提示编辑器中关闭自动提示开关(别忘了按保存按钮),然后使用 Web SDK requestPermission() 方法