Configure OneSignal For Web Push Notifications

In order to use our  Web Push Notifications system you will need to connect your Buddyboss account to OneSignal. Please follow the steps below to walk through setting up an account and creating your Application (App) for your site.

Create OneSignal Account

We integrate with OneSignal to provide your web push notification system. Let’s Sign Up to OneSignal account. Enter your Email Address, Password and Company or Website Name. Tick the box and agree with their terms and conditions. Lastly, click on the Create Account button. 

4 plans for using Onesignal will appear next. For instance, we are selecting the Free one. 

After clicking Get Started Now, OneSignal will send you a confirmation mail to your email.  

Open that email and click on Confirm Your Account button. 

Now select your role category and the type of the company you want to add with OneSignal. Also, you will need to add the primary reason for using OneSignal and click Continue.

Add your Write your App or Website name and hit the Create button.

Now, you will have to fill out the steps to get the most out of OneSignal. Let’s Set up your Messaging Channel. 

Press the first option here.

For its Push Notification Configuration you have to select any option from here and click Continue. To add any system here, you would need to add more information and keys.

On the other options like Adding or Migrating user you can either click Next Step or Upload CSV file from your website. 

We have clicked Next Step and a green tick will appear next to it. 

Connect OneSignal with BuddyBoss Website

You have completed the OneSignal account initially. Now, navigate to BuddyBoss > Integrations > OneSignal. 

First, you will see this notice at the top asking you to enter a new API key in order to resume sending web push notifications. If you click on the link here, you will be redirected to this exact page to set up your OneSignal. 

As you can see on this page, you need to enter your OneSignal App ID and Rest API key. To get this information, let’s go to our OneSignal Account. Click on the App you previously created then hit the Settings > Keys & IDs tab. 

Right away, you will see your OneSignal App ID and Rest API keys. I will copy these and paste them back to my WordPress site. Then click Save Settings.

If there is any issue with connecting your OneSignal account, you will get this type of warning. 

If the Site URL for the BuddyBoss app doesn’t match this site’s URL then you will get this type of error message. 

Set Up the Web Push Notifications

Next you will need to activate the Web Push Notifications. Go to BuddyBoss - Settings - Notifications. 

Now scroll down to find out the Web Push Notifications. Firstly, tick the box of Enable Web Push Notifications. Then you can Upload the Default Notification Icon.  

After clicking on the Upload button, a popup will appear. Hit on the Select your file button.

Select an image and click on Crop Photo. 

Tick the box of Automatically Request Permission and Enable Soft Prompt. You can add whatever message you want to show. 

You can change the text of Allow Button and Cancel Button. Lastly, hit the Save Settings button.

Let’s move to the frontend to see how the notification works after a member just loggedin. 

Just like that, you have now connected your OneSignal account to your BuddyBoss site and the web push notifications should continue to work.