Web Push

🚧

Must Read

Please refer here for our Web Push channel configuration guide.

Web Push Opt-in Configuration

/*
 * Set this option to 'true' if you want to hide the prompt on page load
 * and programmatically enable it later
 */
webengage.options('webpush.disablePrompt', true);

/*
 * Set this option to 'false' if your website is registering
 * the service worker script by itself
 */
webengage.options('webpush.registerServiceWorker', false);

Public SDK Methods

webengage.webpush.prompt

Shows the opt-in prompt if the visitor is not subscribed to push notifications. The behavior changes depending on the opt-in mode:

Two-step opt-in: Opens a popup window to a WebEngage managed site where the subscription prompt for push notifications is shown. Call this in a elements' click event listener, otherwise, the browser's popup blocker will prevent the popup from opening.

One step opt-in: You may call this at any time to show the browser prompt for notifications.

• Along with setting the webpush.disablePrompt configuration property to true, this API can be used to customize the opt-in experience as per the needs of your site. Always call this API from within webengage.onReady

webengage.onReady(function () {
    webengage.webpush.prompt();
});

webengage.webpush.onSubscribe

Registers the passed function, to be called when a visitor allows push notifications and the subscription completes successfully. Always call this API from within webengage.onReady.

webengage.onReady(function () {
    webengage.webpush.onSubscribe(function () {
        alert('Thanks! You are now subscribed');
    });
});

webengage.webpush.isSubscribed

Returns true if the visitor is already subscribed for web push notifications, false otherwise. Always call this API from within webengage.onReady

One possible use of this method is to determine user subscription and then hide the opt-in prompt for subscribed users.

webengage.onReady(function () {
    var subscribed = webengage.webpush.isSubscribed();

    if (subscribed) {
        console.log('User is already subscribed');
    } else {
        console.log('User is not yet subscribed');
    }
});

webengage.webpush.isPushNotificationsSupported

Takes a callback which is then asynchronously invoked with a boolean argument. If the argument is true then push notifications are supported in the current browsing context, else they are not. Always call this API from within webengage.onReady.

Push notifications are supported in latest versions of Chrome and Firefox browsers on Windows, macOS, Linux and Android operating systems. They also don't work in private browsing / incognito mode.

webengage.onReady(function () {
    webengage.webpush.isPushNotificationsSupported(function (supported) {
        if (supported) {
            alert('Push notifications are supported');
        }
    });
});

Get current web push subscription status

webengage.webpush.isSubscribed()

Check if the push notification is supported or not

webengage.webpush.isPushNotificationsSupported()

Listen to web push subscription event

webengage.webpush.onSubscribe(() => {
	// add the code here
})

Please feel free to drop in a few lines at [email protected] in case you have any further queries. We're always just an email away!