Configuration

It's time to configure EasySocial. We'll list all the basics EasySocial configuration settings here.

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.

What are Push Notifications?

Push notifications are feature built into mobile devices, web browsers, and operating systems. They are an easy way for developers and marketers to send short, real-time, messages to users with announcements, news, promotions or events.

OneSignal Application

Once you have logged-in to your account, you will be presented with this layout. Its shows all the available applications under your account. If you're new here, a guided setup will be appeared and it will help you setting up your first application with OneSignal. The guided setup is pretty simple and straightforward and we would like to encourage you to utilize the guided tour while setting up your new application in OneSignal.

OneSignal Application

Add New App

For the initial step, you may start your journey by clicking on Add a New App button as shown in following screenshot. After you have clicked the button, there will be a dialog prompted requesting for the App Name. Enter the desired app name of the new app and then hit Create button to continue.

OneSignal Application

OneSignal Application

Platforms

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

What are Web Push Notifications?

It is a some kind of messages that come from a website. You might get them from your desktop or mobile devices even when the website is not open in your browser. It is a new marketing channel to re-engage your site visitors without knowing their email or other contact details.

OneSignal Application

Website Push notifications platform are divided into 2 sections named; Google Chrome & Mozilla FireFox and Apple Safari. In this documentation, we will provide you with a simple guide to setting up both sections.

OneSignal Application

Google Chrome & Mozilla Firefox Website Push Notification Configuration

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

  • 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.

    Given that your site is fully support HTTPS, you may skips the following fields by unchecked My site is not fully HTTPS checkbox.

  • My site is not fully HTTPS
    If your site does not support HTTPS or serves some pages over HTTP and other pages over HTTPS, then enable this HTTP Fallback option. Otherwise (fully support HTTPS), leave this option unchecked.

  • Choose Subdomain (HTTP Fallback Option)
    Because of Chrome push notification requires sites to be using HTTPS, non-HTTPS websites must then use a subdomain of onesignal.com. Choose an unique subdomain (e.g. yoursubdomain), which will be displayed as https://yoursubdomain.onesignal.com.
    Warning: Changing this value after it's set will prompt users to accept notification permissions again.

OneSignal Application

OneSignal Application

After you have completed filling in the required fields, click on Save button to store the information and continue to the next step.

Select Target SDK

In this step, you will need to select the target SDK. Since EasySocial utilizes Website Push so, you will need to choose it from the list and click on Next button to continue.

OneSignal Application

Install SDK

Yey, you're almost finish. Copy the generated App ID here and paste it in EasySocial OneSignal Application which can be found at Components > EasySocial > Applications > Applications > OneSignal Push. Once you're ready, click on Done button to close the dialog or X at the top right of the dialog.

If you're unable to find OneSignal Push apps, you might perhaps have not install it yet. For more information, please read through OneSignal Push Application documentation.

OneSignal Application

Configuring EasySocial OneSignal Application

Navigate to App Settings on OneSignal sidebar and click on Keys & IDs tab. In here, you will find the OneSignal App ID and REST API Key. The OneSignal App ID should be the same as the previous step. Copy REST API Key and paste it in EasySocial OneSignal Application which can be found at Components > EasySocial > Applications > Applications > OneSignal Push.

OneSignal Application

If your site is non-HTTPs, you will need to enter the Custom Subdomain (HTTP Fallback Option) as well. The Custom Subdomain is the same as the entered Subdomain in OneSignal App.

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.

OneSignal Application

Enable Automatic Push Permission Popup

What is Automatic Push Permission popup? By enabling this option, it will allows your site to automatically shows the permission message box to your user. This option should always be true unless you have a custom script that able to manipulate the way of permission message popup being displayed on your site.

If you're unsure what option is this for then it would be best to always set this option true. For further understanding and example, please read through: OneSignal Web Push SDK documentation.

Additional Steps For HTTPS Website

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

Unzip the OneSignalSDKFiles.zip file and you will find these 3 files:

  • manifest.json (You will need to edit this file)
  • OneSignalSDKUpdaterWorker.js (Leave as it is)
  • OneSignalSDKWorker.js (Leave as it is)

After you're ready, upload the files to the top-level root of your site directory and the following URLs should be publicly accessible:

  • https://site.com/manifest.json
  • 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 the push notification when surfing through the EasySocial.

Still cannot see the push notification on Google Chrome or Mozilla Firefox?

Please make sure that you've logged-in to the site because EasySocial push notification is actually binded together with EasySocial users. Double check manifest.json file was it edited correctly without additional "," at the end of the line.

Apple Safari Push Notification Configuration

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.

OneSignal Application

Configuring EasySocial OneSignal Application

Navigate to App Settings on OneSignal sidebar and click on Platforms tab. In here, you will find Apple Safari Web ID. Copy Web ID and paste it in EasySocial OneSignal Application which can be found at Components > EasySocial > Applications > Applications > OneSignal Push.

OneSignal Application

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

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.

Still cannot see the push notification on Safari

Please make sure that you've logged-in to the site because EasySocial push notification is actually binded together with EasySocial users. Double check the Safari App ID was it entered correctly on OneSignal Push Notification App.