Natively Docs
Join our community 🔥
  • 👩‍🚀Getting Started
    • What is Natively?
    • Why Natively?
    • FAQ
    • Create Your First App
  • 🚀Natively Platform
    • 🚉Releases
    • 🖌️Appearance
      • 😼App Icon
      • 📱Loading Screen
      • 📱Error Screen
      • 🎨Style
    • 🎬Preview
    • ⭐Features
      • 🛳️Bottom Bar
      • 🚇Deeplinks
        • 🔥Firebase
        • 🔗Universal Links
        • 🌱Branch.io
      • 📍Geolocation
      • 🔔Notifications
        • 📲OneSignal Notifications
        • 🔥Firebase Notifications (Advanced)
      • 📒Contacts
      • 👩‍🎨Social Auth
        • 🍏Sign In with Apple
      • 💟HealthKit
      • 💰Purchases
      • 🤑Admob
      • 💳NFC
      • 📷Camera
      • 📂Photo Library
      • 🎤Microphone
      • 📈Analytics
        • 🕊️AppsFlyer
        • 😛Facebook
    • 🚚Publish
      • 🍏iOS App
      • 🤖Android App
    • ⚙️Settings
    • 🙈Subscription Plans
  • Guides
    • 🧋Integration (Native Features)
      • 🏅How to get started?
      • ℹ️Device
      • ℹ️Browser Info
      • 🛳️Bottom Bar
      • ✂️Clipboard
      • 🚦Push Notifications - OneSignal
      • 🚦Push Notifications - Firebase (Advanced)
      • 📍Geolocation
      • 📦App Storage
      • 🗝️Biometrics & Credentials
      • 📧Native SMS/Email
      • 📅Native Date Picker
      • 📸Native Camera
      • 🎙️Native Audio Recorder
      • 🈁Native Scanner (QR/Barcode)
      • 📔Contacts
      • 🍏Apple Sign In
      • ❤️HealthKit
      • 💸In-App Purchases
      • 🤑Admob
      • 💳NFC
      • 🥑Show Toast/Banner
      • ⏳Show/Hide Loading Screen
      • 🥑Haptic Feedback
      • 🖼️Share Media/Files
      • 📱Open an external App/URL
      • ✍️Request User's review
      • ↔️getInsets
      • 🎨Control Style & Colors
    • 🔍Troubleshooting
    • 🐈Setup RevenueCat App
    • 🚑Setup Admob App
    • 🚥Setup One Signal App
    • 🧑‍🤝‍🧑Setup website Universal Links (Deeplinks)
    • 🍕Testing & Submitting your app
    • 🔑Generate iOS Push Key (NEW)
    • 🔑Generate iOS Push Certificate (Legacy)
    • 🤝Affiliate program
    • 📕For Partners: Natively Brand Book.
Powered by GitBook
On this page
  • 🧋 Bubble.io Plugin
  • 🛠 JavaScript SDK
  • Create Android Channel ID
  • Recommendations

Was this helpful?

  1. Guides
  2. Integration (Native Features)

Push Notifications - OneSignal

PreviousClipboardNextPush Notifications - Firebase (Advanced)

Last updated 19 days ago

Was this helpful?

We are using Service to provide a Push Notification functionality.

For now, we're not supporting Rich Push Notifications (with actions & images) This will be added soon.

🧋 Bubble.io Plugin

[Element] Natively - Push Notifications

Initialization:

Element Events:

  • Notification permissions authorized - get called when the user clicks Allow on permission alert.

  • Notification permissions denied - get called when the user clicks Decline on permission alert.

  • Notification permissions status updated - get called when permission status was updated because of the user's action.

Element States:

  • Permission Status - Yes or No.

You will need the OneSignal PlayerId value to send a push notification. Take this value on the user's login and store it in a database. (For example, you can add a property to the user named player_id).

In the OneSignal dashboard, the PlayerId is labeled as the Subscription ID.

When testing push notifications using the Natively Preview app, you won't see new subscriptions appear in your OneSignal dashboard. This is because the Preview app uses its own keys.

Element Actions:

  • Request the user's push notification permission - displays a systems popup with your Notification Permissions Text

    • Open Settings - If yes and user's previously denied notification permission. A native alert will be shown with the option to open the app settings and turn on permission.

  • Get the user's OneSignal PlayerId - Reload the user's OneSignal PlayerId

  • Get the user's push notification permission status

How to send Push Notifications with Bubble Plugin?

We do not recommend sending the Push Notification on the client side, better to use backend workflows. But if you want to test push in the Natively Preview app, you need to send it on the client side (After testing, just put it on backend workflow).

Actions:

  1. OneSignal - PlayerIds - Send Push - Add a field to User's object to store Player Id

All parameters in these actions are pretty the same. The difference is only in the Data Source section.

To send Push notifications, you will need to enter your OneSignal API Key in theonesignal_apiKeyfield within the plugin settings.

