When you host the web SDK directly you can prompt without need for a window. If you want to control the prompt and modify the journey you can just turn of auto prompt in settings and use the SDKs prompt method to trigger the prompt at the desired time:
xtremepush("push", "prompt");
Details on how to use this can be found in Docs here:
If you want to quickly make a pop-up with a value exchange prior to showing the prompt you can actually use the pop-up feature of the SDK directly on your site using some javascript code. And then call the push prompt method when user clicks YES button. See example below:
webpushSwal({
title: '<span style="font-weight: bold; color: #000; font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; font-size: 14px;">Never Miss Out!</span>',
html: '<span style="color: #111; font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; font-size: 14px;">Would you like to receive website notifications from xtremepush?</span>',
allowOutsideClick: false,
showCancelButton: true,
reverseButtons: true,
cancelButtonText: '<span style="font-weight: bold; color: #ccc;">Not now</span>',
confirmButtonText: '<span style="font-weight: bold; color: #fff;">Yes</span>',
confirmButtonColor: '#00aeff',
showCloseButton: true,
width: 400,
padding: 7,
}).then(function(result) {
if (result.value) {
// User confirmed
localStorage.setItem('webpush_prompt_dismissed', 1);
xtremepush('push', 'prompt');
} else {
// User dismissed the window
localStorage.setItem('webpush_prompt_dismissed', 1);
}
});
If you have the SDK already on your site you can quickly test this from the console:
You can edit text content by modifying title and html params and button text and colors can also be modified to suit your branding.
Additional logic should be added around this pop-up to control how often the user sees the pop-up if they don't say Yes. See a fuller example below with some additional logic to not show pop-up if user has already opted-in, denied permissions, is on a browser that doesn't support push or says no on pop-up:
<script>
WebpushPrompt();
function WebpushPrompt() {
xtremepush('ready', function () {
var permission = xtremepush('push', 'permission');
// This will exclude people who have already subscribed / denied push notifications
// This will also exclude browsers with no push notifications support
if (permission == 'default' || permission == 'deregistered') {
// This will exclude people who have previously clicked "Not now" button
// You can potentially apply more complex logic, such as retry after certain period
if (!localStorage.getItem('webpush_prompt_dismissed')) {
webpushSwal({
title: '<span style="font-weight: bold; color: #000; font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; font-size: 14px;">Never Miss Out!</span>',
html: '<span style="color: #111; font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; font-size: 14px;">Would you like to receive website notifications from xtremepush?</span>',
allowOutsideClick: false,
showCancelButton: true,
reverseButtons: true,
cancelButtonText: '<span style="font-weight: bold; color: #ccc;">Not now</span>',
confirmButtonText: '<span style="font-weight: bold; color: #fff;">Yes</span>',
confirmButtonColor: '#00aeff',
showCloseButton: true,
width: 400,
padding: 7,
}).then(function (result) {
if (result.value) {
// User confirmed
localStorage.setItem('webpush_prompt_dismissed', 1);
xtremepush('push', 'prompt');
} else {
// User dismissed the window
localStorage.setItem('webpush_prompt_dismissed', 1);
}
});
}
}
});
}
</script>
You could further modify this code to add more advanced behaviour around the prompt such as retries after X number of visits if the user says No to the dialog.
Comments
0 comments
Article is closed for comments.