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 over 1 year ago