SDKs · JavaScript

Web SDK

Add push notifications to your website with one script and a service worker. No package install or build step required.

On this page

Before you start

Serve your website over HTTPS and use a browser that supports Web Push.
Configure and activate the Web platform in the dashboard, with your website’s domain.
Copy the public app key from App Settings → Keys & IDs.

The SDK reads your app’s configuration and permission prompt settings from Notirabbit. You do not need to supply a VAPID key or API URL.

1. Add the service worker

Create /notirabbit-sw.js at the root of your website and add this line:

importScripts("https://app.notirabbit.com/sdk/v1/push-sw.js");

Open that file’s URL directly. It must return JavaScript, without authentication, redirects or your site’s HTML fallback.

Already have a PWA service worker? Keep it. Notirabbit uses a separate /notirabbit-push/ registration scope by default, so this file does not replace your root-scoped PWA worker.

2. Load the SDK

Add the snippet to your shared page layout and replace the placeholder with your public app key. The ready queue handles the asynchronous script load.

<script src="https://app.notirabbit.com/sdk/v1/notirabbit.js" async></script>
<script>
  window.NotirabbitReady = window.NotirabbitReady || [];
  window.NotirabbitReady.push(function (Notirabbit) {
    Notirabbit.init("YOUR_PUBLIC_APP_KEY");
  });
</script>

The default initialization uses your dashboard’s Permission Prompt settings, including timing and page-view rules. Receipt and click reporting are handled by the service worker.

3. Choose when to ask

For your own notification button, initialize with autoPrompt: false instead and call prompt() from the user’s click:

window.NotirabbitReady = window.NotirabbitReady || [];
window.NotirabbitReady.push(function (Notirabbit) {
  Notirabbit.init("YOUR_PUBLIC_APP_KEY", { autoPrompt: false });
  document.querySelector("#enable-notifications")?.addEventListener("click", () => {
    Notirabbit.prompt();
  });
});

Add a button with id="enable-notifications" before this code runs. Use this initialization in place of the default one above.

Call Notirabbit.unsubscribe() from your opt-out control. It does not change the browser’s permission setting. Use getSubscription() to inspect the browser subscription or getStatus() for the SDK’s registration state.

iPhone and iPad: Web Push requires a supported Home Screen web app. Provide a web app manifest, have the user add the site to their Home Screen and open it there. A normal Safari tab cannot complete push registration. App Settings includes the website setup guidance.

4. Test your integration

Visit the configured domain and accept notifications.
Find your subscription in the dashboard and select your own device for a test.
Check that the notification appears, opens the intended page and reports engagement.

API sends target the app’s active audience. Use a separate test app containing only your own devices when trying the API.

Send a notification from your backend

Troubleshooting

The worker does not register: check HTTPS, the file’s root path and JavaScript content type. Exclude the worker file from SPA rewrites.
No permission dialog: check browser support, your prompt timing rules and whether permission was already denied. A blocked permission must be changed in the browser’s site settings.
Permission is granted but no subscription appears: check the public key, configured domain and your network’s access to the SDK/configuration endpoints.