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.
.png
or .jpg
256x256
pixels (to meet Safari’s requirements)Image shows the Site Setup section of your web push settings. This is where you configure your website name, site URL, and default icon.
Add new prompts or select the prompt you want to edit.
Example showing the Slide Prompt with Category Tags.
init
code’s promptOptions
object. Use the slidedown
properties. See Web SDK Reference for more details.The push slide prompt options.
Slide prompt text options.
init
code’s promptOptions
object. Use the text
properties. See Web SDK Reference for more details._
) 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'.
init
code’s promptOptions
object. Use the categories
properties. See Web SDK Reference for more details.Email & Phone Number Prompt Setup
Email & Phone Number Prompt Setup
init
code’s promptOptions
object add the type
to be either email
, sms
, or smsAndEmail
. See Web SDK Reference for more details.Subscription Bell Prompt
Typical Site & WordPress Setup: Subscription Bell Prompt
Subscription Bell Setup in Dashboard
Custom Code Setup: Subscription Bell Prompt
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.Custom Link Prompt
Typical Site & WordPress Setup: Custom Link Prompt
Custom Link Setup in Dashboard
Custom Code Setup: Custom Link
init
code’s promptOptions
object, add the customlink
object and its available properties.Typical & Custom Code Setup: Additional Styling
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 widgetClass 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 |
Native Permission Prompt
Bell icon shown for unfamiliar or untrusted sites in Edge.
Native prompt appears directly for trusted sites in Edge.
Typical Site & WordPress Setup: Auto Prompt
Example: This prompt is set to appear on the third pageview after 30 seconds.
Custom Code Setup: Auto Prompt
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)
Interaction Outcome | Next Prompt Timing |
---|---|
First Dismissal | Wait 3 days |
Second Dismissal | Wait 7 days |
Third and later dismissals (not subscribed) | Wait 30 days |
How to translate/localize the prompt?
Can I AB Test Prompts?
Can I segment subscriptions based on the page they subscribed?
Can I change the bell icon?
Can I change the categories based on page?
How to track Slide Prompt Events?
After dismissing a web push prompt, when is the prompt shown again?
How can I show the prompt on only certain pages?
Why do I see the Slide Prompt on Firefox when I want the Native Browser Prompt?
Firefox icon
requestPermission()
method.Why do I see the Slide Prompt on mobile when I want the native Permission Prompt?
requestPermission()
method.Why does the slide prompt keep showing up?
Why is my prompt not showing?
requestPermission();