Prompt to subscribe to notifications

Control the when users are shown the prompt to subscribe

After enabling Firebase push notifications for Chrome and Firefox and Apple push notifications for Safari, you can customise the experience when prompting to users to enable notifications in their browser.

The settings for auto-prompt, prompt delay and optional redirect URLs is configured in Settings > Channel Settings > Push Settings by selecting the matching website. These are described in the Guide to Push settings.

Selectively disable auto prompt

When Auto prompt is enabled in Push settings, you may have pages where it's not appropriate to show the prompt (for example during a store checkout process). To prevent the prompt being shown on a specific page, add the following JavaScript to that page after the SDK has been initialised:

xtremepush('push', 'auto_prompt', false);

Selectively enable auto prompt

An an alternative to the above blacklist approach, it may be easier in your scenario to only allow Auto Prompt on specific pages or page types. In this case you can disable Auto Prompt in Push settings, and then manually allow the prompt dialog using the following JavaScript on the appropriate pages:

xtremepush('push', 'auto_prompt', true);

Manual prompt

To choose to prompt the user at any point in their interaction on the website, you can manually trigger the prompt by calling the prompt method:

xtremepush('push', 'prompt');

This can be used with or without Auto prompt enabled, for example you may want to trigger the prompt when the user clicks a button during sign up:

You can also define callbacks to continue user journey once they interact with the prompt dialog:

xtremepush('push', 'prompt', {
    allowCallback: function() {
         // user clicked allow button
    }, 
    blockCallback: function() {
         // user clicked block button
    }, 
    dismissCallback: function() {
         // user dismissed permissions dialog
    } 
});

Example of subscription journey

xtremepush('ready', function () {
    // Checking current user permission
    var permission = xtremepush('push', 'permission');
    if (permission == 'default') {
        // User has not allowed or blocked notifications yet. Creating subscribe button
        var button = document.createElement("button");
        button.innerHTML = 'Subscribe For Push Notifications';
        document.getElementsByTagName("body")[0].appendChild(button);

        button.addEventListener('click', function () {
            xtremepush('push', 'prompt', {
                allowCallback: function() {
                    // User clicked allow. Removing subscribe button
                    button.remove();
                },
                denyCallback: function () {
                    // User clicked deny. Removing subscribe button
                    button.remove();
                },
                dismissCallback: function () {
                    // User dismissed dialog. It is possible to prompt again later
                }
            });
        });
    } else {
        switch (permission) {
            case 'granted':
                // User has already allowed notifications permissions
                break;
            case 'denied':
                // User has already blocked notifications permissions
                break;
            case 'unavailable':
                // Push messaging is not available in user browser
                break;
        }
    }
});

Updated about a year ago


Prompt to subscribe to notifications


Control the when users are shown the prompt to subscribe

Suggested Edits are limited on API Reference Pages

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