Prompt to subscribe to notifications

Control the when users are shown the prompt to subscribe

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

The settings for auto-prompt, prompt delay and optional redirect URLs is configured in Settings > Apps & sites > click on the matching website > Push Settings. 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 from 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 alternative to the above blacklist approach is 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 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:

This option is the recommended approach to increase the number of opt-ins and to make sure that users can opt-in for web push notifications in browsers that require a user gesture such as Safari. Review our dedicated two-step prompt user guide for full details.

You can also define callbacks to continue the 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 almost 2 years ago