Body:

  • Title

  • Subtitle [iOS]

  • Message

  • Redirect Url - The url that will be opened if user's click on push (Optional)

or

Data Source:

OneSignal - PlayerIds - Send Push action

  • List Type

  • List

  • Player ID field

If your USER has a field that contains MULTIPLE PLAYER_IDs, please use "OneSignal - User Multiple PlayerIds - Send Push" action. It has a field named player_ids which is a list of text.

OneSignal - Segments - Send Push action

  • Included - provide here a list of segments (separated by comma) that needs to be included in your push sending action

  • Excluded - provide here a list of segments (separated by comma) that needs to be excluded from your push sending action

The value should be like this: Active Users, Inactive Users

Bubble - Custom Notification Sound:

  • iOS Sound - set "natively.wav" if you wanna to use custom sound

Bubble - Setup Push example:

  1. Request Push Notification permission whenever you need it.

    The OneSignal status is updated during app initialization. As a result, any changes to the permission status will take effect on the second app launch, after the user has granted or denied permission.

  2. Save PlayerID to your user model

  3. Send Push Notification to PlayerID you need (Backend workflow is recommended)

Send Push examples:

If you need to have several apps in the App Store for one Bubble website (for example Seller & Buyer apps). In this case, you can override OneSignal appId, to send a push in a different app.

🛠 JavaScript SDK

NativelyNotifications

const notifications = new NativelyNotifications()
const onesignal_playerid_callback = function (resp) {
        console.log(resp.playerId); // a301a5b5-ac6e-4d55-9eb3-ff6d19784ae0
};
const push_register_callback = function (resp) {
        console.log(resp.status); // true/false
};
const push_permission_callback = (instance) => (resp) => {
        console.log(resp.status); // true/false
};
const fallbacktosettings = false; // Show alert if permission is denied
notifications.getOneSignalId(onesignal_playerid_callback);
notifications.getPermissionStatus(push_permission_callback);
notifications.requestPermission(fallbacktosettings, push_register_callback);

How to set up?

  1. call requestPermissionIOS (required for both iOS & Android).

  2. Save PlayerId somewhere (for example, save it in the user's playerId property).

How to send Push Notifications (Or send test push notifications in the Natively Preview app)?

There are 2 options:

const payload = {
  redirect_url: "https://example.com/" // A URL where the user will be redirected after clicking the notification banner.
  /// ------
  title: "Title Text",
  subtitle: "Subtitle Text", // Works only for iOS
  description: "Description Text",
  // title, subtitle, description or template_id
  template_id: "{YOUR TEMPLATE ID HERE}",
  /// ----
}
const appId = "123...123" // Your OneSignal app id
const isPreview = false // set it to true if you're testing the website in Natively Preview (It will replace appId with appId of Natively Preview app).
const player_ids = ["a301a5b5-aa6e-4a55-9aa3-aa6d19784ae0"] // Array of playerIds where you're sending push notification
const resp = await window.natively.sendPushNotification(appId, payload, player_ids, isPreview)

JS SDK - Custom Sound:

Create Android Channel ID

  1. Go to OneSignal App -> Settings -> Messaging

  2. Scroll down to Android Notification Channels ->Click "Add Channel"

  3. Scroll Down to "Sound" -> Add "natively" + Set Importance to Urgent or High

  4. Copy Channel ID

  5. Paste where you use it (Plugin or OneSignal API) + IMPORTANT: reinstall your Android app

Recommendations

  • Request the user's notification permission. You can do that in any necessary place. For example: show a popup that explains to the user's why your app needs it (so, it can be a better experience when just displaying a system popup)

  • Identify a user. By using player id.

On initialization, the element will try to get and the current notification permission status. (No need to call it on the Page Is Load event)

OneSignal Player Id updated - get called when was updated.

OneSignal PlayerId - 's text value.

OneSignal - Segments - Send Push - Use this if you need

Template ID - Check out OneSignal for more details

Android Channel Id -

Make sure you've your app and OneSignal for Push Notifications.

call getOneSignalId (will return ).

Send it with Natively SDK from your website (Which might be useful if running the app in a ):

2. Other provided by OneSignal (NodeJS SDK, WebAPI, etc.)

More information about OneSignal you can read in their .

Natively sendPushNotification method doesn't support custom notification sound. Please use OneSignal . Use and (ios_sound with "natively.wav" value)

Check a player_id value on each login (It can be )

🧋
🚦
OneSignal Player Id
OneSignal Player Id
OneSignal Player Id
OneSignal Segments
template documentation
prepared
PlayerId
Preview Mode
options
documentation
changed
you need to paste your one signal channel id
API directly for it
android_channel_id
Send Push with OneSignal Dashboard
OneSignal
Bubble.io Plugin
Send Push with Plugin
Use custom notification sound
JavaScript SDK
Send Push with SDK
Use custom notification sound
Recommendations
Create Android Channel ID