Web permission prompts

Learn how to use OneSignal’s web push permission prompts to increase push notification opt-ins. Covers soft prompts, native browser prompts, slidedown prompts, category setup, email and phone number collection, and subscription bell customization.

---

---

Overview

“Prompting” refers to the process of asking users for permission to send them push notifications. Prompts are pop-up messages presented by the browser or mobile app and require the user to click “Allow” to be subscribed and receive push notifications.

Web Push works on Desktop, Android and iOS, but please note that web push for iOS requires some additional steps to configure. If you have a mobile app, see how to prompt for Push Permissions with In-App Messages.

Browsers provide their own native, system-level permission prompt, which is required to be both shown and clicked “Allow” for the user to subscribe to your website. Browsers now highly recommend websites be more selective when it comes to showing the native permission prompt. This is why using OneSignal Prompts or your own custom “soft prompts” before the native prompt is encouraged.

OneSignal prompts (soft prompts)

OneSignal soft prompts are user-friendly, customizable prompts that appear before the browser’s native permission dialog. These prompts do not subscribe users to notifications by themselves; instead, they help:

1. Explain the value of subscribing to notifications (push, email, or SMS).
2. Prevent browsers from automatically blocking permission requests.
3. Launch the native browser prompt only after the user expresses interest.

Soft prompts are recommended by browsers and help maximize opt-in rates while protecting your domain reputation.

---

Prompt icon

To customize the icon shown in your web push notifications, go to your OneSignal dashboard: Settings > Push & In-App > Web Settings.

In the Site Setup section, configure the Default Icon URL. This icon appears in all your notifications unless otherwise specified.

• Accepted formats: .png or .jpg
• Recommended size: 256x256 pixels (to meet Safari’s requirements)
• If left unset, OneSignal will use a generic bell icon

This setting can be changed at any time.

Image shows the Site Setup section of your web push settings. This is where you configure your website name, site URL, and default icon.

---

Permission prompt setup

Configure the prompts you’d like to display on your site to encourage user subscriptions. In your OneSignal dashboard, navigate to: Settings > Push & In-App > Web Settings > Permission Prompt Setup

From there, click Add Prompt to choose from OneSignal’s available prompt types. You can also edit any existing prompts already shown in the list.

Add new prompts or select the prompt you want to edit.

Each prompt type has different use cases and display behaviors. You can use them individually or in combination to guide users through the subscription process in a way that fits your website’s UX.

Available prompts are:

• Slidedown: A visually prominent prompt used for push notifications and optional category selection.
• Email/Phone prompt: Used to collect user email addresses, phone numbers, or both.
• Subscription bell prompt: A persistent floating widget for push subscriptions, typically placed in the bottom corner of your site.
• Custom link prompt: A customizable button or link embedded in your site that triggers the native browser prompt.
• Native permission prompt: The required browser-level prompt that must be accepted for users to receive push notifications.

---

Slidedown & category

The Slide and Category prompts appear prominently at the top center of the screen on desktop and bottom center on mobile. These are high-visibility, soft prompts shown before the required native permission prompt. They do not subscribe the user on their own but help initiate the subscription flow.

Example showing the Slide Prompt with Category Tags.

To add a Slide Prompt:

1. Go to Settings > Push & In-App > Web Settings > Permission Prompt Setup
2. Select Add Prompt > Push Prompt > Push Slide Prompt

For Custom Code setup, within your OneSignal init code’s promptOptions object. Use the slidedown properties. See Web SDK Reference for more details.

The push slide prompt options.

For details on triggering the prompt, see Auto prompt & display settings.

Slide prompt text

You can customize the text displayed in the slide prompt:

• Action message: up to 90 characters
• Button labels: up to 15 characters each
• Customization of font, size, or colors is not currently supported

Enable the text customization option in the dashboard. If no text is entered, default text will be used.

Slide prompt text options.

When finished, click Done and Save again on the next page to see this go into effect.

For Custom Code setup, within your OneSignal init code’s promptOptions object. Use the text properties. See Web SDK Reference for more details.

Categories

You can enhance the Slidedown prompt by adding categories—checkboxes that let users indicate interest in specific message topics (e.g., News, Sales, Updates).

• Up to 10 categories allowed
• Each category is stored as a Data Tag with a 1 (selected) or 0 (not selected)
• Useful for segmentation and targeting messages by user preferences

You may display the category prompt again later to let users update their preferences. Previously selected values will be retained unless overwritten.

• Label: what the user sees in the prompt. Recommended to capitalize the first letter.
• Tag Key: what the tag in OneSignal will be. Recommended to use lower case and underscores (_) for spaces.
• Update Instructions, Positive and Negative Buttons: if you choose to display the category prompt again after the user is already subscribed to push, the update instructions will be shown instead of the action message. This allows you inform the user they can update their categories.

