What is a Web Browser Push notification?

A type of notification that can be sent to a user's desktop or mobile device anytime they have their browser open - regardless of whether or not the user is on your website.

These are alert style messages slide in at the top or bottom right hand corner of a desktop screen, depending on the operating system, or appear on a mobile device in a manner nearly identical to push notifications delivered from apps.

All that’s required to send web push notifications is a website that has web push code installed on it. This means if you don’t have an app you can leverage many of the benefits of push notifications - real-time, personalized, in-the-moment communications.


What are the benefits of using Web Browser Push notifications?

Push notifications are more efficient and faster at reaching customers since this occurs in real-time! There is minimal lag in engagement because the notification appears on their screen, which is unlike email or SMS where the user needs to open the email or text notification.

This is vital since the average percentage of people abandoning their carts is over 75% across all industries. Research has also shown that this channel offers a reach 5X greater when compared to email!


How does a Web Browser Push subscription work in Listrak?

When visiting a website using a chrome desktop or mobile browser, customers are prompted to allow Browser Push Notifications.

After the user allows push notifications, Listrak receives and stores the information necessary to send the browser push notifications.


How can I setup Web Push Notifications on my website?

The steps below will walk you through the setup and installation process to get you started.

Step 1: Web Push File Setup (website)

The first step to setting up your Web Push begins by installing the Web Push files on your website:

  1. Download the Listrak Web Push SDK

  2. Unzip the download and drag the LtkWebPush folder that includes the ServiceWorker.js file into your site’s file system. Ensure the ServiceWorker.js file is hosted at the LtkWebPush path, i.e. https://www.yoursite.com/LtkWebPush/ServiceWorker.js.

  3. To test if the service is running, open the website in a browser that supports Web Push and follow the instructions below.

    1. In Chrome: open the developers console. Select Application, then select Service Workers. You should see your website listed with a Service Worker named ServiceWorker.js.

    2. In Firefox: type about:debugging#workers into the address bar. You should see your website listed with a Service Worker named ServiceWorker.js.

    3. In Edge: open the developers console. Select Application, then select Service Workers. You should see your website listed with a Service Worker named ServiceWorker.js.

Step 2: Subscription Capture Setup (website)

Configure an element on the website to display the Web Push subscription prompt:

  1. Configure an action on your site that you want to trigger the subscription prompt. This could be a button, popup, or any linked element.

  2. In your site's JavaScript code, add the function call that will launch the subscription prompt:

    _ltk.WebPush.RequestWebPushPermission()

    Example of a button that loads the subscription prompt:

    <button name="SubmitWebPush" onclick="RequestPermission();">Allow Web Push Notification</button>

    <script type="text/javascript">
    function RequestPermission() {
    _ltk.WebPush.RequestWebPushPermission();
    }
    </script>

  3. Prevent the “element that will trigger the sub prompt” from displaying for existing subscribers. This will be implemented depending on your website UI framework.

    function IsSubscribed() {
    _ltk.WebPush.IsSubscribed()
    .then((subscribed) => {
    if (subscribed === true) {
    // Hide elements
    }
    });
    }

  4. Prevent the “element that will trigger the sub prompt” from displaying on unsupported browsers/devices using the following JavaScript checks. This will be implemented depending on your website UI framework.

    function SupportedWebBrowser() {
    if (_ltk.WebPush.IsSupportedBrowser() === false) {
    // Hide elements
    }
    }


What type of Web Browser Push Journeys can I build?

Welcome Series

Use the Web Browser Push Entry Event to send a series of welcome notifications after a user allows notifications to be sent from your website. Available in both our prebuilt templates or built from scratch journeys.

Abandonment Messages

Add Web Push channel messages to a new or any existing Advanced Abandonment Entry Events to notify subscribers when they have abandoned a page, a product or left something behind in their cart. Available in both our prebuilt templates or built from scratch journeys.

Click here to learn how to build a journey.


Can I build Web Browser Push Broadcast Messages?

Yes! In addition to creating automated journeys, sending web browser push broadcast messages is another way to target shoppers.

Click here to learn how to create a message.


💡 Helpful Tips

  1. You will not be able to access a list of contacts who have signed up to receive Web Push notifications.

  2. Glossary of Web Push terms:

    1. Web Push Send occurs when Listrak "sends" a message to the browser's push service.

    2. Web Push delivery occurs when the browser's push service successfully "delivers" the message to the contact's device. The push service will only deliver messages when the contact’s device is online and available. The push service will attempt to send for 72 hours before timing out if the device is unreachable.

    3. Web Push impression is based on a successful delivery. We can’t be certain that a contact has actually looked at a message, similar to an email open. If the message is received, it will count as an impression.

    4. Web Push Click-Through occurs when a link in the message is clicked.

    5. Web Push Click-Through Rate is calculated as the number of click-throughs divided by the number of impressions.

  3. Supported Browsers/Devices:

Browser

Windows PC

macOS

Android

iOS (iPhone, iPad)

Chrome (50+)

Firefox (47+)

Microsoft Edge

Safari

Opera

Did this answer your question?