🚦Push Notifications - OneSignal

• Bubble.io Plugin

  • Send Push with Plugin

  • Use custom notification sound

• JavaScript SDK

  • Send Push with SDK

  • Use custom notification sound

• Recommendations

• Send Push with OneSignal Dashboard

• Create Android Channel ID

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:

• Permission Status - Yes or No.

• OneSignal PlayerId - OneSignal Player Id's text value.

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

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

• Template ID - Check out OneSignal template documentation for more details

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:

• Android Channel Id - you need to paste your one signal channel id

• 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. Make sure you've prepared your app and OneSignal for Push Notifications.

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

3. call getOneSignalId (will return PlayerId).

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. Send it with Natively SDK from your website (Which might be useful if running the app in a Preview Mode):

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)

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

More information about OneSignal you can read in their documentation.

JS SDK - Custom Sound:

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

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.

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