Example categories. The Label is what users see while the tag key is what gets set as a tag key with a value of '1'.

When finished, click Done and Save again on the next page to see this go into effect.

For Custom Code setup, within your OneSignal init code’s promptOptions object. Use the categories properties. See Web SDK Reference for more details.

For details on triggering the prompt, see Auto prompt & display settings.

---

Email & phone number prompt

The Email & Phone Prompt collects optional user contact information directly within a Slidedown. Each field has built-in validation to ensure correct formatting.

Once submitted:

• New Email and/or SMS subscriptions are created for the user
• You can start messaging them across these channels

To add this prompt:

• Navigate to Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Email/Phone Prompt.

Email & Phone Number Prompt Setup

Customize which input fields are shown, the text labels, and the auto-prompt delay.

Email & Phone Number Prompt Setup

When finished, press Done and Save again on the next page to see this go into effect.

For Custom Code setup, within your OneSignal init code’s promptOptions object add the type to be either email, sms, or smsAndEmail. See Web SDK Reference for more details.

For details on triggering the prompt, see Auto prompt & display settings.

---

Subscription bell prompt

The Subscription Bell Prompt is a small, persistent widget that appears in the bottom corner of your website. When clicked by an unsubscribed user, it triggers the Native Browser Prompt.

Because of its minimal footprint, the bell can be left visible at all times, making it a passive yet effective option for ongoing opt-in opportunities. It does not require dismissal and provides users with control over when to subscribe.

Subscription Bell Prompt

You can customize the OneSignal Bell Prompt’s color, size, bottom position, text and more! 🛑 You cannot currently change the icon image or place the bell in the top corners.

Typical Site & WordPress Setup: Subscription Bell Prompt

Navigate to: Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Subscription Bell Prompt

You can customize the bell’s:

• Color
• Size
• Bottom position (left or right)
• Text and labels

After setup, click Done, then Save to apply changes.

Subscription Bell Setup in Dashboard

Custom Code Setup: Subscription Bell Prompt

Use the notifyButton parameter in your web SDK initialization options. You may toggle between different examples for Bell Prompt customizations.

Hiding: To hide the subscription bell after a user subscribes or only show it on certain pages, be sure to return the value false or a Promise that resolves to the value false in the displayPredicate function during initialization. This function is evaluated before the subscription bell is shown. You may return any other value to show the subscription bell.

Text & Basic Options

// Your other init options here
notifyButton: {
    enable: true, /* Required to use the Subscription Bell */
    size: 'medium', /* One of 'small', 'medium', or 'large' */
    theme: 'default', /* One of 'default' (red-white) or 'inverse" (white-red) */
    position: 'bottom-right', /* Either 'bottom-left' or 'bottom-right' */
    offset: {
        bottom: '0px',
        left: '0px', /* Only applied if bottom-left */
        right: '0px' /* Only applied if bottom-right */
    },
    showCredit: false, /* Hide the OneSignal logo */
    text: {
        'tip.state.unsubscribed': 'Subscribe to notifications',
        'tip.state.subscribed': "You're subscribed to notifications",
        'tip.state.blocked': "You've blocked notifications",
        'message.prenotify': 'Click to subscribe to notifications',
        'message.action.subscribed': "Thanks for subscribing!",
        'message.action.resubscribed': "You're subscribed to notifications",
        'message.action.unsubscribed': "You won't receive notifications again",
        'dialog.main.title': 'Manage Site Notifications',
        'dialog.main.button.subscribe': 'SUBSCRIBE',
        'dialog.main.button.unsubscribe': 'UNSUBSCRIBE',
        'dialog.blocked.title': 'Unblock Notifications',
        'dialog.blocked.message': "Follow these instructions to allow notifications:"
    }
}

---

Custom link prompt

The Custom Link Prompt is a user-triggered button or link you can embed anywhere on your website. When clicked, it displays the Native Browser Prompt for push notifications.

Custom Link Prompt

Common use cases:

• Below a blog post: “Like this article? Get updates as soon as we post!”
• In your site footer
• In a sticky header or floating toolbar

Typical Site & WordPress Setup: Custom Link Prompt

Navigate to: Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Custom Link.

Add the provided HTML on your page where you want the widget to render.

Configure your options, then click Done and Save to activate.

Custom Link Setup in Dashboard

Custom Code Setup: Custom Link

Within your OneSignal init code’s promptOptions object, add the customlink object and its available properties.

