OneSignal Web Notifications
OneSignal web notifications can be used to send marketing blasts, personalized messages, or other custom notifications directly to your users’ computers. To add this functionality to your Bubble app, install the OneSignal plugin and make an account with OneSignal.
Show a prompt for users to enable notifications.
Note: Because the plugin depends on having access to an app's Live version URL, it requires apps to be on the Personal plan and above in order to be fully set up.
Opt the current user out of notifications.
Send notifications directly to a user or list of users in your Bubble database. When you prompt a user to enable notifications and they agree, we send OneSignal the unique ID of their User Thing, so you’re able to send a targeted web push as easily as you would run a search in your Bubble database.
User to receive OneSignal notification
Notification content
Notification title
Destination URL when notification clicked
Image URL to use as notification icon
List of users to receive OneSignal notification
Notification content
Notification title
Destination URL when notification clicked
Image URL to use as notification icon
Name of OneSignal segment to receive notification
Notification content
Notification title
Destination URL when notification clicked
Image URL to use as notification icon
Send custom OneSignal templates to Bubble Users, segments, or by tag filters. Templates are notifications you can design right in the OneSignal dashboard. This tool is great for visualizing the message you send before you send it, as well as saving a notification (in OneSignal) for re-use. To send a template to a user, you must access the template ID, which can be found by navigating to Messages > Templates in the OneSignal dashboard. After you get your template formatted the way you want it, click on “View/Edit” in the “options” dropdown on your desired template.
The ID can then be copied from the URL as seen below.
User to receive OneSignal notification
Notification template ID from OneSignal dashboard
List of users to receive One Signal notification
Notification template ID from OneSignal dashboard
Name of OneSignal segment to receive notification
Notification template ID from OneSignal dashboard
Tag key for filter on OneSignal device
Tag value for filter on OneSignal device
Filter relationship to determine which users receive notification. Choose from: equals, does not equal, greater than, or less than
Notification template ID from OneSignal dashboard
Set and delete tags on OneSignal devices (or “players”, as they are called in the OneSignal documentation) to help you make sure you’re sending targeted messages to the right people.
Key to set as Tag on Current User’s OneSignal device
Value of Tag on Current User’s OneSignal device
Tag Key to delete on Current User’s OneSignal device
Send custom notifications to OneSignal segments and filter groups referenced by the tags you set.
Tag key for filter on OneSignal device
Tag value for filter on OneSignal device
Filter relationship to determine which users receive notification. Choose from: equals, does not equal, greater than, or less than.
Notification content
Notification title
Destination URL when notification clicked
Image URL to use as notification icon
1) Set up a new app in the OneSignal dashboard. Select the Web Push platform and choose Bubble under “Wordpress plugin or website builder” as your integration, seen below.
2) Under “Other Site Setup”, enter your Bubble app domain and select the “My site is not fully HTTPS” option. Enter a label for your app as seen below. Enter this same label in the Bubble plugin tab for the field “Http os.tc”.
3) Under “Permission Prompt Setup”, click “Add a Prompt” and configure your notification prompt as follows:
Although the OneSignal dashboard gives you multiple options to ask users for permission to send them notifications, the best way to do this with the Bubble plugin is to choose the slide prompt and turn auto-prompt off. The plugin provides a workflow action that allows you to prompt the user whenever you want to, giving you more control over the flow of this feature. This action also automatically sends your Bubble user’s unique ID to OneSignal once they accept notifications. This allows you to send notifications directly to users in your Bubble database.You will not be able to use this feature unless autoprompt is turned off.
4) Retrieve your App ID and API Key from the OneSignal dashboard under Settings > Keys & IDs and enter them in the Bubble plugins tab. If you are experiencing issues, try putting the App ID in the "App ID (headers)" field as well.
5) OPTIONAL: If you would like to enable notifications for Safari users as well, navigate to Settings > Platforms in the OneSignal dashboard and click on Apple Safari. Enter and save your site information, then click on Apple Safari again. You should now see a new Web ID. Copy this ID and paste it in the Safari Web ID field in the Bubble plugins tab.
Check to make sure you have properly configured your HTTPS settings specified in Step 2 of the “Getting Started” section. Notifications will not go through from your Bubble app without setting this up.
Make sure auto-prompt is turned off in the OneSignal dashboard, as is specified in Step 3 of “Getting Started” and that you’re using the “Show notification prompt” workflow action to ask your users for permission to send notifications. This action automatically registers your Bubble user with OneSignal, and you will not be able to directly send notifications to Bubble users without implementing this in your application.
With the OneSignal plugin, engaging with your users is streamlined, personal, and direct. Install the official OneSignal plugin in the Plugins tab of your editor to easily integrate the power of web notifications with your application!
