OneSignal FREE plugin for FREE and UNLIMITED Push Notifications 📱

Hey guys,

As I said here Native MOBILE app - like cheap or FREE 📱 with FREE & Unlimited PUSH notifications! 📬 - #62 by mvandrei I was working on my very own OneSignal plugin for bubble.

Why I did it? Because I wanted push notifications for my own app, to have badges on iOS, and a bit more control over it.

With this plugin, you can:

  1. Send individual messages.
    Like when you want to book an appointment and the owner of the listing will receive an email, along how many
    others? Now it will be able to receive a push notification from your bubble app that can be a mobile app also
    (please check the link above);
  2. Segmented messages.
    Here you can make it so you can send a promotional message, a marketing message, an important security
    update or whatever you desire; to a variety of users:
    A. All;
    B. All that are active on the app;
    C. All that are NOT active on the app;
    “By default, every app has three built-in segments: All, Engaged Users, and Inactive Users.” on
    OneSignal.com website. For more details please check: https://documentation.onesignal.com/v3.0/docs/segmentation
  3. Set icon badge on iOS (increase it’s number, decrease it etc. Please check https://documentation.onesignal.com/v3.0/reference#create-notification


    The URL will make your app load that page in Safari or your default browser on Android. I will find a way to be able to load it inside the app, so if you are sending your user to “http://yourapp.bubble.io/messages” it will open your “messages” page inside of it, rather than in an external browser.

    Here is the same, just that you have Player id so you can send it to an individual user. I will show you in a video how you will set both options, to send to one user and to many (segmented).
    To be able to get the Player ID, the unique ID assigned by OneSignal.com you need to follow these steps you’ll find here:
    Native MOBILE app - like cheap or FREE 📱 with FREE & Unlimited PUSH notifications! 📬 - #8 by mvandrei
    This is the code you will need to use /* wk.bridge.min.js | v0.2 */   (function(){if(window.isIOS){return}window.is - Pastebin.com for the bridge.

Now for the videos, on how to setup the plugin and test it. There is nothing wrong with your sound, my english is out of practice so I didn’t speak.

Step1. Install the plugin:

Step 2. Configure the plugin to send individual push notifications based on any action you want from your app:

Step 3. Configure the plugin to send Mass push notifications based on any action you want from your app, where you can send to ALL subscribed users, All that are active, All that are not active:

Step 4. Setup push notifications for Web (desktop) browser with test. Please note that you need to have both (Chrome&FireFox AND Safari) setup, otherwise it won’t work.

I hope that I didn’t miss anything.
There is a way to check the status of a sent notification. Here’s the issue:
When we receive it, since this is not native app and it communicates with bubble, if we tap on the notification by mistake, it will open the app and that’s it. We missed the text. I’ve managed with the help of my freelancer to save the state of a notification, so if it’s not read, it will show it as a pop-up at the loading of the app, the first load after the notification was sent. So this way, if you tap on it by mistake and the app will open, until you will press OKAY, the message will keep pooping up when you reopen the app.
This is fine, but if it’s a short message it can be annoying to the user.
I was also thin king how we can redirect inside the app, once the app was opened after the notification was tapped, so it will redirect to the page that is originating from or has the destination: messages/inbox or any other part of your app. But this would load bubble with some extra workflows for each page. I still need to find a better way to do this. If you have any suggestions, please add them here on in private how you prefer.

I hope that it will help you, and that you will enjoy it!
Good luck on your projects! If there’s anything that I can help, please ask.

41 Likes

Thank you so much! I’ve been wanting something like this for so long! Amazing work, good job!

1 Like

@everyone I’ve added a 4th video where you can see how to setup web (desktop) browser notifications + live test.

Around Christmas I will make a video tutorial on how to integrate it with Bubble (how to get the the PlayerID from mobile phone app).
There is text and there are photos for now in the first forum post where I showed you guys how to use SuperView to achieve this.

Happy Holidays!

L.E.
Disclaimer: please be sure you have the right to download and use the icons and images that you are going to use.
As you can see, I’ve used one from iconscout.com which I am crediting here and in the video as well ^_^.
You can always make your own and host them on www.imgur.com then copy the image’s URL and that’s it!
Enjoy!

2 Likes

Not massively important but could you reorganize the action’s input fields to be the title as the first field then the text field and then the url field and finally the player id field if it’s for sending to a specific user. I hope you get what I mean!

I’ll re-read it and look into it tonight. Now I’m on a hurry. Thanks for the feedback

Thanks

wonderful job !!!
Very grateful for this huge gift !
Honor to you :slight_smile:

2 Likes

Hi,
I’ve followed the instructions exactly as stated and my user still does not get a playerID. When I check Bubble’s preview inspector, it says that the JavascripttoBubble A’s value is empty after the JavaScript (https://pastebin.com/FxMdzAZW) is run. The JavaScript works for web push notifications, right? Any idea what could be wrong?

Thanks in advance!

1 Like

it does not work for web. Only for mobile. it is inside a mobile wrapper post.
I will make the web work for playerID registration.
I’ve worked SO hard for the past month, that I collapsed two nights ago. I need some rest, and I will fix this also.

3 Likes

Thank you for all your help! I really appreciate it

1 Like

@khabazkameel please use this code (replace anything in JavaScript code with this)

//--------- Web ---------

OneSignal.push(function() {
OneSignal.getUserId(function(userId) {
console.log(“OneSignal User ID:”, userId);
// (Output) OneSignal User ID: 270a35cd-4dda-4b3f-b04e-41d7463a2316
bubble_fn_2(userId)
});
});

//--------- Web ---------

for web ONLY.
I have tested now and I can successfully register both IDs, but when I am registering the second one it will delete the first and I need to investigate this. Again, I need some time off so this should help you use it for web ONLY.
I will fix it …this year :slight_smile: so it can use both mobile and web.

1 Like

Update:

We can register both mobile and web (desktop) users, I still need to find a way to send individual push notifications for both mobile and web (to the same current user that has two PlayerIDs now).
I will get back to it after Christmas.
So what we need to do is very simple: we need to create a duplicate for everything you’ve done:

  1. JavascripToBubble - JavascriptToBubbleA (mobile); JavascriptToBubbleB (web). You need to change the suffix to 2 on JavascriptToBubbleB (web).
  2. Workflows - the one for web will use the code from above, my previous post;
  3. Database fields: we will have PlayerID_mobile and PlayerID_web in our data base. (just rename the existing one to _mobile).

![12|690x422]((upload://loGPYzj4kBK9HBaq6KonYZx3Irn.png)

There will be a start to finish video tutorial and text with images tutorial, but again, can’t do it now. Thank you for your understanding!
Happy Holidays!

2 Likes

This is awesome! Thank you!

1 Like

Thank you. For some reason I’m still getting an empty value for the JavaScripttoBubble. Any idea?

I’ve checked it.
The plugin and everything is fine (now, needed some changes in the workflow/settings).
You have some problems with the current user’s login.
Please try on your main account to create a new user, and test it.
I’ve attached the screenshots in PM showing you that the plugin works just fine (now with those changes). You just need to fix the current user’s issue. I couldn’t create an account due to google captcha not being on its domain since you gave me access to a clone app with a different domain.

1 Like

Thank you very much! I really appreciate your help!

1 Like

Hi @mvandrei

Thank you SO much for putting this together. I had a little trouble getting it working with this code, but having consulted the API documentation, managed to get it to work using this:

OneSignal.push(function() {
/* These examples are all valid */
OneSignal.getUserId(function(userId) {
console.log(“OneSignal User ID:”, userId);
// (Output) OneSignal User ID: 270a35cd-4dda-4b3f-b04e-41d7463a2316
bubble_fn_1(userId)
});

OneSignal.getUserId().then(function(userId) {
console.log(“OneSignal User ID:”, userId);
// (Output) OneSignal User ID: 270a35cd-4dda-4b3f-b04e-41d7463a2316
bubble_fn_1(userId)
});
});

For anyone reading, note that my JavaScript was suffix number 1, but this should work as number 2 if you are doing mobile a well as per the instructions.

Top work, @mvandrei - this is this sort of collaboration I think Bubble is all about. Many thanks.

2 Likes

You’re very welcome. I don’t understand what’s with the code, why it’s fn_1 both.
Only like this works for web?
Or did you try to use one code with one JavascriptToBubble to register the ID for both web and mobile?

This was taken straight from OneSignal’s site and it worked first time - the other code didn’t work for me…

1 Like

Well that’s basically the same code twice with a different line. Which one worked exactly?