# How to set up push notifications in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans (OneSignal account required)
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
PUSH NOTIFICATIONS — WORKFLOW SUMMARY
=======================================

ONESIGNAL SETUP:
  App ID: your-onesignal-app-id
  REST API Key: your-rest-api-key
  Safari Web ID: web.onesignal.auto.xxxxx

USER DATA TYPE:
  User (add field):
    - onesignal_player_id (text)

WORKFLOW 1: Request permission (after login)
  Event: User is logged in
  Only when: Current User's onesignal_player_id is empty
  Action 1: OneSignal - Prompt to subscribe
  Action 2: OneSignal - Get Player ID
  Action 3: Make changes to Current User
    onesignal_player_id = Result of Step 2

WORKFLOW 2: Send notification on event
  Event: New message created (example)
  Action: OneSignal - Send notification
    Player IDs: recipient User's onesignal_player_id
    Heading: New Message
    Content: You received a message from [sender name]
    URL: https://yourapp.com/messages

BACKEND NOTIFICATION (via API Connector):
  POST https://onesignal.com/api/v1/notifications
  Headers:
    Authorization: Basic YOUR_REST_API_KEY
    Content-Type: application/json
  Body:
    app_id: your-app-id
    include_player_ids: ["player-id-1"]
    headings: {"en": "Notification Title"}
    contents: {"en": "Notification body text"}
    url: "https://yourapp.com/target-page"
```

## Common mistakes

- **Testing push notifications in development mode** — Push notifications require HTTPS and a deployed live URL. They do not work in Bubble's preview mode Fix: Deploy your app to live and test notifications on the live URL.
- **Not storing the user's Player ID** — Without the Player ID, you cannot target notifications to specific users Fix: After permission is granted, immediately call Get Player ID and save it to the User record.
- **Using the wrong OneSignal API key** — OneSignal has multiple keys. Using the wrong one causes authentication failures Fix: 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

## 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).

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-push-notifications-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-push-notifications-in-bubble