Browser push notifications

Browser push notifications let you reach visitors directly in their browser, even when they're not on your website. This article explains how to integrate browser push notifications with Bloomreach and how to create and send them through scenarios.

📘

Note

This article applies only to browsers that use Push API. Check browser compatibility.

What are browser push notifications?

Browser push notifications are short, clickable messages delivered directly to a visitor's browser. When a visitor accepts push notifications on your website, Bloomreach automatically handles the subscription data in the background — you don't need to configure anything manually for this to work.

You can create and send browser push notifications through scenarios, alongside other channels such as email, SMS, and mobile push notifications.

Requirements

HTTPS protocol

Your website must use the HTTPS protocol with a valid SSL certificate. HTTPS protects visitors against man-in-the-middle attacks that could intercept push subscription data.

Redirect all HTTP requests to HTTPS, or at minimum redirect visitors to HTTPS before they subscribe. You can check the current browser support.

How to integrate

Before creating browser push notifications, complete these two setup steps:

1. Update your integration snippet: Make sure you are using the latest version. Read more about updating the integration snippet.
2. Set up a service worker: Follow the step-by-step guide to set up a service worker on your website. If you already have a service worker file, the guide covers how to adapt your existing setup.

When a visitor allows browser push notifications, the SDK automatically populates two internal profile fields: browser_push_notification and browser_push_notification_vapid_key. These fields store the information needed to deliver push notifications and authorize them securely, functioning similarly to push notification consent. You don't need to add or maintain these fields in your configuration — the SDK manages them automatically, together with the browser and the backend. If a visitor later disables push notifications, you can no longer send them push messages unless they enable notifications again.

Create a browser push notification

Browser push notifications are created and sent through Scenarios. To create one:

1. Go to Campaigns > Scenarios and click + Create new.
2. In the scenario editor, go to Actions > Browser push and drag the browser push notification node into your scenario.

3. Double-click the node to open the notification editor.

Notification editor

The notification editor has two panels. Use the left panel to edit the notification content, and use the right panel to preview it in a specific environment.

In the left panel, you can configure:

• Notification title and message.
• URL to open when the visitor clicks the notification.
• Icon URL and image URL.
• Up to two custom interaction buttons in the Interaction section.

The preview updates automatically as you make changes. If you use Jinja personalization, enter a customer ID in the preview box or use the filter button to preview the notification for a specific segment.

🚧

Important

When using Jinja in a push notification, always use single quotes in your Jinja code. Double quotes aren't supported and will cause an error.

Multilingual notifications

You can deliver notifications in multiple languages. To add a language variant, click the + icon in the top left of the editor and set up the content for each language. Bloomreach automatically identifies which language to show each visitor. If the language cannot be determined, the default variant is used.

Bloomreach uses the default variant when it can't identify the visitor's language. If you don't see the language panel in the editor, you haven't defined your languages yet. Set up your languages in project settings first.

Notification settings

Access the notification settings by clicking the Settings tab in the top left of the editor. Here you can configure time to live, display options, frequency policy, consent category, and link transformation.

To target only eligible visitors, select the correct consent group in the push node settings or add condition nodes to your scenario.

Time to live

Time to live (TTL) sets an expiration time for a notification. If a visitor is offline when the notification is sent, the push service keeps trying to deliver it until the TTL expires.

• Default TTL: 12 hours.
• Minimum TTL: 0 seconds. This gives the notification higher delivery priority.
• Maximum TTL: Four weeks.

Display options

Display options control how and how long the notification appears. There are two optional settings:

• Require interaction: The notification stays visible until the visitor clicks or dismisses it, rather than closing automatically.
• Silent notification: The notification delivers without sound or vibration, regardless of the visitor's device settings.

🚧

Important

Browser support for display options varies. Require interaction and Silent notification work as intended on Google Chrome, Microsoft Edge, and Opera. Browser push notifications are not supported on iOS devices. See [Browser-specific limitations] below.

Subscription weblayer

To grow your push notification audience, create a weblayer that invites visitors to subscribe. You can use a pre-built template with a subscribe button from the weblayer templates, or build a custom weblayer using these four JavaScript methods:

• exponea.notifications.subscribe — subscribes the visitor and returns a callback with a status string: error, permission-denied, or subscribed.
• exponea.notifications.unsubscribe — unsubscribes the visitor and returns a callback with a status string: error or unsubscribed.
• exponea.notifications.isAvailable — checks if push notifications are available and returns a callback with a boolean status.
• exponea.notifications.isSubscribed — checks the subscription status and returns a callback with two booleans: whether the visitor is subscribed, and whether they have blocked notifications.

Example:

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

Browser-specific limitations

Browser-specific limitations may affect how your push notifications behave. Check these before launching a campaign:

• Image size limits: Some browsers limit the image size in push notifications. Check Chrome's guidelines for specifics.
• Firefox notification quota: Mozilla Firefox limits the number of push messages a website can send without an on-screen notification. Websites that exceed this quota have their push messaging disabled until the visitor returns to the website to re-subscribe. Check Mozilla's documentation for specifics.
• iOS devices: Browser push notifications aren't supported.