// Your other init options here
promptOptions: {
  customlink: {
    enabled: true, /* Required to use the Custom Link */
    style: "button", /* Has value of 'button' or 'link' */
    size: "medium", /* One of 'small', 'medium', or 'large' */
    color: {
      button: '#E12D30', /* Color of the button background if style = "button" */
      text: '#FFFFFF', /* Color of the prompt's text */
    },
    text: {
      subscribe: "Subscribe to push notifications", /* Prompt's text when not subscribed */
      unsubscribe: "Unsubscribe from push notifications", /* Prompt's text when subscribed */
      explanation: "Get updates from all sorts of things that matter to you", /* Optional text appearing before the prompt button */
    },
    unsubscribeEnabled: true, /* Controls whether the prompt is visible after subscription */
  }
}

To render the prompt on your site, insert the following HTML where you want the widget to appear:

html

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

Typical & Custom Code Setup: Additional Styling

To change the appearance of the widget at any time all elements have a special class onesignal-reset that removes any prior styling from the element to make sure there are no conflict with our internal styles and that it looks exactly as you’ve defined it in the dashboard.

If you ever find yourself in need to redefine any OneSignal styles, here is a short reference of the classes used in the Custom Link widget

Class Name	Applies to
onesignal-customlink-container	Main container
onesignal-customlink-subscribe	Action button
onesignal-customlink-explanation	Paragraph with a custom explanation text
state-subscribed	All components internal to the main container
state-unsubscribed	All components internal to the main container
button	Action button if in button mode
link	Action button if in link mode
small	All components internal to the main container
medium	All components internal to the main container
large	All components internal to the main container
hide	All components internal to the main container if unsubscribeEnabled is set to false

To override any of them you have to create a CSS rule with higher specificity, combining the class name with the parent element id should be enough. But beware of the conflicts, our internal styles may change.

---

Native permission prompt

The native permission prompt is the browser-controlled dialog that users must accept to subscribe to push notifications from your website. This prompt is:

• Required for subscription
• Automatically triggered after OneSignal soft prompts (like a Slidedown or Custom Link)
• Not customizable in appearance, text, or behavior

Native Permission Prompt

Browser native prompt behavior

Different browsers impose unique behaviors and restrictions to reduce spammy permission requests:

Chrome

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

• Automatically applies to users who frequently deny prompts
• Also applies to sites with a high rate of denials

Chrome implements back-off logic if the user clicks the “X” on the native prompt:

• 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:

• If the site is untrusted, the prompt is suppressed and replaced by a bell icon in the browser bar:

Bell icon shown for unfamiliar or untrusted sites in Edge.

• If the site is trusted, the native prompt appears normally:

Native prompt appears directly for trusted sites in Edge.

---

Auto prompt & display settings

To maximize engagement and avoid disrupting your users, it’s best to delay showing prompts until after they’ve spent some time on your site. OneSignal allows you to automatically display prompts based on user behavior using two delay conditions:

• Page Views: Number of times the user loads any page on your site
• Seconds on Page: Amount of time the user must spend on the page

These delays are applied using an AND condition, meaning both must be satisfied before the prompt appears.

Example: If you set the delay to 3 page views and 30 seconds, the prompt will display on the third page load, after 30 seconds have passed. If the user doesn’t interact with the prompt, it will continue showing on each page load (after 30 seconds) until it’s clicked or dismissed.

Typical Site & WordPress Setup: Auto Prompt

• Navigate to: Settings > Push & In-App > Web Settings > Permission Prompt Setup
• Choose a prompt or create a new one
• Enable Auto Prompt
• Set your delay preferences (page views and time delay)

Example: This prompt is set to appear on the third pageview after 30 seconds.

• Click Done, then Save

If you want to trigger the prompt programmatically, keep Auto Prompt disabled and use the Web SDK Prompt prompt methods.

Custom Code Setup: Auto Prompt

Within your OneSignal init code’s promptOptions object use the autoPrompt and delay options. There are also methods to trigger the desired slidedown or native prompts directly. See Web SDK Reference for more details.

Manual Triggering (Instead of Auto Prompt)

If you want more control over when prompts are shown—for example, only on specific pages or after specific actions:

1. Disable Auto Prompt
2. Use the SDK’s Slidedown or Native Prompt methods to show the prompt via code

Slidedown prompt back-off logic

Once a Slidedown (Push, Category, or Email/Phone) prompt is shown and dismissed (via Allow, Cancel, or closing the dialog), it will back off and reappear on a defined schedule:

Interaction Outcome	Next Prompt Timing
First Dismissal	Wait 3 days
Second Dismissal	Wait 7 days
Third and later dismissals (not subscribed)	Wait 30 days

