Push
Install the snippet
Add WRNexus Web Push to any website — drop in the SDK snippet, host the service worker, and trigger the opt-in prompt from a user gesture.
Adding browser push to your site is two steps: load the SDK snippet on every page, and host the service worker at your site root. This page covers the snippet; the worker has its own setup guide.
Prerequisites
- A push site created in the WRNexus Push dashboard. Creating it gives you a
non-secret site key (
publicKey) — copy it from Push → Settings. - Your site served over HTTPS (push and service workers require a secure
context;
http://localhostis allowed for local development).
1. Add the SDK snippet
Drop this on every page, ideally just before </body>. Replace SITE_KEY with
your site key:
<script
src="https://api.wrnexus.com/push/sdk.js"
data-site-id="SITE_KEY"
defer
></script>
The loader is fully static and cacheable — all per-site values (your VAPID
public key and the API origin) are fetched at runtime from
/push/config, so there is nothing to build.
On load the SDK:
- Resolves your site config from
/push/config?siteKey=SITE_KEY. - Registers the service worker on your origin (default path
/wrnexus-push-sw.js). - Refreshes the server-side record for a browser that is already subscribed.
It shows no permission prompt on load — that is always explicit (step 3).
data-* options
| Attribute | Default | Description |
|---|---|---|
data-site-id |
(required) | Your site key (publicKey). Alias: data-site. |
data-sw |
/wrnexus-push-sw.js |
Path to the service worker on your origin. Must be same-origin with the page. |
data-sw-scope |
/ |
Scope the worker controls. Must be allowed by the worker’s path / Service-Worker-Allowed header. |
data-api |
the SDK’s own origin | Override the origin used to fetch /push/config. Rarely needed. |
data-debug |
false |
Set "true" to log SDK activity to the console. |
2. Host the service worker
Copy https://api.wrnexus.com/push/sw.js to the root of your site and serve
it at https://your-domain.example/wrnexus-push-sw.js over HTTPS with
Content-Type: text/javascript. This is required — a worker can only control its
own origin. Full requirements (scope headers, MIME type, optional re-subscribe
config) are in the Service worker setup guide.
3. Trigger the opt-in prompt
Wire WRNexusPush.prompt() to a real click. The browser permission prompt only
appears here — never on page load:
<button id="enable-push">Enable notifications</button>
<script>
document.getElementById('enable-push').addEventListener('click', function () {
WRNexusPush.prompt().then(function (res) {
if (res.ok) {
console.log('Subscribed!', res.id);
} else {
console.log('Not subscribed — permission:', res.permission);
}
});
});
</script>
prompt() requests permission, subscribes the browser, and registers the
subscription with WRNexus. It resolves to { ok, permission, id, subscription }.
subscribe() is a kept alias of prompt().
Calling the SDK before it loads
If you defer the script you may want to queue calls. Initialise WRNexusPush as
an array first — the SDK drains any queued [method, ...args] entries once it
loads:
<script>
window.WRNexusPush = window.WRNexusPush || [];
// queued until the SDK is ready (won't show a prompt unless from a gesture)
WRNexusPush.push(['track']);
</script>
4. Verify
- Open the page with
data-debug="true"and confirmconfigandservice worker registeredlog lines. - Click your enable button, accept the prompt, and check the new row under Push → Subscribers in the dashboard.
- Call
WRNexusPush.isSubscribed()in the console — it should resolvetrue.
Next steps
- Service worker setup — host the one required file.
- JavaScript SDK — preferences, unsubscribe, and the full API.
- Troubleshooting — if the prompt or worker misbehaves.