Web SDK - Custom Code Setup

Only use this Custom Code setup if you need advanced configuration or programmatic control. For most users, we recommend the:

If you’re using a JavaScript framework, follow these specialized guides:

Requirements

HTTPS website: Web push does not work on HTTP or in incognito/private modes.
Server access: You’ll need to upload a service worker file to your site.
Single origin: Web push follows the Same-origin policy. If you have multiple origins (domains/subdomains), you will need multiple OneSignal apps (one per origin). To comply with this browser limitation, you can either:
- Redirect traffic to a single origin for subscriptions.
- Create multiple OneSignal apps—one per origin.

Configure your OneSignal app and platform

In the OneSignal dashboard:

Go to Settings > Push & In-App > Web.
Select the Custom Code integration type.

Site setup

Add the site details:

Site Name: The name of your site and default notification title.
Site URL: The exact origin of your site, e.g., https://yourdomain.com. Avoid using www. if your site isn’t configured that way. See Requirements if you have multiple origins.
Auto Resubscribe: Enable this to automatically resubscribe users who clear their browser data when they return to your site (no new permission prompt required).
Default Icon URL: Upload a square 256x256px PNG or JPG image that appears in notifications and prompts. If not set, a bell icon is used as the default.

OneSignal web push configuration showing site name, URL, and icon settings

Local testing

To test on localhost, use a separate OneSignal app from your production app and add allowLocalhostAsSecureOrigin: true to your init options. If you’re testing localhost on HTTPS with a self-signed certificate, you may need to tell Chrome to ignore invalid certificates with --allow-insecure-localhost. Firefox and Safari provide built-in mechanisms to add exceptions for security certificates.

  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(function(OneSignal) {
      OneSignal.init({
        appId: "YOUR_OS_APP_ID",
        allowLocalhostAsSecureOrigin: true,
      });
    });
  </script>

Safari web push certificate (optional)

OneSignal provides Safari certificates automatically at no cost. Only enable this if you have existing Safari Web Push certificates you need to use.

If enabled, upload your Safari Web .p12 Push Certificate and enter the password. Click Save to continue.

Upload service worker files

On the next page of web push configuration, you will be provided the OneSignalSDKWorker.js service worker file. The web SDK looks for this file in the root of your site by default, e.g., https://yourdomain.com/OneSignalSDKWorker.js. You can change the file location, name, and scope in code.

OneSignal service worker

Advanced service worker configuration, custom integration, and migration from other providers.

Add code to site

Add this code to your website’s <head> section. Replace:

YOUR_ONESIGNAL_APP_ID with your actual App ID from the OneSignal dashboard
YOUR_SAFARI_WEB_ID with your actual Safari Web ID from the OneSignal dashboard

HTML

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID",
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

iOS web push support

Apple started supporting web push notifications on iPhones and iPads running iOS 16.4+. Unlike Android devices where web push just “works” as long as visited on a supported browser, Apple added a few more requirements such as a manifest.json file and a user action to add your site to their home screen.

iOS web push setup

Add the required manifest.json file and guide users to add your site to their home screen.

Testing the OneSignal SDK integration

This guide helps you verify that your OneSignal SDK integration is working correctly by testing push notifications and subscription registration.

Check web push subscriptions

Launch your site on a test device.

Use Chrome, Firefox, Edge, or Safari while testing.
Do not use Incognito or private browsing mode. Users cannot subscribe to push notifications in these modes.
The prompts should appear based on your permission prompts configuration.
Click Allow on the native prompt to subscribe to push notifications.

Browser native permission prompt asking the user to allow or block notifications

Check your OneSignal dashboard

Go to Audience > Subscriptions.
You should see a new entry with the status Subscribed.

You have successfully created a web push subscription. Web push subscriptions are created when users first subscribe to push notifications on your site.

Set up test subscriptions

Test subscriptions are helpful for testing a push notification before sending a message.

Add to Test Subscriptions.

In the dashboard, next to the subscription, click the Options (three dots) button and select Add to Test Subscriptions.

Name your subscription.

