Saltar al contenido principal

Setup & debugging

You may notice the need to wrap your OneSignal calls with OneSignalDeferred.push(async function() { ... }) You can add as many methods into the function() as desired. The OneSignal SDK is loaded with the defer attribute on your page. For example: <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script> This means the OneSignal code will execute after the HTML document has been fully parsed, preventing any blocking of the site by the OneSignal SDK. However, this presents a problem for page scripts that depend on the OneSignalDeferred variable existing. To resolve this, when you add OneSignal to your site, it should begin with: window.OneSignalDeferred = window.OneSignalDeferred || []; This creates a OneSignalDeferred variable, and if OneSignal is already loaded, it’s then assigned to the loaded instance. Otherwise, the OneSignal variable equals an empty array - []. All arrays have a .push() function, so at this point, the OneSignalDeferred variable is simply an array of functions we’re pushing on to it. When the SDK finally loads, the SDK processes all the functions pushed so far and redefines .push().

init()

Initializes the OneSignal SDK. This should be called in the <head> tag once on each page of your site. The ONESIGNAL_APP_ID can be found in Keys & IDs.
If you want to delay initialization of the OneSignal SDK, we recommend using our Privacy methods.
Init options only work with Custom Code Setup. Otherwise, these are configured in the OneSignal dashboard.

promptOptions parameters

Use promptOptions to localize or customize the user permission prompts. All fields are optional.

notifyButton parameters

Configure the Subscription Bell (notify button) shown on the page.

welcomeNotification parameters

Customize the welcome notification sent after first-time subscription.
Example:

setLogLevel()

Set the logging to print additional logs to the console. See Debugging with Browser DevTools for more details.
JavaScript
Log levels:
  • 'trace'
  • 'debug'
  • 'info'
  • 'warn'
  • 'error'

User identity & properties

When your users subscribe to push notifications on your website, OneSignal automatically creates a OneSignal ID (user-level) and a Subscription ID (device-level). You can associate multiple subscriptions (e.g., devices, emails, phone numbers) with a single user by calling login() with your unique user identifier.
See Users and Aliases for more details.

login(external_id)

Sets the user context to the provided external_id. Ensures that all Subscriptions and properties associated with this external_id are unified under a single onesignal_id. See Users for more details. Key behaviors:
  • If the external_id already exists, the SDK switches to that user. Anonymous data collected before login is not merged and will be discarded.
  • If the external_id does not exist, the local state will be saved under the current onesignal_id. Any data collected while the user was anonymous will be kept.
  • SDK retries automatically on network failure or server error.
Call this method each time the user opens the site or within the Subscription change listener to make sure the External ID is set and the subscription is linked to the user.

logout()

Unlinks the current user from the subscription.
  • Removes the external_id from the current push subscription.
  • Resets the OneSignal ID to a new anonymous user.
  • Any new data (e.g tags, Subscriptions, session data, etc.) will now be set on the new anonymous user until they are identified with the login method.
Use this when a user signs out of your app if you want to set the subscription to a new anonymous user.
JavaScript

OneSignal.User.onesignalId

Retrieve the current user’s OneSignal ID saved locally on the browser. May be null if called before user state is initialized. Instead, use User State addObserver() to listen for user state changes.
JavaScript

OneSignal.User.externalId

Retrieve the current user’s External ID saved locally on the browser. May be null if not set via the login method or called before user state is initialized. Instead, use User State addObserver() to listen for user state changes.
JavaScript

addEventListener() User State

Listen for changes in the user context (e.g., login, logout, ID assignment).
JavaScript

addAlias(), addAliases(), removeAlias(), removeAliases()

Aliases are alternative identifiers (like usernames or CRM IDs).
  • Set external_id with login() before adding aliases. Aliases added to subscriptions without external_id will not sync across multiple subscriptions.
  • See Aliases for details.
JavaScript

getLanguage(), setLanguage()

Get and/or override the auto-detected language of the user. See Multi-language messaging for a list of available language codes.
JavaScript