For example, if the user clicks “Allow” on the Slidedown but then clicks “X” on the browser’s native prompt (without subscribing), the Slidedown will follow the back-off cycle above.

This logic applies to Push, Category, and Email/Phone Slidedown prompts. You can bypass the backoff logic using our Web SDK Slidedown prompt methods.

For native prompt back-off logic, see Browser native prompt behavior. You cannot bypass the backoff logic for the native prompt because this is controlled by the browser.

If the user clears cookies or browser data, the back-off cycle resets and the prompt may appear again as if for the first time.

---

FAQ

How to show the prompts while in a social media app like Facebook or Instagram or TikTok?

If you try to view your website through a Social Media App (Instagram, Facebook, others), you may not see the web prompt if it uses a webview. Webviews do not support web push notifications. The app must open your website in a browser that supports web push notifications.

How to translate/localize the prompt?

Currently you will need to select the Custom Code Setup. Then programmatically change the language of the prompts by detecting the user’s browser language and initialize the OneSignal SDK with different text(s).

The native Permission Prompt will automatically translate to the browser’s set language.

Can I AB Test Prompts?

Using the Custom Code Setup you can initialize OneSignal with the different prompting options. You would need to setup your own way to trigger the A/B/C/D etc tests which initialize OneSignal.

As a bonus, you can use the Subscription Change method to detect when the user subscribed and add Data Tags based on which test won the subscription.

Can I segment subscriptions based on the page they subscribed?

Yes! Please see our guide Auto-Segment By Subscription Page.

Can I change the bell icon?

You cannot change the bell image, but you can change the colors, text and put it on the bottom left of bottom right of the page.

Can I change the categories based on page?

Yes! This will require using the Custom Code Setup and adding the categories through code based on the above setup configurations.

How to track Slide Prompt Events?

The OneSignal Web SDK has the Slide Prompt Event Methods to detect when it shows on the screen, when it is closed, and the “Allow” or “Cancel” action.

After dismissing a web push prompt, when is the prompt shown again?

For OneSignal Prompts, see Slidedown prompt back-off logic.

For the native permission prompts, see Browser native prompt behavior.

How can I show the prompt on only certain pages?

You must disable the Auto Prompt option, then add the Slidedown prompt code to the specific pages you want the prompts to show.

If you are using the Bell prompt, it cannot be disabled at a page-by-page basis at this time.

Why do I see the Slide Prompt on Firefox when I want the Native Browser Prompt?

With Firefox 72+ there is a change that requires a user to click a button to show the native browser prompt. If you try to automatically show the native browser prompt, you will see an icon within the browser like this:

Firefox icon

The user must click this icon to view the native Permission Prompt on Firefox. This is why we default to the Slide Prompt on Firefox because it requires the 2-step opt-in in either case.

If you do not want to show the Slide Prompt as default, you must turn off the Auto Prompt switch in the Prompt Editor (don’t forget to press the Save button), then use the Web SDK requestPermission() method.

Why do I see the Slide Prompt on mobile when I want the native Permission Prompt?

On December 5th 2017, Google changed how the native Permission Prompt looks on Chrome for Android. It is a very user-unfriendly pop-up that takes over the entire screen of your site. We deliberately added the double prompt on Android to prevent your users from having a bad experience on your site.

If you do not want to show the Slide Prompt, you must turn off the Auto Prompt switch in the Prompt Editor (don’t forget to press the Save button), then use the Web SDK requestPermission() method.

Why does the slide prompt keep showing up?

Make sure you are not in incognito mode, private browser mode or guest browser mode.

Why is my prompt not showing?

A browser’s native Permission Prompt may not show if one of these conditions is true:

• The browser prevented the prompt from showing.
• The user has already allowed notifications or already subscribed
• The user blocked notifications. If a user clicks “Block” (Chrome), “Don’t Allow” (Safari), or “Never Allow” (Firefox) they can never be prompted again and must subscribe through a multi-step process in the browser settings. This is why it is recommended to use the OneSignal Prompts.
• Auto Prompt is turned off and no call to requestPermission();
• The native Permission Prompt will not show while in Incognito Mode, Private Browser mode or Guest Browser mode. It will also not show right away on Safari 12.1+ or Firefox 72+ (more details).
• Make sure you are using a browser and device that supports web push.

Check your prompt setup to make sure Auto Prompt is turned on or you are using our Web SDK to prompt users.

For iOS, there are some additional requirements to prompt users for their subscription. More information can be seen in the Mobile Web Push for iOS/iPadOS guide.

Last would be to follow these steps to reset your cookie and browser cache to visit your site like a first-time user.

---