RTN Docs

Web SDK · v0.6.0

Web Push

Let visitors opt in to browser notifications that your flows can send.

Web push reaches visitors in Chrome, Edge, Firefox, and Safari 16.4+ (on iOS, only when the store is added to the home screen), even when your store is not open. Flows send them with the Web push step.

1. Serve the service worker

Browsers only accept a service worker from your own origin. Download rtn-sw.js from the SDK host (the same place as rtn.min.js, e.g. https://cdn.adrtn.app/sdk/rtn-sw.js) and serve it at the root of your store:

https://yourstore.com/rtn-sw.js

It shows the notification and opens its link when tapped. Taps go through a tracked link, so they count as clicks in flow reports.

2. Ask from a click

Copy your site's public key from Flows → Channels in the dashboard. Call subscribeToPush from a user action: browsers block permission prompts that appear on their own.

<button id="rtn-notify">Get notified</button>
<script>
  document.getElementById('rtn-notify').addEventListener('click', function () {
    rtn.subscribeToPush({ vapidPublicKey: 'YOUR_PUBLIC_KEY' });
  });
</script>

subscribeToPush resolves to the permission: granted, denied, default (the visitor closed the prompt), or unsupported. On granted the SDK sends a push_subscribed event; the server stores the subscription for this visitor and keeps only the push service's name in your event data.

If your service worker lives elsewhere, pass serviceWorkerPath: '/path/rtn-sw.js'.

Stop notifications

await rtn.unsubscribeFromPush();

This removes the browser's subscription and sends push_unsubscribed. When a browser drops a subscription on its own, the server notices on the next send and stops using it.

Check the state

rtn.getPushPermission(); // 'granted' | 'denied' | 'default' | 'unsupported'

Use it to hide your "Get notified" button for visitors who already allowed or blocked notifications.

On this page