Name the subscription so you can easily identify your device later in the Test Subscriptions tab.

Create a test users segment.

Go to Audience > Segments > New Segment.

Name the segment.

Name the segment Test Users (the name is important because it will be used later).

Add the Test Users filter and click Create Segment.

Segment editor with Test Users filter selected and the segment named Test Users

You have successfully created a segment of test users. You can now test sending messages to this individual device and groups of test users.

Send test push via API

Get your App API Key and App ID.

In your OneSignal dashboard, go to Settings > Keys & IDs.

Update the provided code.

Replace YOUR_APP_API_KEY and YOUR_APP_ID in the code below with your actual keys. This code uses the Test Users segment created earlier.

curl -X POST --url 'https://api.onesignal.com/notifications' \
  --header 'content-type: application/json; charset=utf-8' \
  --header 'authorization: Key YOUR_APP_API_KEY' \
  --data '{
    "app_id": "YOUR_APP_ID",
    "target_channel": "push",
    "name": "Testing basic setup",
    "headings": {
      "en": "👋"
    },
    "contents": {
      "en": "Hello world!"
    },
    "included_segments": [
      "Test Users"
    ],
    "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
  }'

Run the code.

Run the code in your terminal.

Check images and confirmed delivery.

If all setup steps were completed successfully, the test subscriptions should receive a notification.

Only Chrome supports images. Images will appear small in the collapsed notification view. Expand the notification to see the full image.

Expanded Chrome push notification on macOS displaying a custom image

Check for confirmed delivery.

In your dashboard, go to Delivery > Sent Messages, then click the message to view stats. You should see the confirmed stat, meaning the device received the push.

Safari does not support Confirmed Delivery.

Push notification message reports

View delivery, click, and conversion stats for your push notifications.

You have successfully sent a notification via the API to a segment.

If notifications are not arriving, contact support@onesignal.com with the following:

The API request and response (copy-paste into a .txt file)
Your Subscription ID
Your website URL with the OneSignal code

User identification

The previous section covered creating web push Subscriptions. This section expands to identifying Users across all their subscriptions (including push, email, and SMS) using the OneSignal SDK. It covers External IDs, tags, multi-channel subscriptions, privacy, and event tracking to help you unify and engage users across platforms.

Assign External ID

Use an External ID to identify users consistently across devices, email addresses, and phone numbers using your backend’s user identifier. This ensures your messaging stays unified across channels and 3rd party systems (especially important for Integrations). Set the External ID with the SDK’s login method each time a user is identified by your app.

OneSignal generates unique read-only IDs for subscriptions (Subscription ID) and users (OneSignal ID).As users download your app on different devices, subscribe to your website, and/or provide you email addresses and phone numbers outside of your app, new subscriptions will be created.Setting the External ID via the SDK is highly recommended to identify users across all their subscriptions, regardless of how they are created.

Add Tags

Tags are key-value pairs of string data you can use to store user properties (like username, role, or preferences) and events (like purchase_date, game_level, or user interactions). Tags power advanced Message Personalization and Segmentation allowing for more advanced use cases. Set tags with the SDK’s addTag and addTags methods as events occur in your app. In this example, the user reached level 6 identifiable by the tag called current_level set to a value of 6.

You can create a segment of users with a level between 5 and 10, then use that segment to send targeted and personalized messages:

Segment editor filtering users where current_level is greater than 4 and less than 10

Push notification composer targeting the Level 5-10 segment with a personalized message

Add email and/or SMS subscriptions

The OneSignal SDK creates web push subscriptions automatically when users opt in. You can also reach users through email and SMS channels by creating the corresponding subscriptions.

Use the addEmail method to create email subscriptions.
Use the addSms method to create SMS subscriptions.

If the email address or phone number already exists in the OneSignal app, the SDK adds it to the existing user. It does not create duplicates. You can view unified users via Audience > Users in the dashboard or with the View user API.

Best practices for multi-channel communication

Obtain explicit consent before adding email or SMS subscriptions.
Explain the benefits of each communication channel to users.
Provide channel preferences so users can select which channels they prefer.

