# How to integrate push notifications in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans (requires HTTPS deployment)
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

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

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

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

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

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

File: `Workflow summary`

```text
PUSH NOTIFICATIONS — SETUP SUMMARY
====================================

ONESIGNAL CONFIG:
  App ID: from onesignal.com dashboard
  REST API Key: stored securely for backend use only
  Platform: Web Push

BUBBLE PLUGIN:
  OneSignal Push Notifications plugin
  App ID pasted in plugin settings

WORKFLOWS:
  Subscribe: Page is loaded → OneSignal Prompt
  Store ID: After subscribe → Save Player ID on User
  Send: Event trigger → OneSignal Send to Player ID
  Campaign: Scheduled backend → API Connector POST to OneSignal

API CONNECTOR (for segment campaigns):
  POST https://onesignal.com/api/v1/notifications
  Headers: Authorization: Basic REST_API_KEY
  Body: { app_id, included_segments, headings, contents }

USER RECORD:
  + onesignal_player_id (text)
  + notifications_enabled (yes/no)
```

## Common mistakes

- **Testing on HTTP instead of HTTPS** — Push notifications require HTTPS — they will not work on insecure connections Fix: Use your bubbleapps.io URL or a custom domain with SSL enabled
- **Not storing the Player ID on the User record** — Without it you cannot send targeted notifications to specific users Fix: Save the Player ID to a field on User after subscription
- **Sending too many notifications** — Users will permanently block notifications if overwhelmed Fix: 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

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

---

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