Web Push Notifications

1. Before the integration

Check that your website uses HTTPS and that the Javascript SDK has been installed.
Your Customer Success Manager will provide the Firebase Sender ID.

🚧

Limited number of Service Workers

Multiple Service Workers cannot originate in the same scope as this is technologically prohibited by RFCs.

In particular, if your website supports PWA (Progressive Web Apps), its Service Worker will try to re-register the Maestra Service Worker that deals with push notifications. Maestra does not yet support this integration.

2. Add Service Worker to your website’s root directory

You need to place your Service Worker so that your users can receive notifications.

To do this, place maestra-services-worker.js in the root directory of your website.

importScripts("https://api.maestra.io/scripts/service-worker.js");

🚧

Check the result

The file must be located at your website.com/maestra-services-worker.js.

3. Fine-tune Maestra’s tracker

Find where Maestra’s tracker code is located: as part of the HTML code of the website, within a GTM container, or in an individual folder.

Edit the tracker as follows:

maestra = window.maestra || function() { maestra.queue.push(arguments); };
maestra.queue = maestra.queue || [];

//  maestra('create'); replace with the following:

maestra('create', {
  // ... other settings (if any)
  serviceWorkerPath: "maestra-services-worker.js",
  firebaseMessagingSenderId: "<get your SenderID from your Customer Success Manager>"
});


//  add an initialization script for the web push module
maestra("webpush.create");

// Pass the HTTP heading: Service-Worker-Allowed: "/"
// along with the maestra-services-worker.js script (step 2).
// Enter the relevant code on the server side.

maestra = window.maestra || function() { maestra.queue.push(arguments); };
maestra.queue = maestra.queue || [];

maestra('create', {
  // ... other settings
  firebaseMessagingSenderId: "SENDER_ID",
  serviceWorkerPath: "/my-folder/maestra-services-worker.js"
});

// If your Service Worker is placed within the website code where the
// Service-Worker-Allowed HTTP heading was submitted and its scope 
// is more limited that the root, manually set the serviceWorkerScope option
// so that your tracker scope is not wider than this scope.

maestra = window.maestra || function() { maestra.queue.push(arguments); };
maestra.queue = maestra.queue || [];

maestra('create', {
  // ... other settings
  firebaseMessagingSenderId: "SENDER_ID",
  serviceWorkerScope: "/your-scope"
});

If you are not allowed to place your Service Worker in the domain root, manually set the path to the Service Worker in your tracker settings. Please refer to examples in the tabs above.

4. Start collecting your subscribers

There are two ways to collect subscribers:

• Pop-ups
• Embedded forms

How to collect subscribers with a pop-up

After launching the WebPush module, you get one free pop-up as part of your subscription. This pop-up can be set up in three easy steps. Once the user agrees to receive pop-ups, a system window appears for the user to confirm their permission in the web browser.

Setup guide:

1. Choose a pop-up template. Fine-tune the design, display settings, and display frequency (i.e., how often it will "pop-up" on the website). Enable the option to call the web push subscription code.
2. Launch your pop-up.

We recommend collecting web push notification subscribers using this method because:

• you can set the best time to display your pop-up, when the customer is more likely to subscribe
• you can display the same pop-up several times to the same customer
• if a customer declines notifications from your pop-up, the browser will not automatically block notifications from your website

Collecting subscribers using embedded forms

You can embed forms on your website that will collect web push subscribers — for example, widgets that are displayed below articles or in the cart.

To integrate these web forms with web push subscriptions, add the code that calls the system subscription pop-up once a client clicks the button.

Example:

// select which button click to intercept
var myButton = document.querySelector(".some-class");


// call the ’webpush.subscribe’ function upon a button click
myButton.addEventListener("click", function () {
  maestra("webpush.subscribe", {
    getSubscriptionOperation: "GetWebPushSubscription",
    subscribeOperation: "SubscribeToWebpush",
    onGranted: function () {},
    onDenied: function () {}
  });
});