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    Support

Web Push SDK Setup (HTTP)

OneSignal SDK Setup Guide for HTTP websites. Works with all Web Push platforms (Chrome, Firefox, Safari)

For Developers

Required For Setup

After completing this section, your site will be able to send notifications to visitors, and your visitors will be able to subscribe to your site's notifications.

IMPORTANT Steps Involved:
1. Configure OneSignal Settings
2. Add code to your site


Determining if your site is an HTTP or HTTPS site

Use this setup guide only if your site does not fully support HTTPS, which you can determine by making sure your site URL starts with http:// and not https://

HTTPS fully supported?

If you've determined that your site supports HTTPS, follow the Web Push SDK Setup (HTTPS) guide instead of this guide.


1. Configure OneSignal settings

Chrome, Firefox

Go to App Settings and click Configure for the Google Chrome platform (instructions for Safari are below).

1.1 Enter site URL

Most users may just enter their base site URL for this field (e.g. example.com). However, if your site meets one of the below cases, please follow these recommendations:

My site uses a subfolder

If your site uses a subfolder, like example.com/blog (where blog is the subfolder), please only enter example.com.

My site uses both www and non-www links

For sites that are accessible from both www & non-www links, such as example.com AND www.example.com, please only enter one that you wish to send push notifications from.

Recommended - redirect traffic from one to the other (e.g. users that visit example.com are redirected to www.example.com), so that all your traffic only goes to one.

1.2 Enter icon URL

Enter a link to an icon file that is at least 80x80 pixels (Recommended size is 192x192). The file must be .png, .jpg, or .gif.

1.3 Indicate non-HTTPS site

Check the box My site is not fully HTTPS, and scroll down to see the Subdomain field.

1.4 IMPORTANT: Name your subdomain

We recommend using the name of your site as your subdomain.

  • Use only one word -- DO NOT include .com
  • Dashes, letters, and numbers are allowed (e.g. my-blog is a valid subdomain)
  • Push notifications will be showing as coming from subdomain.os.tc

2. Add code to your site

If you are running Shopify, Blogger, Squarespace, Weebly, OpenCart, or Magento on HTTPS, see this full code example for adding the subdomainName value from step 1.4 to your site.

For all other HTTP sites, place the below code on all pages you'd like OneSignal to prompt users to subscribe.

<head>
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",
      autoRegister: false, /* Set to true to automatically prompt visitors */
      httpPermissionRequest: {
        enable: true
      },
      notifyButton: {
          enable: true /* Set to false to hide */
      }
    }]);
  </script>
</head>

3. Safari Support (Optional)

Safari

Safari on iOS does not support web push. See our list of supported browsers here.

3.1 Go to App Settings and click Configure for the Apple Safari platform.

3.2 Type in your Site Name. This is shown when prompting users to subscribe (show me).

3.3 Type in the same Site URL as you typed above, except don't enter trailing slashes or subfolders.

3.4 If you don't have a .p12 certificate file, don't upload one.

3.5 Upload your site icon. Please upload a 256 x 256 icon for each of the sizes (the icon will be automatically resized for each textbox).


You're Done!

Next step: Send your first push notification via the OneSignal Dashboard


Miscellaneous

How can I automatically dismiss a notification after some time?

On Firefox and Safari, notifications are automatically dismissed after a short amount of time. On Chrome, by default, notifications last indefinitely (they are displayed until the user interacts with it by dismissing it or clicking it). On Chrome Desktop v47+, you can add the persistNotification parameter to your OneSignal init call to control whether a notification is displayed indefinitely or dismissed after 20 seconds.

persistNotification defaults to true if unset. Set it to false to automatically dismiss the notification after 20 seconds (Chrome Desktop v47+ only).

Dismissing Notifications After ~20 Sec. (Chrome Desktop v47+)

// Do NOT call init() twice
OneSignal.push(["init", {
  // Your other init options here
  persistNotification: false // Automatically dismiss the notification after ~20 seconds in Chrome Deskop v47+
}]);

Setup Complete

You're all set up! See our Web Push Prompts page as well.

Changing Settings

  • To upgrade your site from HTTP --> HTTPS, please follow this guide. You must create a new app or users will receive duplicate notifications.

Web Push SDK Setup (HTTP)

OneSignal SDK Setup Guide for HTTP websites. Works with all Web Push platforms (Chrome, Firefox, Safari)

For Developers