OneSignal Help & Documentation

Welcome to the OneSignal New IA developer hub. You'll find comprehensive guides and documentation to help you start working with OneSignal New IA as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Discussions

Web Push Quickstart

How to set up web push notifications on your website with OneSignal.

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:

Step 2. Site Setup

Input your default site information.

Image showing Site Setup stepImage showing Site Setup step

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:

  • http:// or https://
  • www or non-www links (e.g. https://example.com, https://www.example.com)

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 https icon URL or upload file that is square 256x256 pixels.

The file must be .png, .jpg, or .gif.

My site is not fully HTTPS

Select this checkbox if any apply:

  • you have an HTTP website
  • 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.

  1. Click Download OneSignal SDK files. (You can also download the files here).

  2. Unzip the OneSignal SDK files. There should be two files:

  • https://yoursite.com/OneSignalSDKWorker.js
  • https://yoursite.com/OneSignalSDKUpdaterWorker.js
  1. 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



Web Push Quickstart


How to set up web push notifications on your website with OneSignal.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.