Web Push Notifications for WordPress: A Complete Setup Guide

Web push notifications let you reach visitors directly on their desktop or Android device — even after they've left your site. No email address, no app install. For a WordPress blog or store, it's one of the fastest ways to bring readers back when you publish something new.

This guide walks through the whole setup: adding the SDK snippet, registering the service worker, showing an opt-in prompt, and sending a notification automatically on every new post. You don't need to be a developer to follow along.

How web push actually works

Before the steps, here's the 30-second model so the setup makes sense:

• A small JavaScript SDK loads on your site and asks the visitor for permission.
• A service worker — a background script the browser keeps running — receives messages even when your tab is closed.
• The browser hands you a subscription (an encrypted endpoint) tied to that device.
• Your push provider signs each message with VAPID keys so browsers trust it came from you.

You don't have to manage VAPID keys or run a server yourself. A push SaaS like relaybell handles the signing and delivery — you just add a snippet and press send.

Step 1: Add the SDK snippet

Sign up for a web push provider and create a site. You'll get a short <script> snippet that loads the SDK. In WordPress, the cleanest way to add it across every page is via your theme's header.

The simplest no-code path:

• Install a "header and footer scripts" helper plugin (several free ones exist), or
• Open Appearance → Theme File Editor, and add the snippet to header.php just before </head>.

If you use a child theme (recommended), you can also hook it in via functions.php:

add_action('wp_head', function () {
  echo '<script src="https://cdn.relaybell.com/sdk.js" data-site="YOUR_SITE_ID" async></script>';
});

Using a child theme means a theme update won't wipe your change.

Step 2: Install the service worker

The service worker is a single JavaScript file that must live at your domain root — for example https://yoursite.com/sw.js. Browsers only allow a worker to control pages at or below its own path, so placing it at the root lets it cover your whole site.

Your provider gives you this file. Upload it to your WordPress root directory (the same folder as wp-config.php) using your host's File Manager or SFTP. Then confirm it loads by visiting https://yoursite.com/sw.js — you should see code, not a 404.

A couple of things that trip people up:

• HTTPS is required. Service workers and web push only work on secure sites. Most hosts include free SSL now.
• Caching plugins sometimes block or rewrite sw.js. Add it to your cache exclusions if the file won't load correctly.

Step 3: Configure the opt-in prompt

This is where most of your results are won or lost. The native browser permission dialog is a one-shot decision — if someone clicks "Block," you can't ask again. So treat it carefully.

Best practices for the prompt:

• Use a soft pre-prompt first ("Want new-post alerts? Yes / Not now"). Only trigger the real browser dialog after a Yes.
• Ask in context, not on the first second of the first visit. Trigger it after a few seconds or on scroll.
• Say what they'll get and how often — "1–2 alerts a week when we publish."

Most providers, relaybell included, give you a visual editor for the prompt text, timing, and delay — no code needed. Typical opt-in rates land in the low single digits to around 10% of visitors, depending on how relevant your offer is.

Step 4: Send automatically on new posts

Now the payoff: notify every subscriber the moment you hit Publish.

Two common approaches:

• Plugin integration. Many push providers offer a WordPress plugin that fires a notification on the publish_post event. Install it, paste your API key, and you're done.
• Webhook or REST. If you prefer, hook WordPress's transition_post_status and call your provider's send API with the post title, excerpt, and URL.

A minimal example using functions.php:

add_action('publish_post', function ($post_id) {
  $post = get_post($post_id);
  wp_remote_post('https://api.relaybell.com/v1/send', [
    'headers' => ['Authorization' => 'Bearer YOUR_API_KEY'],
    'body' => json_encode([
      'title' => get_the_title($post),
      'body'  => wp_trim_words($post->post_content, 20),
      'url'   => get_permalink($post),
    ]),
  ]);
}, 10, 1);

Tips to get clicks, not blocks

• Segment when you can — send food posts to food readers, deals to shoppers. Targeted sends out-perform blasts on click-through.
• Keep titles short and specific. Web push CTRs commonly run a few percent, but a clear, timely headline beats a vague one every time.
• Don't over-send. One or two pushes a week keeps unsubscribes low.
• Always include a deep link straight to the new post, not your homepage.

That's the full loop: snippet, service worker, opt-in, and automated sends. Once it's wired up, every new post quietly pulls returning readers back — for free.

Ready to try web push? Get started with relaybell — free to deliver, set up in minutes.