Set up web push notifications in Bubble using the OneSignal plugin. This covers creating a OneSignal account, installing and configuring the plugin, requesting user permission, sending test notifications, and triggering notifications from workflows based on app events like new messages or order updates.
Overview: Setting Up Push Notifications in Bubble
This tutorial walks you through adding web push notifications to your Bubble app using OneSignal. You will create a OneSignal account, install and configure the Bubble plugin, request user permission, and trigger notifications from your app's workflows.
Prerequisites
- A Bubble account with an existing app on a paid plan
- A OneSignal account (free tier available)
- Your app deployed to a live URL (push requires HTTPS)
- Basic understanding of Bubble plugins and workflows
Step-by-step guide
Create and configure OneSignal
Create and configure OneSignal
Go to onesignal.com and create a free account. Create a new app and select Web Push as the platform. Enter your Bubble app's live URL as the site URL. OneSignal generates an App ID and API Key. You will also get a Safari Web ID if you want to support Safari. Note all three values — you will need them in the next step.
Expected result: A OneSignal app is configured for web push with your Bubble app's URL.
Install and configure the OneSignal plugin in Bubble
Install and configure the OneSignal plugin in Bubble
Go to the Plugins tab in your Bubble editor. Click Add plugins and search for OneSignal. Install the plugin. In the plugin settings, paste your OneSignal App ID, API Key (REST API key), and Safari Web ID. The plugin adds OneSignal's JavaScript to your app automatically.
Pro tip: Use the REST API key (found in Settings > Keys & IDs in OneSignal), not the User Auth Key.
Expected result: The OneSignal plugin is installed and configured with your credentials.
Request user permission for notifications
Request user permission for notifications
On your app's main page (or after login), add a workflow that prompts the user to allow notifications. Use the OneSignal plugin action: OneSignal Prompt to subscribe. This shows the browser's native permission dialog. If the user accepts, their browser is registered with OneSignal. Store the user's OneSignal Player ID on their User record by using the OneSignal Get Player ID action after permission is granted.
Expected result: Users see a permission prompt and their Player ID is stored in the database when they accept.
Send notifications from workflows
Send notifications from workflows
In any workflow where you want to trigger a notification (e.g., new message received, order status changed), add the OneSignal action: Send notification. Set the recipient by Player ID (from the target user's stored Player ID), the heading, and the content. You can also include a URL that opens when the user clicks the notification. For backend workflows, use the OneSignal REST API via the API Connector to send notifications server-side.
Expected result: Notifications are sent to specific users when triggered by app events.
Test and refine notifications
Test and refine notifications
Open your deployed app in a browser and accept the notification permission. Trigger a workflow that sends a notification to yourself. Verify the notification appears in your browser. Check the OneSignal dashboard for delivery statistics. Refine the notification content, add action buttons, or customize the icon. For complex notification systems with segmentation and scheduling, consider working with RapidDev.
Expected result: Push notifications are delivered successfully and appear in the browser.
Complete working example
1PUSH NOTIFICATIONS — WORKFLOW SUMMARY2=======================================34ONESIGNAL SETUP:5 App ID: your-onesignal-app-id6 REST API Key: your-rest-api-key7 Safari Web ID: web.onesignal.auto.xxxxx89USER DATA TYPE:10 User (add field):11 - onesignal_player_id (text)1213WORKFLOW 1: Request permission (after login)14 Event: User is logged in15 Only when: Current User's onesignal_player_id is empty16 Action 1: OneSignal - Prompt to subscribe17 Action 2: OneSignal - Get Player ID18 Action 3: Make changes to Current User19 onesignal_player_id = Result of Step 22021WORKFLOW 2: Send notification on event22 Event: New message created (example)23 Action: OneSignal - Send notification24 Player IDs: recipient User's onesignal_player_id25 Heading: New Message26 Content: You received a message from [sender name]27 URL: https://yourapp.com/messages2829BACKEND NOTIFICATION (via API Connector):30 POST https://onesignal.com/api/v1/notifications31 Headers:32 Authorization: Basic YOUR_REST_API_KEY33 Content-Type: application/json34 Body:35 app_id: your-app-id36 include_player_ids: ["player-id-1"]37 headings: {"en": "Notification Title"}38 contents: {"en": "Notification body text"}39 url: "https://yourapp.com/target-page"Common mistakes when setting up push notifications in Bubble.io: Step-by-Step Guide
Why it's a problem: Testing push notifications in development mode
How to avoid: Deploy your app to live and test notifications on the live URL.
Why it's a problem: Not storing the user's Player ID
How to avoid: After permission is granted, immediately call Get Player ID and save it to the User record.
Why it's a problem: Using the wrong OneSignal API key
How to avoid: Use the REST API Key from OneSignal's Settings > Keys & IDs, not the User Auth Key.
Best practices
- Request notification permission after the user has logged in, not on first page load
- Store the OneSignal Player ID on the User record for targeted notifications
- Include a relevant URL in notifications so clicking opens the right page
- Test notifications on the deployed live URL, not in preview mode
- Use OneSignal's dashboard to monitor delivery rates and engagement
- Let users manage their notification preferences in app settings
- Send notifications sparingly to avoid user opt-outs
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app and want to add web push notifications using OneSignal. How do I configure OneSignal, install the Bubble plugin, request permission, and send targeted notifications from workflows?
Set up push notifications using OneSignal. Install the plugin, configure it with my OneSignal credentials, prompt users for permission after login, store their Player ID, and send notifications when new messages arrive.
Frequently asked questions
Are push notifications free?
OneSignal's free tier supports unlimited mobile push and up to 10,000 web push subscribers. This is sufficient for most Bubble apps.
Do push notifications work on mobile browsers?
Yes on Android Chrome and Firefox. iOS Safari added web push support in iOS 16.4. Users must add the site to their home screen first.
Can I send notifications to all users at once?
Yes. Use OneSignal's Segments feature to create an All Users segment and send broadcast notifications from the OneSignal dashboard or via the API.
How do I let users opt out?
Add a notification preferences page with a toggle. When disabled, remove their Player ID from your database so they are not targeted by workflows.
Can RapidDev help with notification systems?
Yes. RapidDev specializes in Bubble development and can build advanced notification systems with segmentation, scheduling, A/B testing, and multi-channel delivery (push, email, SMS).
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation