OneSignal Web Notifications
We’re excited to announce a new plugin built in partnership with OneSignal, the market leader in customer engagement via web and other kinds of 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.
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.
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.
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.
Send custom notifications to OneSignal segments and filter groups referenced by the tags you set.
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.
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!
