Sending Web Push Notifications is easy with OneSignal. If you haven't already, sign up for a free account on onesignal.com.
If this is not your first app with OneSignal, click New App/Website. Otherwise, you will see the next page.
Simply name your app something similar to your site, then select Web from the platform list. Click "Next: Configure Your Platform".
Step 1. Choose Integration
If you plan to add OneSignal to your site using code, continue with Typical Site setup or select Custom Code Setup.
If you use our WordPress Plugin, Shopify App or a custom Website Builder, see our Website Builder Options.
Website Builder Options
OneSignal provides easy integration with the following 3rd party website builders:
Official Plugins | Common Integrations | |
|---|---|---|
Step 2. Site Setup
Input your default site information.
Image showing Site Setup step
Field | Description |
|---|---|
SITE NAME | The default name to call your site used in push notifications. |
SITE URL | Your website URL including:
Trying to test locally, see Local Testing Setup |
AUTO RESUBSCRIBE (HTTPS ONLY) | Recommended: Allows push subscribers to automatically resubscribe upon returning to your site without being prompted if they clear their browser data or if you are transferring to OneSignal from another push provider. |
DEFAULT ICON URL | Icon used for the Slide Prompt and default for push notifications. Enter an The file must be |
My site is not fully HTTPS
Select this checkbox if any apply:
- you have an
HTTPwebsite - your site is hosted by WordPress.com
Field | Description |
|---|---|
CHOOSE A LABEL | The subdomain label used for push subscription. See Web Push HTTP vs. HTTPS for more details. |
Step 3. Permission Prompt Setup
By default, the Push Slide Prompt will show on the first page view after 10 seconds. You can skip this step for now and come back later to add new prompts or modify this one. See our Web Prompting Guide for more details.
Step 4. Welcome Notification (Optional)
A push notification sent immediately to current user upon subscribing to your site for the first time. Enabled by default, it can be toggled-off to prevent showing and update message content at anytime. If you want to add a delay, toggle off this notification and use our Automated Messages.
Step 5. Advanced Push Settings (Optional)
OneSignal provides several Advanced Options. For instance:
Multiple Service Workers
If you are using or plan to use another service worker on your site, please follow the OneSignal Service Worker Setup Guide.
Safari - Custom Certificate (Optional)
OneSignal automatically provides the necessary certificates to work with Safari Browsers at no additional cost. If you already have your own Safari Web Push Certificates, toggle on this option to upload your Safari Web .p12 Push Certificate and password.
Step 6. Upload Files
Next, you'll need to add the OneSignal SDK files to your site.
-
Click Download OneSignal SDK files. (You can also download the files here).
-
Unzip the OneSignal SDK files. There should be two files:
https://yoursite.com/OneSignalSDKWorker.jshttps://yoursite.com/OneSignalSDKUpdaterWorker.js
- The OneSignal SDK files must be publicly accessible and can be placed at the top-level root of your site. If you want to place them in a subfolder you can! Please see our OneSignal Service Worker Guide for instructions.
Step 7. Add Code to Site
To enable OneSignal on your site, you will need to paste the provided code into your website's <head>. If you do not have access to modify your site's code, you will need to contact a developer to help you.
Step 8. Add your first user
Go to your website and you should see the OneSignal Slide Prompt after 10 seconds if you did not change the prompt configuration yet in Step 3.
Subscribe to push notifications and check your OneSignal Dashboard Audience > All Users to see your Device Record.
Then head over to Messages > New Push to Send your first Push Notification from OneSignal.
Troubleshooting
If running into issues, checkout the Web Push Troubleshooting Guide for common fixes.
If stuck, feel free to contact [email protected] for assistance.
Setup Complete!
Visit Web Push Tutorials for next steps.
Updated 7 days ago
What's Next
| Troubleshooting Web Push |
| Web Push Tutorials |