How Tos

Here are the collection of How-Tos for Komento; you can follow these tutorials to ensure that your Komento is setup optimumly.

OneSignal Push Notification

Setting up

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 need to register for an account with OneSignal and create a new 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 appear and at the last page you have the option to create your first application. The guided setup is pretty simple and straightforward so we encourage you to utilize the guided tour when setting up your new application in OneSignal.

OneSignal Application

Adding a New App

For the initial step, you may start by clicking on the Add a New App button as shown in following screenshot. Once you clicked the button, enter your desired app name for the new app and hit the Create button to continue.

OneSignal Application

OneSignal Application

Platforms

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

OneSignal Application

The Website Push notifications platform are divided into 2 sections: Google Chrome & Mozilla FireFox, and Apple Safari. In this documentation, we will provide you guides to set 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 the OneSignal Web Push SDK Setup.

    If your site fully support HTTPS, you may skip the following fields by unchecking the option My site is not fully HTTPS.

  • 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 (for full HTTPS support sites), leave this option unchecked.

  • Choose Subdomain (HTTP Fallback Option)
    Since Chrome push notification requires sites to be using HTTPS, non-HTTPS websites must then use a subdomain of onesignal.com. Choose a 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 the Save button to proceed to the next step.

Select Target SDK

In this step, you will need to select the target SDK. Since we are setting up Komento for Website Push Notifications, you will need to choose Website Push from the list and click on the Next button to continue.

OneSignal Application

Install SDK

You're almost done. Copy the generated App ID here and paste it in Komento's Push Notification configuration page which can be found at Components > Komento > Settings > Notifications > Push Notifications. Once you're ready, click on the Done button to close the dialog or the X at the top right of the dialog.

OneSignal Application

Configuring OneSignal Settings

Navigate to App Settings on OneSignal's sidebar and click on Keys & IDs tab. In this section, you will find the OneSignal App ID and REST API Key. The OneSignal App ID should be the same as the previous step. Copy the REST API Key and paste it into Komento's Push Notifications page (same as the previous step) which again, can be found at Components > Komento > Settings > Notifications > Push Notifications.

OneSignal Application

OneSignal Application

If your site is non-HTTPs, you will need to enter the field for OneSignal Subdomain (Optional) as well. The OneSignal Subdomain is the same as the entered Subdomain during the setup your OneSignal App.

Double check and make sure the OneSignal App ID and OneSignal REST API Key matches the one from your OneSignal App. Once all is good, click on the Save button to save your configuration.

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 here or 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 push notifications when surfing through the site.

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

Double check the manifest.json file and make sure it was 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 Komento Web Push Notification

Navigate to the App Settings on OneSignal's sidebar and click on the Platforms tab. In here, you will find the Apple Safari Web ID. Copy the Web ID and paste it in Komento's Push Notification configuration page which can be found at Components > Komento > Settings > Notifications > Push Notifications.

OneSignal Application

Double check the pasted Safari App ID and make sure that it is correct. The following screenshot is for the Komento's Push Notification configuration page.

OneSignal Application

That's it. Now, try navigating around your site and you should be able to see push notification popups.

Still cannot see the push notification on Safari

Double check and make sure the Safari App ID was entered correctly on Komento's Push Notification configuration page.