Custom events

Trigger Journeys and Wait Until step activation via a custom event.
Custom events require Web SDK 160500+A user should be logged in for custom events to be tracked.
Track and send a custom event performed by the current user.
  • name - Required. The name of the event as a string.
  • properties - Optional. Key-value pairs to add to the event. The properties dictionary or map must be serializable into a valid JSON Object. Supports nested values.
The SDK automatically includes app-specific data into the properties payload under the reserved key os_sdk that will be available to consume. For example, to target events by subscription type, you would access os_sdk.type.
json

trackEvent()

JavaScript

Tags

Tags are custom key : value pairs of string data you set on users based on events or user properties. See Tags for more details.

addTag(), addTags()

Set a single or multiple tags on the current user.
  • Values will be replaced if the key already exists.
  • Exceeding your plan’s tag limit will cause the operations to fail silently.
JavaScript

removeTag(), removeTags()

Delete a single or multiple tags from the current user.
JavaScript

getTags()

Returns the local copy of the user’s tags. Tags are updated from the server during login() or new app sessions.
JavaScript

Privacy

setConsentRequired()

Enforces user consent before data collection begins. Must be called before initializing the SDK. This method is the same as adding the requiresUserPrivacyConsent: true to the init method.
JavaScript

setConsentGiven()

Grants or revokes user consent for data collection. Without consent, no data is sent to OneSignal and no subscription is created.
  • If setConsentRequired() or requiresUserPrivacyConsent is set to true, our SDK will not be fully enabled until setConsentGiven is called with true.
  • If setConsentGiven is set to true and a Subscription is created, then later it is set to false, that Subscription will no longer receive updates. The current data for that Subscription remains unchanged until setConsentGiven is set to true again.
  • If you want to delete the User and/or Subscription data, use our Delete user or Delete subscription APIs.
JavaScript

Subscriptions

See Subscriptions for more details.

User.PushSubscription.id

Retrieve the current user’s push Subscription ID saved locally on the browser. May return null if called too early. Its recommended to get this data within the subscription observer to react to changes.
JavaScript

User.PushSubscription.token

Returns the current push subscription token. May return null if called too early. Its recommended to get this data within the subscription observer to react to changes.
JavaScript

addEventListener() push subscription changes

Use this method to respond to push subscription changes like:
  • The device receives a new push token from Google (FCM) or Apple (APNs)
  • OneSignal assigns a subscription ID
  • The optedIn value changes (e.g. called optIn() or optOut())
  • The user toggles push permission in system settings, then opens the app
When this happens, the SDK triggers the onPushSubscriptionChange event. Your listener receives a state object with the previous and current values so you can detect exactly what changed. To stop listening for updates, call the associated removeObserver() or removeEventListener() method.
JavaScript

optOut(), optIn(), optedIn

Control the subscription status (subscribed or unsubscribed) of the current push Subscription. Use these methods to control the push subscription status on your site. Common use cases: 1) Prevent push from being sent to users that log out. 2) Implement a notification preference center within your site.
  • optOut(): Sets the current push subscription status to unsubscribed (even if the user has a valid push token).
  • optIn(): Does one of three actions:
    1. If the Subscription has a valid push token, it sets the current push subscription status to subscribed.
    2. If the Subscription does not have a valid push token, it attempts to display the push permission prompt.
  • optedIn: Returns true if the current push subscription status is subscribed, otherwise false. If the push token is valid but optOut() was called, this will return false.
JavaScript

addEmail(), removeEmail()

Adds or removes an email Subscription (email address) to/from the current user. Call addEmail after login() to set the correct user context. Compatible with Identity Verification.
JavaScript

addSms(), removeSms()

Adds or removes an SMS Subscription (phone number) to/from the current user. Requires E.164 format. Call addSms after login() to set the correct user context. Compatible with Identity Verification.
JavaScript

Slidedown prompts

