How to Set Up Push Notifications for Your Website (2026 Complete Guide)

Web push notifications deliver real-time messages directly to a subscriber’s browser or desktop, even when they are not on your site. For marketers in 2026, they remain one of the highest-ROI re-engagement channels: average opt-in rates sit between 5% and 15%, and click-through rates consistently beat email by 2–3x. Yet most teams still skip them because the setup looks intimidating. This guide removes that barrier.

Below you will find a precise, ten-step walkthrough covering every technical and strategic requirement — prerequisites, service worker registration, opt-in UX, segmentation, message composition, A/B testing, scheduling, and performance measurement. Every step is self-contained so you can jump directly to the phase you are on.

Prerequisites Before You Start

Two technical requirements are non-negotiable for the Web Push API to function:

• HTTPS — browsers block push subscription requests on insecure origins. Your entire domain must serve content over TLS. Use Let’s Encrypt if you do not already have a certificate.
• A registered service worker — push events are received by a service worker script running in the background, not by your page JavaScript. The worker file must be served from your domain root (e.g., /sw.js), not a subdirectory.

Time estimate: 15 minutes if HTTPS is already active. Difficulty: Beginner–Intermediate.

Step 1 — Choose a Push Notification Provider

A push provider handles VAPID key management, subscription storage, delivery queuing, and analytics so you do not have to build that infrastructure yourself.

1. Compare providers on browser coverage (Chrome, Firefox, Safari, Edge), pricing per subscriber, and automation features.
2. Evaluate whether the provider offers a managed service worker — this eliminates the manual registration step for non-technical teams.
3. Confirm the provider supports VAPID (Voluntary Application Server Identification), the current W3C standard. Avoid legacy GCM-only services.
4. For teams already using email automation, choose a provider that integrates with your existing stack. CampaignOS includes native web push alongside email and multi-channel workflows — no separate tool required.

Expected outcome: You have API credentials (VAPID public key, private key, and application server key) ready for the next step.

Step 2 — Set Up Your Service Worker

The service worker is a JavaScript file that runs independently of your page and handles incoming push events.

1. Create sw.js in your site root. At minimum it must contain a push event listener and a notificationclick handler:

   self.addEventListener('push', event => {
     const data = event.data.json();
     event.waitUntil(
       self.registration.showNotification(data.title, {
         body: data.body,
         icon: data.icon,
         data: { url: data.url }
       })
     );
   });
   
   self.addEventListener('notificationclick', event => {
     event.notification.close();
     event.waitUntil(clients.openWindow(event.notification.data.url));
   });

2. Register the worker in your main JavaScript:

   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js');
   }

3. Open DevTools → Application → Service Workers and confirm status shows activated and running.
4. If you use a managed provider (including CampaignOS), paste their SDK snippet instead — the service worker is injected automatically.

Expected outcome: Service worker is active in the browser and ready to receive push events.

Step 3 — Implement the Opt-In Prompt

Browser permission prompts cannot be styled — they are native UI. Your job is to control when and where they appear to maximize opt-in rate.

1. Do not trigger the native permission dialog on page load. Show a custom pre-permission UI first (“Get notified when we publish new guides”) and only request permission after the user clicks a clear affirmative button.
2. Call Notification.requestPermission() inside a user gesture (button click). Browsers block this API when called outside a gesture in Chrome 80+.
3. Handle all three outcomes: granted (subscribe), denied (hide prompts permanently for this session), default (remind later).
4. On granted, call pushManager.subscribe() with your VAPID public key converted to a Uint8Array, then POST the resulting subscription object to your provider’s API.
5. Test on mobile Chrome and Safari 16.4+ (Safari added web push support in 2023 — confirm your provider supports it).

Expected outcome: Visitors who click “Allow” are subscribed and appear in your provider dashboard within seconds.

Step 4 — Segment Your Subscribers

Sending the same notification to every subscriber is the fastest way to drive unsubscribes. Segment before your first campaign.

1. Pass subscriber attributes at subscription time: page URL, UTM source, logged-in status, and plan tier if applicable.
2. Create behavioral segments: last-visited category, purchase history, inactivity threshold (e.g., no site visit in 14 days).
3. Build at minimum three default segments: New subscribers (0–7 days), Engaged (clicked at least one notification in 30 days), At-risk (no click in 30+ days).
4. In CampaignOS, open the Audiences panel and apply the same segmentation logic you use for email — web push subscribers share the same contact record.

Expected outcome: At least three named segments ready before you send campaign #1.

Step 5 — Compose Your First Push Message

Web push notifications have strict character limits and no HTML formatting. Every word must earn its place.

1. Title: 50 characters maximum (browsers truncate beyond this on most OSes). Lead with the value or action, not your brand name.
2. Body: 120 characters maximum. Complete the promise made in the title — don’t repeat it.
3. Icon: 192×192px PNG, your logo or a relevant product image. Required for desktop Chrome notifications.
4. Badge: 72×72px monochrome PNG shown in Android status bars. Use a simplified icon.
5. Action buttons: Add up to two CTA buttons (e.g., “Read Now” / “Save for Later”) using the actions array — supported on Android Chrome and desktop.
6. Landing URL: Use UTM-tagged URLs (?utm_source=web-push&utm_medium=push&utm_campaign=...) so you can isolate push traffic in analytics.

