Browser Push Notifications

Push notifications provide another channel to communicate with your customers. In Exponea, you can set up and execute mobile push notifications as well as web push notifications through our scenarios. This guide will help you understand how to integrate and execute web push notifications by yourself.

šŸ“˜

This article applies only to browsers that use Push API. See the browser compatibility here.

Requirements

Exponea skills

To implement push notifications, support from a technical person is necessary in order to place the service-worker.js file on a server-side of the webpage as well as an HTML tag. When this is done the push notification itself can easily be set up in a scenario.

HTTPS protocol

Push API requires HTTPS protocol with valid SSL certificate. SSL-only support provides better protection for the user against man-in-the-middle attacks intended to obtain push subscription data. We recommend to redirect all HTTP requests to HTTPS or at least redirect the user to HTTPS before they try to subscribe.
You can check the current browser support here.

Integration

:one: Update Exponea integration snippet (script tag)

šŸ“˜

Updating the snippet might not be necessary, if exponea.notifications.isAvailable() returns true in the browser console.

šŸš§

The script below is an example of a basic initialization script. If you customized any of its parts during integration, you will need to account for that.

Don't forget to insert your project token within the script.

<script>(function(b,c){if(!b.exponea){var a=function(a,g){function k(d){return function(){var e=arguments;""==a&&"initialize"==d&&e&&e[0].modify&&e[0].modify.overlay&&"loading"==c.readyState&&(c.write('<div id="__inf__overlay__" style="position:absolute;background:#fff;left:0;top:0;width:100%;height:100%;z-index:1000000"></div>'),setTimeout(function(){var a=c.getElementById("__inf__overlay__");a&&c.body.removeChild(a);res.__=!0},e[0].modify.delay||500));b.exponea._.push([a+d,arguments])}}var h=g.split(" "),f,d;res={_:[]};for(d=0;d<h.length;d++)f=h[d],res[f]=k(f);return res};b.exponea=a("","initialize identify update track trackLink trackEnhancedEcommerce getHtml showHtml showBanner showForm ping getAbTest");b.exponea.notifications=a("notifications.","isAvailable isSubscribed subscribe unsubscribe");var a=c.createElement("script"),g="https:"===c.location.protocol?"https:":"http:";a.type="text/javascript";a.async=!0;a.src=g+"//api.exponea.com/js/exponea.min.js";c.getElementsByTagName("head")[0].appendChild(a);b.webxpClient=b.webxpClient||{};b.webxpClient.sdk=b.exponea;b.webxpClient.sdkObjectName="exponea"}})(window,document);</script>
<script type="text/javascript">
    exponea.initialize({
        "token": "PROJECT TOKEN"
        //, customer: window.loggedInCustomer // replace window.loggedInCustomer with id of your web site customer, e.g. "[email protected]"
});
</script>

:two: Upload file "service-worker.js" to your webroot directory
Content of this file should be:
importScripts('https://api.exponea.com/js/service-worker.min.js');

Test if the newly created script is available on the root of your domain: https://yourdomain.com/service-worker.js

Side note
Script service-worker.js cannot be run in Google Tag Manager. This file contains a definition of a ServiceWorker, which needs to be registered to enable delivering and showing push notifications in the browser. There are security considerations to be aware of when registering a service worker. The service worker file must be hosted on HTTPS on the same domain.

This effectively means thatĀ service workersĀ and theirĀ service worker clientsĀ need to be hosted over HTTPS and therefore,Ā service workersĀ cannot be hosted on CDNs. Read more.

Create the push notification in a scenario

Push notifications can be created and launched in Exponea scenarios.

:one: Go to Campaigns > Scenarios > + Create new.

:two: Add a push notification action node. It is available under Actions > Other > Browser push notification

:three: Define conditions to only target eligible customers.
This can either be by choosing the correct consent group in the push node settings or/and by adding specific condition nodes.

:four: Edit your notification by clicking on the push node.

You can adjust the notification by defining the title, message, URL link, or even insert an image through a URL link. The "Interaction" section allows you to insert 2 custom buttons.

Maximum image size

Limits on the size images use in a browser push notifications are set by the browser. For example, for chrome it is https://developers.google.com/web/fundamentals/push-notifications/display-a-notification#image.

Multilingual notifications

You can deliver your notification in more languages. If you don't see the language pane in the top part of the editor, it means you have not defined your languages yet. You need to do that in project settings first.

Previewing the notification

The right side of the editor lets you see the live preview of your notification. If you're using some Jinja personalization, you can even see the view of a specific customer by typing their ID in the preview box, or by filtering a specific segment of customers using the filter button on the right.

Create a subscription web layer

You can create a web layer asking your visitors to subscribe for the push notifications. You can pick one in the templates with the subscribe button or integrate these 4 methods in javascript:

  • subscribe to notifications, returns callback with status string (error / permission-denied / subscribed)
  • unsubscribe, returns callback with status string (error / unsubscribed)
  • check if push notif. are available, returns callback with boolean status
  • check subscription, returns callback with two booleans, first tells you if you are subscribed, second if the user blocks notifications
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">

    $(function() {
      var popup = $('.notification');
      var buttons = $('.notification .subscribe, .notification .unsubscribe');
      var enableButton = $('.notification .subscribe');
      var disableButton = $('.notification .unsubscribe');
      var blocked = $('.notification .blocked');

      // show or hide buttons and info msg
      var updateStatus = function() {
        exponea.notifications.isSubscribed(function(subscriptionActive, notificationsDenied) {
          buttons.removeClass('disabled').hide();
          if (subscriptionActive) {
            disableButton.show();
          } else {
            enableButton.show();
          }
          if (notificationsDenied) {
            buttons.addClass('disabled');
            blocked.removeClass('hidden');
          }
        });
      };

      // show subscribe buttons only if notifi. are available
      exponea.notifications.isAvailable(function(status) {
        if (status) {
          popup.removeClass('hidden');
          updateStatus();
        }
      });

      enableButton.on('click', function() {
        buttons.addClass('disabled');
        exponea.notifications.subscribe(function(status){  // status could be: error / permission-denied / subscribed
          updateStatus();
        });
        return false;
      });

      disableButton.on('click', function() {
        buttons.addClass('disabled');
        exponea.notifications.unsubscribe(function(status){ // status could be: error / unsubscribed
          updateStatus();
        });
        return false;
      });
    });
</script>

<div class="notification alert alert-warning hidden" role="alert">
  <a href="#" class="subscribe btn btn-primary">Enable notifications</a>
  <a href="#" class="unsubscribe btn btn-primary">Disable notifications</a>
  <span class="blocked hidden">
    Notifications are blocked, <a href="https://support.google.com/chrome/answer/3220216?hl=en">configure</a>
  </span>
</div>

šŸ“˜

Since 18/03/2020 Exponea supports the creation of subscribers through VAPID keys.

Time to live

When sending a notification, you can set a time to live (TTL) for it. The push service will then try to deliver it to user for that amount of time, but will be dropped if user remains offline for longer period. Using TTL, you can set expiration time for the notification, to prevent the delivery of the no-longer relevant ones.

By default the notification's TTL will be set to 1 week, however you can change this in the Settings tab.
The minimum time for TTL is zero which makes the browser push service give it a higher priority. The maximum time for TTL is 4 weeks.

Updated 3 days ago


Browser Push Notifications


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.


We rely on cookies

to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

Manage cookies
Accept & close

Cookies preferences

Accept & close
Back