Display the various slidedown prompts on your sites. See Web permission prompts for more details.
  • If dismissed, future calls will be ignored for at least three days. Further declines will lengthen the time required to elapse before prompting the user again.
  • To override back-off behavior, pass {force: true} to the method. However, to provide a good user experience, bind the action to a UI-initiated event like a button click.
This does not replace the Native Browser Prompt required for subscription. You must obtain permissions using the native browser prompt.

promptPush()

Displays the regular slidedown prompt for push notifications.
JavaScript

promptPushCategories()

Displays the category slidedown prompt, allowing users to update their tags. Also triggers the native notification permission prompt if the user has not already granted permission.
JavaScript

promptSms()

Displays the SMS subscription prompt.
JavaScript

promptEmail()

Displays the email subscription prompt.
JavaScript

promptSmsAndEmail()

Displays the SMS and email subscription prompts simultaneously.
JavaScript

addEventListener() Slidedown

Add a callback to detect the Slidedown prompt shown event.
JavaScript

Push notifications

requestPermission()

Requests push notifications permission via the native browser prompt. Subject to backoff logic set by the browser. See Web permission prompts for more details.
JavaScript

isPushSupported()

Returns true if the current browser supports web push.
JavaScript

OneSignal.Notifications.permission

Returns a boolean indicating the site’s current permission to display notifications.
  • true: The user has granted permission to display notifications.
  • false: The user has either denied or not yet granted permission to display notifications.
This is just the sites’s permission, does not factor in OneSignal’s optOut status or the existence of the Subscription ID and Push Token, see OneSignal.User.PushSubscription for these. To listen for changes in permission, use the permissionChange event.
JavaScript

addEventListener() notifications

You can hook into the notification life-cycle by attaching your event handlers to a notification event. Calling addEventListener lets you add an arbitrary number of event handlers for notification events. To stop listening for events, call the associated removeEventListener() method.
JavaScript

permissionChange

This event occurs when the user clicks Allow or Block or dismisses the browser’s native permission request.
JavaScript

permissionPromptDisplay

This event occurs when the browser’s native permission request has just been shown.
JavaScript

click

This event will fire when the notification’s body/title or action buttons are clicked.
JavaScript

foregroundWillDisplay

This event occurs before a notification is displayed. This event is fired on your page. If multiple browser tabs are open on your site, this event will be fired on all pages on which OneSignal is active.
JavaScript

dismiss

This event occurs when:
  • A user purposely dismisses the notification without clicking the notification body or action buttons
  • On Chrome on Android, a user dismisses all web push notifications (this event will be fired for each web push notification we show)
  • A notification expires on its own and disappears
This event does not occur if a user clicks on the notification body or one of the action buttons. That is considered a notification click event.
JavaScript

setDefaultUrl()

Sets the default URL for notifications. If you haven’t set a default URL, your notification will open to the root of your site by default.
JavaScript
To set the default URL for notifications, provide a valid URL that you want to be launched when the notification is clicked. This default URL will be used if no other URL is specified when creating a notification. If you do specify a URL when creating a notification, the default URL will be overridden. In the case of Safari, the default notification icon URL will be set to the Site URL that you have specified in your Safari settings, as this function is not available.

setDefaultTitle()

Sets the default title to display on notifications.
JavaScript
If a notification is created with a title, the specified title always overrides this default title. A notification’s title defaults to the title of the page the user last visited. If your page titles vary between pages, this inconsistency can be undesirable. Call this to standardize page titles across notifications, as long as a notification title isn’t specified.

Outcomes

sendOutcome()

Triggers an outcome which can be viewed in the OneSignal dashboard. Accepts an outcome name (string, required) and a value (number, optional). Each time sendOutcome method is invoked with the same outcome name passed, the outcome count will increase, and the outcome value will be increased by the amount passed in (if included). See Custom Outcomes for more details.
JavaScript

sendUniqueOutcome()

Triggers an outcome which can be viewed in the OneSignal dashboard. Accepts only the outcome name (string, required). sendUniqueOutcome will increase the count for that outcome only once per user. See Custom Outcomes for more details.
JavaScript