Expected outcome: A ready-to-send notification with title, body, icon, and a UTM-tagged destination URL.

Step 6 — A/B Test Subject Lines and CTAs

Notification titles function as subject lines. Small wording changes produce 20–40% CTR differences.

1. Split your target segment 50/50 at send time. Most providers and CampaignOS support native A/B splits on push campaigns.
2. Test one variable per campaign: title framing (question vs. statement), emoji presence, urgency language (“ends today” vs. neutral), or CTA button label.
3. Run the test for at least 4 hours or until each variant has 500+ impressions before declaring a winner — push delivery is fast but spread unevenly across time zones.
4. Persist winners in a naming convention for future reference (e.g., [WIN] Question format — 34% CTR).
5. Do not A/B test icon or badge images unless you have 10,000+ subscribers — the sample sizes needed to reach significance are prohibitive at smaller list sizes.

Expected outcome: Documented winning patterns to apply to all future push campaigns.

Step 7 — Schedule Your Campaigns

Push notifications land immediately in the user’s notification tray. Timing relative to the subscriber’s local time zone is critical.

1. Use your provider’s time-zone-aware delivery (“intelligent delivery” or “send in subscriber’s local time”). Never blast at a fixed UTC time — this causes 3 AM deliveries for a significant portion of global lists.
2. Test two primary windows: 9–10 AM (morning context switch) and 12–1 PM (lunch browsing). E-commerce lists often perform better at 6–8 PM.
3. Set a Time-to-Live (TTL) of 24 hours maximum for time-sensitive content. Notifications undelivered within TTL are dropped rather than arriving days late when the subscriber comes back online.
4. In CampaignOS, connect the push campaign to your existing automation workflow — trigger a notification when a subscriber has not opened your last three emails, for example.

Expected outcome: Scheduled campaign with per-subscriber timezone delivery enabled and TTL configured.

Step 8 — Measure CTR and Optimize

Three metrics determine whether your push channel is healthy: delivery rate, CTR, and unsubscribe rate.

1. Delivery rate (target: 85%+). Below 85% indicates subscriber churn, list staleness, or browser permission revocations. Audit monthly.
2. CTR (target: 5–15% for engaged segments). Below 3% is a signal to revisit segmentation or message relevance.
3. Unsubscribe rate per campaign (target: under 0.5%). Spikes above 1% indicate poor frequency or irrelevant content for that segment.
4. Pull UTM data from Google Analytics 4 or your analytics platform to attribute revenue and goal completions to push traffic specifically.
5. Review metrics weekly for the first month, then monthly once the channel is stable. Pause campaigns with CTR under 2% and rework the segment or copy before resuming.

Expected outcome: A live dashboard tracking delivery rate, CTR, and unsubscribe rate with weekly review cadence.

Step 9 — Add Web Push via CampaignOS

If you are already using CampaignOS for email or multi-channel automation, enabling web push takes under ten minutes — no separate provider account needed.

1. In your CampaignOS dashboard, navigate to Channels → Web Push and click Enable.
2. Copy the provided snippet and paste it before the closing </body> tag on your site. CampaignOS injects and manages the service worker automatically.
3. Configure your opt-in prompt text, delay trigger (default: 30 seconds), and brand icon in the Prompt Settings panel.
4. Subscribers are automatically added to your CampaignOS contact database with the same segmentation tags as your email audience — no manual list sync required.
5. Build cross-channel workflows: trigger an email if the push notification was not clicked within 2 hours, or suppress the email if push already converted the subscriber.
6. Use the built-in Push Analytics tab to track delivery, CTR, and unsubscribe rate alongside email performance in a single view.

Step 10 — Maintain Subscriber List Health

Web push lists decay faster than email — browser uninstalls, permission resets, and device changes silently invalidate subscriptions.

1. Run a monthly reachability audit: identify subscriptions that have not received a successful delivery in 60 days and remove them from active segments.
2. Set up a re-permission campaign for at-risk subscribers: send a final notification offering a clear value proposition and asking them to stay subscribed. Track who clicks.
3. Never buy push subscriber lists — they violate browser API terms and produce near-zero delivery rates.
4. Respect GDPR and similar regulations: include a clear unsubscribe mechanism and document consent alongside your email consent records.
5. Review your push frequency cap quarterly. Most audiences tolerate 2–4 notifications per week; beyond that, unsubscribe rates climb steeply.

Expected outcome: A sustainably growing subscriber list with delivery rates remaining above 85% long-term.

Frequently Asked Questions

Related Reading

• How to Build a Marketing Workflow Automation — automate push triggers alongside email and SMS in a unified workflow.
• Email Marketing Best Practices 2026 — pair push with email for maximum re-engagement across channels.
• Marketing Analytics Dashboard: What to Track and How to Act on It — measure your push CTR alongside all other channel metrics in one view.