Add browser push notifications to your Bubble app using the OneSignal plugin. This tutorial covers installing and configuring OneSignal, requesting user permission, sending targeted notifications from workflows, segmenting users, and scheduling automated campaigns — all without building a native mobile app.
Overview: Push Notifications in Bubble
Push notifications re-engage users even when they are not on your site. This tutorial integrates OneSignal with Bubble for browser-based notifications — real-time alerts, reminders, and messages — without needing a native mobile app.
Prerequisites
- A Bubble account with a deployed app on HTTPS
- A OneSignal account (free at onesignal.com)
- Basic understanding of Plugins and Workflows
Step-by-step guide
Create a OneSignal app and get credentials
Create a OneSignal app and get credentials
Sign up at onesignal.com and create a new app. Select Web as the platform. Enter your Bubble app URL. OneSignal generates an App ID and REST API Key. Copy both.
Expected result: OneSignal app created with App ID and API Key.
Install and configure the OneSignal plugin
Install and configure the OneSignal plugin
Go to Plugins → Add plugins → search 'OneSignal Push Notifications' and install. Paste your App ID in the plugin settings. The plugin adds the OneSignal SDK to your pages automatically.
Pro tip: Store the REST API Key securely — use it only in backend workflows, never in frontend actions.
Expected result: OneSignal plugin installed and configured.
Prompt users to subscribe
Prompt users to subscribe
On your main page after login, add a workflow: Page is loaded → OneSignal: Prompt for push notifications. Or add a button 'Enable Notifications' for less intrusive prompting. After subscription, save the OneSignal Player ID on the User record for targeting.
Expected result: Users see a permission prompt and can subscribe to notifications.
Send notifications from workflows
Send notifications from workflows
When an event occurs (new message, order update), add a workflow action: OneSignal: Send push notification. Target the recipient's Player ID stored on their User record. Set title and message dynamically from the event data.
Expected result: Users receive push notifications triggered by in-app events.
Schedule automated campaigns
Schedule automated campaigns
Use Bubble's Schedule API Workflow to trigger a backend workflow at a specific time. That backend workflow calls the OneSignal API via API Connector to send notifications to user segments. Create segments in OneSignal dashboard based on behavior (inactive 7 days, new users, etc.).
Expected result: Automated campaigns reach targeted segments on schedule.
Complete working example
1PUSH NOTIFICATIONS — SETUP SUMMARY2====================================34ONESIGNAL CONFIG:5 App ID: from onesignal.com dashboard6 REST API Key: stored securely for backend use only7 Platform: Web Push89BUBBLE PLUGIN:10 OneSignal Push Notifications plugin11 App ID pasted in plugin settings1213WORKFLOWS:14 Subscribe: Page is loaded → OneSignal Prompt15 Store ID: After subscribe → Save Player ID on User16 Send: Event trigger → OneSignal Send to Player ID17 Campaign: Scheduled backend → API Connector POST to OneSignal1819API CONNECTOR (for segment campaigns):20 POST https://onesignal.com/api/v1/notifications21 Headers: Authorization: Basic REST_API_KEY22 Body: { app_id, included_segments, headings, contents }2324USER RECORD:25 + onesignal_player_id (text)26 + notifications_enabled (yes/no)Common mistakes when integrating push notifications in Bubble
Why it's a problem: Testing on HTTP instead of HTTPS
How to avoid: Use your bubbleapps.io URL or a custom domain with SSL enabled
Why it's a problem: Not storing the Player ID on the User record
How to avoid: Save the Player ID to a field on User after subscription
Why it's a problem: Sending too many notifications
How to avoid: Limit to important events and give users preference controls
Best practices
- Request permission after the user has experienced value, not on first visit
- Store Player IDs on User records for targeted sending
- Give users a preferences page to control notification types
- Keep REST API Key in backend workflows only
- Limit frequency to avoid fatigue and unsubscribes
- Include deep links that take users to the relevant page
- Test in development before deploying to live
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add browser push notifications to my Bubble.io app using OneSignal. I need subscription prompts, event-triggered notifications, and scheduled campaigns. Can you outline the setup?
Set up push notifications using OneSignal. Install the plugin, prompt users to subscribe on login, and send notifications when new messages or events are created.
Frequently asked questions
Do push notifications work on iPhones?
iOS Safari supports web push since iOS 16.4+, but the user must add your site to their Home Screen first.
Is OneSignal free?
Yes for up to 10,000 web push subscribers. Paid plans start at $9/month for more features.
Can I target specific users?
Yes. Use the Player ID stored on their User record to send notifications to individuals.
What if a user blocks notifications?
You cannot re-prompt them. They must manually re-enable in browser settings.
Can I schedule future notifications?
Yes. Use Schedule API Workflow to trigger a backend workflow that sends via OneSignal at a future time.
Can RapidDev set up notifications?
Yes. RapidDev implements push, email, SMS, and in-app notification systems with preference management.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation