Complete step-by-step guide to set up web push notifications for your website using OneSignal. Learn how to integrate the SDK, configure prompts, and start sending push notifications to engage your users.
Web push notifications are a powerful way to re-engage users and deliver important information when they’re not actively browsing your website. They support rich content including text, images, action buttons, and can help boost user retention and engagement.
Web push notifications help you reach users even when they're not on your site
For web push to work:
Important limitations:
This guide walks through every step—from SDK setup to sending personalized push messages—to help you successfully implement OneSignal push notifications.
Before you can send web push notifications, your developer needs to complete the following steps.
Not a developer? See Manage Team Members to invite a teammate with developer access to your OneSignal project.
Complete guide to installing and configuring the OneSignal Web SDK, including localhost testing and permission prompts.
Quickly integrate push notifications on WordPress using our official plugin—no coding required.
Follow Apple-specific steps to enable web push on iPhones and iPads running iOS 16.4+.
Learn how to transition from another web push provider and retain your subscribers.
Set up your website for web push in the OneSignal dashboard under Settings > Push & In-App > Web.
Activate the web platform in your OneSignal settings
Select the integration type that matches your site:
Choose your integration type based on your website setup
Recommended - Configure prompts, welcome notification, and service worker setup directly in the dashboard—no backend coding required.
Use the official OneSignal plugin to easily set up push on your WordPress site with full UI-based configuration.
Full control setup for developers who want to customize everything via code.
Site details:
www
mismatch)256x256px
image shown in notifications (if unset, a default bell icon is used)An important concept with web push is that if users clear their browser data, they will stop receiving push notifications. Enable this option to automatically re-subscribe users when they return to your site. See Subscriptions for more details.
Web settings in the OneSignal dashboard
Prompting users for notification permission is critical for opt-in. You can customize the behavior and appearance of permission requests based on your setup.
Best practices:
Compare different prompt types (slidedown, category-based, native, subscription bell, and more) and learn when to use each.
Learn how to programmatically control when and how prompts are shown using the SDK.
You can enable an optional confirmation push that’s sent immediately after a user subscribes. Typical and Wordpress integration can set this in the dashboard.
Welcome notifications confirm successful subscription and demonstrate value
Custom Code integration uses the welcomeNotification
object in the OneSignal.init
function. See Web SDK reference for details.
Why send welcome notifications?
When a user subscribes to push, OneSignal automatically creates a unique subscription tied to their browser/device.
Web push subscriptions are created when users:
Important notes:
View and manage your subscribers in the Audience section
Learn how to manage users, assign External IDs, and track their activity.
Understand how subscriptions work across browsers and devices.
Group users into segments to target based on behavior, device, and more.
Apple added web push support for iPhones and iPads running iOS 16.4+ but with stricter requirements:
Step-by-step instructions to enable iOS support, including service worker and manifest setup.
Tips for encouraging users to install your site so they can receive iOS web push.
Crafting a good push notification involves more than writing text. Design matters. Learn what elements are customizable and how to use them effectively.
Web push notification anatomy - customize elements 1-6, while 7-9 are controlled by the browser
50
characters)120
characters)256x256px
PNG or JPG)Full overview of push notification creation, options, and delivery behavior.
Save time with reusable templates for consistent messaging.
You can customize push messages to match each user’s preferences and language.
Insert dynamic variables (like name or preferences) to tailor messages.
Automatically deliver messages in each user’s preferred language.
Control how your push messages behave after sending—when they appear, how long they’re stored, and how users interact.
Control notification delivery speed.
Set limits to prevent over-sending notifications to the same user.
Define how long push services retain messages when the device is offline.
Use topics to group, replace, or suppress duplicate notifications.
Control what happens when a user clicks a notification.
By default: Clicking opens your homepage.
Customize it:
?_osp=do_not_open
Route users to relevant content or pages using deep links and tracking.
Let users take immediate actions from your notification.
Listen for click events and trigger in-app behavior with custom code.
Before launching, thoroughly test your web push implementation across devices and browsers.
Measure and improve notification performance:
View delivery, open rate, and click-through metrics for each message.
Explore engagement and user behavior metrics across channels.
Troubleshooting checklist if messages aren’t appearing.
Fix image rendering issues across different browsers.
Congratulations! Your web push notification setup is complete.
Next steps:
Complete step-by-step guide to set up web push notifications for your website using OneSignal. Learn how to integrate the SDK, configure prompts, and start sending push notifications to engage your users.
Web push notifications are a powerful way to re-engage users and deliver important information when they’re not actively browsing your website. They support rich content including text, images, action buttons, and can help boost user retention and engagement.
Web push notifications help you reach users even when they're not on your site
For web push to work:
Important limitations:
This guide walks through every step—from SDK setup to sending personalized push messages—to help you successfully implement OneSignal push notifications.
Before you can send web push notifications, your developer needs to complete the following steps.
Not a developer? See Manage Team Members to invite a teammate with developer access to your OneSignal project.
Complete guide to installing and configuring the OneSignal Web SDK, including localhost testing and permission prompts.
Quickly integrate push notifications on WordPress using our official plugin—no coding required.
Follow Apple-specific steps to enable web push on iPhones and iPads running iOS 16.4+.
Learn how to transition from another web push provider and retain your subscribers.
Set up your website for web push in the OneSignal dashboard under Settings > Push & In-App > Web.
Activate the web platform in your OneSignal settings
Select the integration type that matches your site:
Choose your integration type based on your website setup
Recommended - Configure prompts, welcome notification, and service worker setup directly in the dashboard—no backend coding required.
Use the official OneSignal plugin to easily set up push on your WordPress site with full UI-based configuration.
Full control setup for developers who want to customize everything via code.
Site details:
www
mismatch)256x256px
image shown in notifications (if unset, a default bell icon is used)An important concept with web push is that if users clear their browser data, they will stop receiving push notifications. Enable this option to automatically re-subscribe users when they return to your site. See Subscriptions for more details.
Web settings in the OneSignal dashboard
Prompting users for notification permission is critical for opt-in. You can customize the behavior and appearance of permission requests based on your setup.
Best practices:
Compare different prompt types (slidedown, category-based, native, subscription bell, and more) and learn when to use each.
Learn how to programmatically control when and how prompts are shown using the SDK.
You can enable an optional confirmation push that’s sent immediately after a user subscribes. Typical and Wordpress integration can set this in the dashboard.
Welcome notifications confirm successful subscription and demonstrate value
Custom Code integration uses the welcomeNotification
object in the OneSignal.init
function. See Web SDK reference for details.
Why send welcome notifications?
When a user subscribes to push, OneSignal automatically creates a unique subscription tied to their browser/device.
Web push subscriptions are created when users:
Important notes:
View and manage your subscribers in the Audience section
Learn how to manage users, assign External IDs, and track their activity.
Understand how subscriptions work across browsers and devices.
Group users into segments to target based on behavior, device, and more.
Apple added web push support for iPhones and iPads running iOS 16.4+ but with stricter requirements:
Step-by-step instructions to enable iOS support, including service worker and manifest setup.
Tips for encouraging users to install your site so they can receive iOS web push.
Crafting a good push notification involves more than writing text. Design matters. Learn what elements are customizable and how to use them effectively.
Web push notification anatomy - customize elements 1-6, while 7-9 are controlled by the browser
50
characters)120
characters)256x256px
PNG or JPG)Full overview of push notification creation, options, and delivery behavior.
Save time with reusable templates for consistent messaging.
You can customize push messages to match each user’s preferences and language.
Insert dynamic variables (like name or preferences) to tailor messages.
Automatically deliver messages in each user’s preferred language.
Control how your push messages behave after sending—when they appear, how long they’re stored, and how users interact.
Control notification delivery speed.
Set limits to prevent over-sending notifications to the same user.
Define how long push services retain messages when the device is offline.
Use topics to group, replace, or suppress duplicate notifications.
Control what happens when a user clicks a notification.
By default: Clicking opens your homepage.
Customize it:
?_osp=do_not_open
Route users to relevant content or pages using deep links and tracking.
Let users take immediate actions from your notification.
Listen for click events and trigger in-app behavior with custom code.
Before launching, thoroughly test your web push implementation across devices and browsers.
Measure and improve notification performance:
View delivery, open rate, and click-through metrics for each message.
Explore engagement and user behavior metrics across channels.
Troubleshooting checklist if messages aren’t appearing.
Fix image rendering issues across different browsers.
Congratulations! Your web push notification setup is complete.
Next steps: