Typical Setup

Setup OneSignal on your website. Works with all Web Push Supported Browsers.

🚧

Not for WordPress

If you are using our WordPress plugin do not follow this guide. Please see our WordPress Setup Guide instead.

Generally, if you can add Javascript to your site, you can add OneSignal. However, not all sites allow Service Workers to be added. If you cannot upload our Service Workers to your site, please follow the steps labeled HTTP Setup Integration.

Visit Settings > Platforms > All Browsers

2204

Image showing Settings to select in order to setup Web Push

Step 1. Choose Integration

Select Typical Site if you can add Javascript code to your site.

If using our WordPress plugin, see the WordPress Setup Guide.

2147

Step 2. Site Setup

Site Name - The default Title of your push notifications if one is not provided.

Site URL - http/https & www/non-www sensitive. Must be the exact URL (site origin) you see in the browser when on the site (e.g. https://example.com).

Recommended: Visit your site and copy-paste the site URL into this field.

HTTP Setup or HTTPS setup without Service Workers

If your site is HTTP or you cannot add files to the root directory of your site, it is recommended to upgrade to HTTPS or select My site is not fully HTTPS. More details in Web Push HTTP vs. HTTPS.

1067

🚧

Site URL Must be Correct

If your site is accessible from both www & non-www links (e.g. https://example.com AND https://www.example.com), only enter one URL that you wish to send push notifications from.

We recommend redirecting traffic from one to the other (e.g. users that visit https://example.com are redirected to https://www.example.com), so that all your traffic only goes to one origin.

Auto Resubscribe - Only available for HTTPS sites with Root Access (did not select "My site is not fully HTTPS"). This allows users that cleared their browser cache to automatically resubscribe upon returning to the site.

Default Icon URL - Enter a link to an icon image file for your site. Recommended size is 256x256 pixels. Minimum 80x80 pixels. The file must be .png, .jpg, or .gif.

🚧

Site URL and Label Should Never Change

You can only change your Site URL or Label if you have less than 100 web users. Once you have 100+ web users, this setting is disabled.

How does OneSignal work differently with HTTP sites?

What if my site is in a subfolder?

Why does my site require a label?

Why can't I change my label?


Step 3. Permission Prompt Setup

Select Add Prompt to choose Push Prompt.

If you want to ask for Emails and Phone numbers, you can always come back to setup the Email/Phone Prompt later.

1772

Permission Prompt Editor

Select which prompts you wish to use, and style them as you like. Once you have edited the prompt to your liking, click Done.

1070

Recommended Prompt Setup

It is best to ask visitors to subscribe after you have provided some value to them through the site. Use the "Slide Prompt" with Auto-prompt set to 1 page views and 10 seconds.

Users will be prompted after the 1st page of your site and 10 seconds have passed.

You can disable Auto-prompt and trigger the prompt programmatically. See Prompting for more details on each prompt.

404

Step 4. Welcome Notification

Optional way to Welcome or Thank users after subscribing. Subscribers will see a welcome notification as soon as they subscribe. You can edit or disable them here.

1066

Step 5. Advanced Push Options

Optional: Most sites will not have to edit anything in Advanced options. See Web Push Advanced Options to learn more about each option.


Step 6. Upload OneSignal SDK

🚧

HTTPS Only

This option will not be necessary if you selected My Site is Not Fully HTTPS Skip to Step 7.

If you are using our WordPress Plugin, please use our WordPress Setup Guide instead.

Next, you'll need to add the OneSignal SDK files to your site. To do so,

  1. Download the 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 directory.

If you want to place them in a subfolder you can! Please see our OneSignal Service Worker Guide for instructions.

FAQ on Uploading Service Workers

How do I upload files?

There are three ways you can upload files to your site:

Option A: FTP
  • Use an FTP Server like FileZilla to upload the files to your root directory
  • Here is a great step-by-step guide.
Option B: Control Panel
  • Use your hosting provider's control panel like cPanel to upload files.
Option C: Contact your hosting provider
  • Most hosting providers will be more than happy to assist you in uploading files to your site.
  • Just send them the zip file above and ask them to unzip it in your site's root directory.

How can I tell if I've uploaded the files correctly?

Once you've uploaded the OneSignal SDK files, the following URLs should be publicly accessible (replace yoursite.com with your site's domain):

  • https://yoursite.com/OneSignalSDKWorker.js
  • https://yoursite.com/OneSignalSDKUpdaterWorker.js

Can these files be served from a subfolder of my site?


Step 7. Add Code to Site

To enable OneSignal on your site, you will need to paste the code from Web Push Settings 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.

1071

FAQ

How do I test my site on a local environment?

Can OneSignal integrate with another service worker on my site or a Progressive Web App?