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.
“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 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:
Soft prompts are recommended by browsers and help maximize opt-in rates while protecting your domain reputation.
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.
.png
or .jpg
256x256
pixels (to meet Safari’s requirements)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.
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:
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:
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.
You can customize the text displayed in the slide prompt:
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.
You can enhance the Slidedown prompt by adding categories—checkboxes that let users indicate interest in specific message topics (e.g., News, Sales, Updates).
You may display the category prompt again later to let users update their preferences. Previously selected values will be retained unless overwritten.
_
) for spaces.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.
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:
To add this 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.
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:
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.
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:
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.
To render the prompt on your site, insert the following HTML where you want the widget to appear:
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.
The native permission prompt is the browser-controlled dialog that users must accept to subscribe to push notifications from your website. This prompt is:
Native Permission Prompt
Different browsers impose unique behaviors and restrictions to reduce spammy permission requests:
Chrome 80+ may display a quieter UI instead of the full prompt:
Chrome implements back-off logic if the user clicks the “X” on the native prompt:
Edge uses a trust-based model:
Bell icon shown for unfamiliar or untrusted sites in Edge.
Native prompt appears directly for trusted sites in Edge.
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:
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
Example: This prompt is set to appear on the third pageview after 30 seconds.
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:
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.
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.
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:
requestPermission();
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.