Skip to content
All articles
TutorialWeb pushQuickstart 6 min read

How to Add Push Notifications to Your Website in 5 Minutes

A start-to-finish walkthrough: create a project, drop in the ReachBell snippet, host the service worker, and send your first push — all under five minutes.

DotSpheres Engineering

Engineering, ReachBell ·

Most tutorials for web push notifications turn into an afternoon of VAPID keys, service workers, encryption padding, and a half-finished admin UI. This one does not. If your site is on HTTPS and you can paste a script tag, you can be live in roughly five minutes.

Here is the exact path we walk every new ReachBell customer through.

Before you start

  • HTTPS — service workers are blocked on plain HTTP. localhost is fine for testing.
  • Root access to your domain — you need to host a tiny JS file at the root (more on this in step 3).
  • A ReachBell account — the free tier covers your first 1,000 subscribers, no card required.

Step 1 — Create a project (30 seconds)

Sign up, click New project, enter your site URL, and pick a default icon. ReachBell generates a fresh VAPID key pair scoped to your project — those keys are yours and you can export them at any time.

Step 2 — Drop the snippet into your <head> (1 minute)

On the Install screen ReachBell shows a snippet pre-filled with your project ID. Paste it into the <head> of every page that should be able to ask for permission — usually that means your global layout.

<script
  src="https://cdn.reachbell.com/sdk/v1/reachbell.js"
  data-project="prj_8f2a4b1c"
  async
  defer
></script>

That single tag loads the SDK, registers the service worker, and exposes a global ReachBell object you can call from your own code.

Step 3 — Host the service worker file (1 minute)

Service workers can only control pages at or below their own path. Browsers require yours to live at the domain root, so download the file from the install screen and upload it to `https://yoursite.com/reachbell-sw.js`.

  • Static sites — drop the file in `/public` (Next.js, Astro) or the root of your built output.
  • WordPress — upload via SFTP into the site root, or use the official ReachBell plugin and skip this step.
  • Shopify — use the ReachBell app from the App Store; Shopify will not let you write to the storefront root.

Hit `https://yoursite.com/reachbell-sw.js` in a browser. If you see the file contents instead of a 404, you are done with this step.

Step 4 — Trigger the opt-in prompt (1 minute)

By default the SDK does nothing visible — your visitors have to ask for the prompt. The cleanest way is a soft prompt button or a delayed banner. Here is the minimal call:

document.querySelector("#enable-push")
  .addEventListener("click", async () => {
    const sub = await ReachBell.subscribe();
    if (sub.granted) {
      console.log("Subscribed:", sub.token);
    }
  });

You can also call `ReachBell.showSoftPrompt()` to render the styled banner from the dashboard, with all your copy and timing rules already baked in.

Step 5 — Send your first push (1 minute)

Subscribe yourself, then head back to the dashboard. New campaign → Test send to me delivers a notification to the device you just registered. Title, body, image, and a click URL — that is it.

Title: It is alive 🎉
Body: Your first ReachBell push just landed.
URL:   https://yoursite.com/welcome

Click it. The browser fires the click event, the service worker opens your URL, and ReachBell logs the click against the campaign. Real numbers, real funnel, in under five minutes.

What to do next

  1. Style your soft prompt and pick a sensible trigger (second pageview or 30 s on page works well).
  2. Wire one transactional event — order shipped, sign-up confirmation — those land 20%+ CTR and pay for the integration on their own.
  3. Set quiet hours and a per-day frequency cap before your first promotional campaign.
  4. Add UTM defaults so clicks show up attributed in your analytics.

Everything beyond this — segmentation, automations, A/B tests, email and WhatsApp on the same subscriber profile — is in the dashboard the moment you need it. See the full pricing breakdown or jump straight to the Next.js integration guide if you want a framework-specific walk-through.

Put this playbook to work.

Push, email & automations — free for your first 1,000 subscribers.

Start free

Ready to make some noise?

Free forever for your first 1,000 subscribers. Set up in five minutes — no credit card needed.

Start free today