Web Push Permissions Prompt Settings

Once you have added xtremepush, web push notifications, to your site, you can easily control how and when the user is prompted for notifications from the platform at any time. You can choose wether to have:

• Auto prompting
• Or manually prompt users at a custom time in their onsite journey

 

Auto prompting

In your project on the platform go to, App Setting > SDK Settings. Here you will see the prompt settings. 

Auto Prompt Permission Dialog: Here you can set the dialog to auto prompt on pages that have the SDK by selecting the Auto prompt radio button.

Prompt At: You can delay when the user is prompted for push permissions by increasing the value of the prompt at setting. By setting this to prompt at the nth page view the user will only be prompted after they have visited a page n times. For example if you set the Promp At to 3 page views the user will be asked if they want to accept notifications on their 3rd Visit.

If No Repeat After:  This setting only applies to chrome and firefox when notifications are provided via a separate domain from your website. In this case you will see a dialog before a window is presented with the system/browser push acceptance dialog.

If the user says no at the first dialog the window will not appear. The if no repeat after setting allows you to ask again after n page views on chrome or firefox. 

Stopping or not using Auto prompt

If you want to stop auto prompt on some pages you can add the following javascript to that page after the sdk has been initialised. 

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

Or if you opt to turn off auto prompt you can manually launch the prompt dialog using the following javascript where you deem appropriate to ask for notification permissions:

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

Additional auto prompt settings

These are:

• YES Redirect: Optional URL to redirect to if the user says yes to notifications
• NO Redirect: Optional URL to redirect to if the user says no to notifications
• Dismiss Redirect: Optional URL to redirect to if the user dismisses the notifications prompt
• Description: The description used in the value exchange of you web push prompt

 

Custom prompt

If you want to prompt the user in a custom fashion then in your project on the platform go to, App Setting > SDK Settings. Here you will see the prompt settings. Make sure the Auto Prompt is turned off.

You can then choose to prompt the user at any point in their interaction on site by calling the prompt method:

xtremepush("push", "prompt");

You may for example call the prompt method when the user clicks a button during sign up or similar as shown below:

 

 

 

You can also define callbacks to continue user journey once he interacts with 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;
        }
    }
});