🚦
Push Notifications (OneSignal)
For now, we're not supporting Rich Push Notifications (with actions & images) This will be added soon.
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)
- 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.
- 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)
- 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
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.
All parameters in these actions are pretty the same. The difference is only in the Data Source section.
- 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 UsersIf 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.
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.
- 2.call requestPermissionIOS (required for both iOS & Android).
- 3.
- 4.Save PlayerId somewhere (for example, save it in the user's playerId property).
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):
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)
- 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.
Last modified 1mo ago