Web push notifications

Add web push notifications to any website in Chrome, Edge, Firefox, Opera and Safari: a service worker, a two-line snippet, permission prompts, users and tags.

Updated 3 min read Websites

On this page 9 sections
  1. 1. Turn on web push
  2. 2. Add the service worker file
  3. 3. Add the SDK to your pages
  4. Prompts
  5. Users and tags
  6. Notifications
  7. In-app messages
  8. Options
  9. Troubleshooting

Web push and in-app messages for your website, powered by Pushix.

Works in Chrome, Edge, Firefox, Opera and Samsung Internet on desktop and Android, Safari 16+ on macOS, and Safari on iPhone/iPad 16.4+ when the site is added to the Home Screen.

1. Turn on web push

In the dashboard open App settings → Channels → Website — web push and click Turn on web push. Pushix creates the VAPID keys (no Firebase project needed for the web). Then fill in:

  • Website address — must be https:// (browsers only allow push on secure sites; http://localhost works while testing).
  • Notification icon — a square PNG, 192 px or larger.
  • Asking for permission — how visitors are asked (see Prompts below).
  • Welcome notification — sent right after someone subscribes.

2. Add the service worker file

Browsers need a small file on your own domain. Save this as /pushix-sw.js at the root of your site (the dashboard has a Download button with it ready):

JavaScript
importScripts('https://pushix.in/sdk/pushix-sw-core.js');

It must be served from your site's domain, at the root, so it can handle notifications for every page.

Already have a service worker (for example a PWA)? Don't add a second one. Put the same importScripts line at the top of your existing worker and tell the SDK its path:

JavaScript
Pushix.init({ appId: "YOUR_APP_ID", serviceWorkerPath: "/sw.js" });

3. Add the SDK to your pages

Paste this before </head> on every page:

HTML
<script src="https://pushix.in/sdk/pushix-web.js" defer></script>
<script>
  window.PushixDeferred = window.PushixDeferred || [];
  PushixDeferred.push(async function (Pushix) {
    await Pushix.init({ appId: "YOUR_APP_ID" });
  });
</script>

Visitors now see the prompt you chose, and every browser that allows notifications shows up under Subscribers with platform Web.

Prompts

Set in the dashboard under Asking for permission:

TypeWhat visitors see
Friendly prompt first (recommended)Your own small card with your title, text and buttons. The browser's permission question only appears after they click Allow, so people who aren't interested are never blocked for good. "Not now" hides it for 3 days, then 7.
Browser prompt onlyThe browser's question directly. Firefox and Safari only allow this after a click, so it may not appear there.
Bell buttonA bell in the corner. Clicking it subscribes, unsubscribes, or explains how to unblock.
My own buttonNothing appears by itself. Call Pushix.Notifications.requestPermission() from your own button.

You can also wait a number of seconds, or until the visitor's Nth page view. To show the friendly prompt from your own code (for example after a purchase):

JavaScript
Pushix.Slidedown.promptPush({ force: true });

Users and tags

JavaScript
// Link this browser to your own user id, so your backend can send with include_external_user_ids.
await Pushix.login("10234");
await Pushix.logout();

await Pushix.User.addTag("plan", "gold");
await Pushix.User.addTags({ level: 5, city: "Pune" });
await Pushix.User.removeTag("city");
Pushix.User.getTags();          // tags set from this browser
await Pushix.User.setLanguage("hi");

Pushix.User.PushSubscription.id;       // player id, or null
Pushix.User.PushSubscription.token;    // push endpoint
Pushix.User.PushSubscription.optedIn;  // true when allowed and not opted out
await Pushix.User.PushSubscription.optOut();  // stop pushes, keep the permission
await Pushix.User.PushSubscription.optIn();   // asks for permission if needed

Pushix.User.PushSubscription.addEventListener("change", (e) => {
  console.log(e.previous.optedIn, "→", e.current.optedIn);
});

Notifications

JavaScript
Pushix.Notifications.isPushSupported();   // false on old browsers and iPhone Safari outside the Home Screen
Pushix.Notifications.permission;          // true when granted
Pushix.Notifications.permissionNative;    // "default", "granted" or "denied"
await Pushix.Notifications.requestPermission();

// A notification was clicked (also delivered when the click opened a new tab).
Pushix.Notifications.addEventListener("click", (event) => {
  console.log(event.notification.additionalData, event.result.actionId, event.result.url);
});

// A push arrived while your site is open. The browser always shows it; this is for updating your page.
Pushix.Notifications.addEventListener("foregroundWillDisplay", (event) => {
  console.log(event.notification.title);
});

Pushix.Notifications.addEventListener("permissionChange", (granted) => {});

Clicking a notification opens its Website link (web_url), or the button's link, or your default link. If that page is already open in a tab, Pushix focuses it instead of opening another.

In-app messages

Create them under In-app messages and include Web in their platforms. They show on page load, after some time on the site, or when your code sets a trigger:

JavaScript
Pushix.InAppMessages.addTrigger("cart", "abandoned");
Pushix.InAppMessages.addTriggers({ level: 5 });
Pushix.InAppMessages.removeTrigger("cart");
Pushix.InAppMessages.paused = true;   // e.g. during checkout

Pushix.InAppMessages.addEventListener("click", (e) => {
  if (e.result.actionId === "shop") location.href = "/shop";
});
// also: willDisplay, didDisplay, willDismiss, didDismiss

Visitors who never allow notifications can still see in-app messages: when any web in-app message is live, the SDK registers every visitor (as "In-app only" in Subscribers).

Options

JavaScript
Pushix.init({
  appId: "YOUR_APP_ID",                 // required
  serverUrl: "https://pushix.in", // only if the SDK file is not loaded from www.pushix.in
  serviceWorkerPath: "/pushix-sw.js",  // default
  serviceWorkerParam: { scope: "/" },   // default
  autoPrompt: true,                     // false: never show prompts by themselves
  inAppMessages: true,                  // false: no in-app messages
  promptOptions: { title: "…", message: "…", accept_text: "…" }, // override the dashboard texts
  accentColor: "#2F6BFF",               // colour of the prompt buttons and bell
  debug: false,
});
Pushix.Debug.setLogLevel("debug");     // trace, debug, info, warn, error, none

Troubleshooting

  • Nothing happens, console says the service worker failed — open https://yoursite.com/pushix-sw.js in the browser. It must load from your domain (not a redirect) and contain the importScripts line.
  • "Web push is not set up for this app yet" — click Turn on web push in App settings.
  • The prompt never shows — it waits for the delay and page view count you set, and stays hidden for a few days after "Not now". Test in a private window, or call Pushix.Slidedown.promptPush({ force: true }).
  • Blocked — once a visitor blocks notifications only they can undo it, in the browser's site settings. That's why the friendly prompt is recommended.
  • iPhone — web push only works after the visitor adds your site to the Home Screen and opens it from there (iOS 16.4+).
  • Clicks aren't counted — make sure the snippet and pushix-sw.js load the SDK from https://pushix.in, and that your site isn't blocking requests to it.

Send your first notification

Create an app in Pushix to get your App ID and REST API key, then follow this guide. The free plan needs no card.

Create a free account See pricing