Onesignal Integration

OneSignal Push Notification

OneSignal is a reputable push notification provider that allows you to deliver Push Notifications to your users for free. Before you're able to start using OneSignal Push Notification, you will first required to register for an account with OneSignal and then create new OneSignal Application.

OneSignal Application

Once you have logged-in to your account, you will be presented with this layout. It shows all the available applications under your account. If you're new here, a popup introducing you to OneSignal will appear. Click through the pages or skip and press Done at the last page.

Add New App

For the initial step, you may start your journey by clicking on either the Add My First One Signal App, Done or close button as shown in following screenshot to close the popup. Then, click on the Add App button, a dialog prompted requesting for the App Name will appear. Enter the desired app name of the new app and then hit the Add App button to continue.

Platforms

There are several platforms available for OneSignal application but our only focus here is Web Push notifications. EasySocial utilizes this platform in order to send push notifications. Click on it to select and hit the Next button to start configuring the platform.

You should now see the following on the top of the page after you clicked the Next button from earlier. You can either choose Typical Site or Joomla for the second option as the fields are similar.

Web Push notifications platform is divided into 2 sections; All Browsers(Except Safari) and Apple Safari. In this documentation, we will provide you with a simple guide to setting up both sections.

All Browsers(Except Safari) Push Notification Configuration

There are several fields that are crucial in configuring this application and those fields are being highlighted below.

• Site Name
  Your users will see this site name displayed on their notifications.

• Site URL
  This field is used to validate the identity of the site requesting push notifications using your ID. Only sites matching the field entered can use your OneSignal ID for push notifications.
  Your site URL should not include anything after your domain extension and must contain the protocol (e.g. http:// or https://).
  Further information can be accessed through OneSignal Web Push SDK Setup.

  If your site fully support HTTPS, you may skip the following fields and make sure to disable the My site is not fully HTTPS option.

• My site is not fully HTTPS
  We recommend using HTTPS with OneSignal if possible because full HTTPS sites works best with web push. However, if your site does not support HTTPS or serves some pages over HTTP, then enable this option. Otherwise (if fully support HTTPS), leave this option disabled.

• Choose A Label (HTTP Fallback Option)
  Because Chrome push notification requires sites to be using HTTPS, non-HTTPS websites must then use a subdomain of onesignal.com. Choose an unique label (e.g. yoursitelabel), which will be displayed as https://yoursitelabel.onesignal.com.
  Warning: Changing your label name can cause users to receive duplicate notifications.

Next, we will proceed to the permission prompt setup. This is a required step if no permission prompt is set up yet. Click on the Add A Prompt button to trigger a popup and select/customize your prompt type. It should be fairly straightforward as a preview is shown on the right. Click Save once you are done.

The Welcome Notifications and Advanced steps are optional so you may configure them now or later if you want.
More information can be found in OneSignal's Typical Setup page.

After you have completed filling in the required fields, click on the Save button to store the information and continue to the next page. You may ignore the Add Code to Site section. Finally, click on Finish.

Configuring EasySocial OneSignal Application

Navigate to Settings on OneSignal top menu and click on Keys & IDs at the top right. In here, you will find the OneSignal App ID and REST API Key. Copy these 2 keys and paste it in EasySocial OneSignal Application which can be found at Components > EasySocial > Applications > Applications > OneSignal Push.

Double check the App ID with the OneSignal App ID and make sure it has the correct ID. The following screenshot is the EasySocial OneSignal Application.

Additional Steps For HTTPS Websites

If your site is using HTTPS, OneSignal requires you to upload these 2 files into your root directory. It is a compulsory requirement from OneSignal. You may directly download them by clicking here or you may view them from OneSignal's Documentation site.

Unzip the OneSignal-Web-SDK-HTTPS-Integration-Files.zip file and you will find these 3 files:

• OneSignalSDKUpdaterWorker.js (Leave as it is)
• OneSignalSDKWorker.js (Leave as it is)

Once you're ready, upload the files to the top-level root of your site directory and check that the following URLs are publicly accessible:

• https://site.com/OneSignalSDKWorker.js
• https://site.com/OneSignalSDKUpdaterWorker.js

That's it. Now, try it on your site and you should be able to see push notifications when surfing through EasySocial.

Apple Safari Push Notification Configuration

Once you have configured the web push notification, you may now configure Apple Safari's platform by clicking on the edit(pencil) button.

There are 2 fields that are crucial in configuring this application and those fields are being highlighted below.

• Site Name
  Your users will see this site name displayed on their notifications.
• Site URL
  This field is used to validate the identity of the site requesting push notifications using your ID. Only sites matching the field entered can use your OneSignal ID for push Notifications.
  Your site URL should not include anything after your domain extension and must contain the protocol (e.g. http:// or https://).
  Further information can be accessed through Safari support.

Once you have configured the fields, click Save.

Configuring EasySocial OneSignal Application

Navigate to Settings on OneSignal app's top menu and click on Apple Safari. In here, you will now see Apple Safari Web ID here. Copy the web ID and paste it in EasySocial OneSignal Application which can be found at Components > EasySocial > Applications > Applications > OneSignal Push.

Double check the pasted Safari App ID and make sure that it is correct. The following screenshot is the EasySocial OneSignal Application.

That's it. Now, try it on your site and you should be able to see the push notification when surfing through the EasySocial.

Platform Support

All major browsers support Web Push. Android devices may also receive Web Push notifications, in addition to notifications from apps.