Configuring web push notifications

Before you create and send your first web push notification, you must:

  • integrate with Synerise via JS SDK,
  • create a Firebase account and integrate it with Synerise to start collecting web push agreements on your website.
  • enable web push notifications in Synerise

Web push notifications will be shown to a visitor, who agreed to receive web push notifications, according to the settings. The following web push related events are collected by default:

  • webpush.subscribe - a visitor has agreed to receive web push notifications
  • webpush.subscribeBlock - a visitor hasn’t agreed to receive web push notifications
  • webpush.subscribeDiscard - a visitor closed an agreement form (there is a possibility that the visitor will subscribe in the future)
  • webpush.send - a web push notification was sent
  • webpush.show - a web push notification was displayed
  • webpush.click - a visitor clicked a web push notification
  • webpush.notRegistered - a web push notification wasn’t sent due to an invalid token
Important: Only Chrome and Firefox browsers can display web push notifications.

Requirements


  • You must be granted user permissions to access the Settings module.
  • Your site must fully support HTTPS.
  • Your site must redirect all http:// requests to https:// requests.
  • Integrate with Synerise via Synerise JS SDK (make sure your tracking code covers web push notifications).
Important: Perform the configuration in the given order.

Integrate Firebase with Synerise


The full procedure of Integrating Firebase with Synerise is available here.

Enable web push notifications in Synerise


  1. Go to Settings icon Settings > Web push.
  2. Switch the Enable Web-Push toggle on.
    Result: The Instruction section appears.
    The Instruction section
    The Instruction section
  3. Follow the commands on the interface (from 1-3).
    Tip: The file should be available under the site root with the same filename, for example: example.com/snr-sw.js. Example for a subfolder: example.com/other/path/snr-sw.js.
    If you choose other directory than the root, to properly use the service worker you must declare the Service-Worker-Allowed: / header. In case you use a different worker, you can add snr-sw.js contents to your worker file and rename it to snr-sw.js.
  4. In the Path to service worker field, enter the path.
  5. Optionally, to enable web push subscription control on your website, switch the Web-push notification center. toggle on.
    WARNING: The Advanced notification center display settings toggle that appears is currently unused.
  6. Confirm by clicking Save.

Result: The configuration is completed. The next step is to prepare web push agreement forms.

What if web push notifications still don't display?

  1. Make sure the web push notification doesn’t contain errors.
  2. If the web push notification is created correctly, go to your website.
  3. Open the console.
  4. Search for SR.init.
  5. If there is the disableWebPush parameter, contact your developers to remove it.
Console view
Console view

😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

Close modal icon Placeholder alt for modal to satisfy link checker