Links
🚦

Push Notifications (OneSignal)

We are using OneSignal 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:

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

Element Events:

  • OneSignal Player Id updated - get called when OneSignal Player Id was updated.
  • 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:

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)

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. 1.
    OneSignal - PlayerIds - Send Push - Add a field to User's object to store Player Id
  2. 2.
    OneSignal - Segments - Send Push - Use this if you need OneSignal Segments
All parameters in these actions are pretty the same. The difference is only in the Data Source section.

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

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

1
const notifications = new NativelyNotifications()
2
const onesignal_playerid_callback = function (resp) {
3
console.log(resp.playerId); // a301a5b5-ac6e-4d55-9eb3-ff6d19784ae0
4
};
5
const push_register_callback = function (resp) {
6
console.log(resp.status); // true/false
7
};
8
const push_permission_callback = (instance) => (resp) => {
9
console.log(resp.status); // true/false
10
};
11
const fallbacktosettings = false; // Show alert if permission is denied
12
notifications.getOneSignalId(onesignal_playerid_callback);
13
notifications.getPermissionStatus(push_permission_callback);
14
notifications.requestPermission(fallbacktosettings, push_register_callback);
How to set up?
  1. 1.
    Make sure you've prepared your app and OneSignal for Push Notifications.
  2. 2.
    call requestPermissionIOS (required for both iOS & Android).
  3. 3.
    call getOneSignalId (will return PlayerId).
  4. 4.
    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:
  1. 1.
    Send it with Natively SDK from your website (Which might be useful if running the app in a Preview Mode):
1
const payload = {
2
redirect_url: "https://example.com/" // A URL where the user will be redirected after clicking the notification banner.
3
/// ------
4
title: "Title Text",
5
subtitle: "Subtitle Text", // Works only for iOS
6
description: "Description Text",
7
// title, subtitle, description or template_id
8
template_id: "{YOUR TEMPLATE ID HERE}",
9
/// ----
10
}
11
const appId = "123...123" // Your OneSignal app id
12
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).
13
const player_ids = ["a301a5b5-aa6e-4a55-9aa3-aa6d19784ae0"] // Array of playerIds where you're sending push notification
14
const resp = await window.natively.sendPushNotification(appId, payload, player_ids, isPreview)
2. Other options provided by OneSignal (NodeJS SDK, WebAPI, etc.)
More information about OneSignal you can read in their documentation.

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.
  • Check a player_id value on each login (It can be changed)