Custom subscription widget

If neither default nor a topic-based widget matches your goals and preferences, you can create your custom subscription widget by following the steps described below.

  1. Add to your project a hidden <div> containing the prompt to subscribe.

<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
<div class="push-notification-widget__title">
Don't miss anything important — subscribe to push notifications!
</div>
<div class="push-notification-widget__control">
<button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
Subscribe
</button>
</div>
<div class="push-notification-widget__success">
You're subscribed
</div>
</div>

2. Specify its styles.

<style>
.push-notification-widget_hidden {
display: none;
}
.push-notification-widget__success {
display: none;
}
.push-notification-widget_subscribed .push-notification-widget__title {
display: none;
}
.push-notification-widget_subscribed .push-notification-widget__control {
display: none;
}
.push-notification-widget_subscribed .push-notification-widget__success {
display: block;
}
</style>

3. Once the Pushwoosh WebSDK is initialized, check whether a user is subscribed already or has blocked permission requests. If not, display the widget.

Make sure to display widget AFTER the WebSDK is fully initialized. Otherwise, the widget won't work correctly.

<script>
var $subscriptionWidget = document.getElementById('push-notification-widget');
var Pushwoosh = Pushwoosh || [];
// show a success message if a device subscribes to push notifications
Pushwoosh.push(['onSubscribe', () => {
$subscriptionWidget.classList.add('push-notification-widget_subscribed');
}]);
Pushwoosh.push(() => {
/* now WebSDK is ready and you can use public methods. */
// create an array for Promise.all
var actions = [];
// check device's permission on push notifications
var permission = Pushwoosh.driver.getPermission();
// check whether a device is registered in Pushwoosh and can receive push notifications
var isSubscribed = Pushwoosh.isSubscribed();
actions.push(permission);
actions.push(isSubscribed);
// wait for all actions resolved
Promise.all(actions)
.then((result) => {
var permission = result[0];
var isSubscribed = result[1];
// if push notifications are not blocked on a device (can show native permission prompt)
// and if the device is not subscribed to push notifications (including manual unsubscribe)
// show notification widget
if (permission !== 'denied' && !isSubscribed) {
$subscriptionWidget.classList.remove('push-notification-widget_hidden');
}
});
});
</script>