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. For setting up browser push notifications on Safari, please visit our separate guide.

Requirements

HTTPS protocol

Push API requires the use of the HTTPS protocol with a 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 redirecting 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

  • First, make sure that you are using the latest integration snippet. You can read more about the integration snippet and how to update it in this guide.

  • Set up a service worker on your website by following our step-by-step guide. You might need a person with technical skills for this step.

Creating a browser push notification

Push notifications can be created and launched in Scenarios. You can create a new scenario by navigating to Campaigns > Scenarios > + Create new.

A push notification node will be located under Actions > Browser push notification. As any other node, you can simply drag and drop it into the scenario.

Notification editor

To edit the notification, you need to double-click the node you just dragged into the scenario. On the left side of the editor, you will be able to edit things like the notification title, message, or URL. The "Interaction" section allows you to insert 2 custom buttons.

On the right side of the editor, you will be able to preview the notification in a specific environment. The preview is automatically updated with every change you make in the editor. If you are using Jinja personalization, you can 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.

📘

Browser push notifications on Safari

To set up browser push notifications on Safari, please follow our separate guide.

Multilingual notifications

You can deliver your notification in more languages. By clicking on the plus icon in the top left of the editor, you can set up different language variants of the same campaign. Exponea will automatically identify which language to show to different users. If it is impossible to determine, the default variant will be used.

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.

🚧

Display conditions

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

Notification settings

The browser push notification settings can be accessed by clicking on the Settings tab on the top left of the editor window. In this tab, you can configure various things, such as the notification's "time to live" or link transformation, or choose a frequency policy and consent category.

Time to live

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

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.

Display options

Display options consist of 2 optional checkboxes that modify how or for how long the notification gets displayed.

  1. Require interaction will prevent the notification from disappearing until the user clicks or dismisses the notification (as opposed to being closed automatically).
  2. Silent notification will prevent any sound or vibration regardless of the user’s device settings.

🚧

Browser support

It is important to note that the browser support for these options differs. Currently, Require interaction and Silent notification works as intended on: Google Chrome, Microsoft Edge, Opera.
Browser push notifications are not supported on iOS devices. See also the Browser-specific limitations section below.

Browser-specific limitations

There are some browser-specific limitations that might influence the functionality of your push notifications across different browsers, so be sure to check those before initializing the campaign.

These may include limits on the image size used in a browser push notification, e.g. for Chrome it is https://developers.google.com/web/fundamentals/push-notifications/display-a-notification#image.

Browsers may also limit the number of notifications sent depending on the user's activity. Mozilla Firefox has a quota that limits the number of push messages without an on-screen notification that websites can send. Those that exceed the quota will have its push messaging disabled and the user must revisit the website again to resubscribe. Check with Mozilla for specifics.

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.

Updated 21 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