To control when OneSignal collects user data, use the SDK’s consent gating methods:

setConsentRequired(true): Prevents data collection until consent is given.
setConsentGiven(true): Enables data collection once consent is granted.

For more on privacy and security:

Data collected by the SDK

Review what data the OneSignal SDK collects from users.

Handling personal data

Manage and protect user data in compliance with privacy regulations.

Listen to push, user, and in-app events

Use SDK listeners to react to user actions and state changes. The SDK provides several event listeners you can hook into. See the SDK reference guide for more details.

Push notification events

Click event listener: Detect when a notification is tapped.
Foreground lifecycle listener: Control how notifications behave in foreground.

User state changes

User state change event listener: Detect when the External ID is set.
Permission observer: Track the user’s specific interaction with the native push permission prompt.
Push subscription change observer: Track when the push subscription status changes.

Advanced setup & capabilities

Explore more capabilities to enhance your integration:

Migrating to OneSignal

Move from another push provider to OneSignal.

Integrations

Connect OneSignal with third-party tools and platforms.

Action buttons

Add interactive buttons to push notifications.

Multi-language messaging

Send localized messages to users in their preferred language.

Identity Verification

Secure your SDK integration with server-side identity verification.

Custom Outcomes

Track custom conversion events tied to your messages.

Web SDK setup & reference

Web push setup

Enable all key web push features for your integration.

Web SDK reference

Full details on available methods and configuration options.

Congratulations! You’ve successfully completed the Web SDK setup guide.

FAQ

Do I need HTTPS for web push notifications?

Yes. All modern browsers require HTTPS for push notification support. If your site uses HTTP, you must migrate to HTTPS before setting up web push.

Can I use this setup with a single-page application (SPA)?

Yes. The Custom Code setup is the recommended approach for SPAs built with frameworks like React, Angular, or Vue. See the framework-specific guides at the top of this page for Angular, React, and Vue.

What happens if a user clears their browser data?

The user’s push subscription is removed. If Auto Resubscribe is enabled, they are automatically resubscribed the next time they visit your site.

Permission Requests

Configure when and how users are prompted to subscribe.

Web SDK Reference

Full API reference for the OneSignal Web SDK.

Developer Documentation

Mobile SDKs

Web SDKs

Live Activities

Desktop & Watch Setup

Legacy SDK reference

​Requirements

​Configure your OneSignal app and platform

​Site setup

​Local testing

​Safari web push certificate (optional)

​Upload service worker files

OneSignal service worker

​Add code to site

​iOS web push support

iOS web push setup

​Testing the OneSignal SDK integration

​Check web push subscriptions

​Set up test subscriptions

​Send test push via API

Push notification message reports

​User identification

​Assign External ID

​Add Tags

​Add email and/or SMS subscriptions

​Privacy & user consent

Data collected by the SDK

Handling personal data

​Listen to push, user, and in-app events

​Push notification events

​User state changes

​Advanced setup & capabilities

Migrating to OneSignal

Integrations

Action buttons

Multi-language messaging

Identity Verification

Custom Outcomes

​Web SDK setup & reference

Web push setup

Web SDK reference

​FAQ

​Do I need HTTPS for web push notifications?

​Can I use this setup with a single-page application (SPA)?

​What happens if a user clears their browser data?

​Related pages

Permission Requests

Web SDK Reference

Requirements

Configure your OneSignal app and platform

Site setup

Local testing

Safari web push certificate (optional)

Upload service worker files

Add code to site

iOS web push support

Testing the OneSignal SDK integration

Check web push subscriptions

Set up test subscriptions

Send test push via API

User identification

Assign External ID

Add Tags

Add email and/or SMS subscriptions

Privacy & user consent

Listen to push, user, and in-app events

Push notification events

User state changes

Advanced setup & capabilities

Web SDK setup & reference

FAQ

Do I need HTTPS for web push notifications?

Can I use this setup with a single-page application (SPA)?

What happens if a user clears their browser data?

Related pages