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.
1
<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
2
<div class="push-notification-widget__title">
3
Don't miss anything important — subscribe to push notifications!
4
</div>
5
<div class="push-notification-widget__control">
6
<button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
7
Subscribe
8
</button>
9
</div>
10
<div class="push-notification-widget__success">
11
You're subscribed
12
</div>
13
</div>
Copied!
2. Specify its styles.
1
<style>
2
.push-notification-widget_hidden {
3
display: none;
4
}
5
6
.push-notification-widget__success {
7
display: none;
8
}
9
10
.push-notification-widget_subscribed .push-notification-widget__title {
11
display: none;
12
}
13
14
.push-notification-widget_subscribed .push-notification-widget__control {
15
display: none;
16
}
17
18
.push-notification-widget_subscribed .push-notification-widget__success {
19
display: block;
20
}
21
</style>
Copied!
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.
1
<script>
2
var $subscriptionWidget = document.getElementById('push-notification-widget');
3
var Pushwoosh = Pushwoosh || [];
4
// show a success message if a device subscribes to push notifications
5
Pushwoosh.push(['onSubscribe', () => {
6
$subscriptionWidget.classList.add('push-notification-widget_subscribed');
7
}]);
8
Pushwoosh.push(() => {
9
/* now WebSDK is ready and you can use public methods. */
10
// create an array for Promise.all
11
var actions = [];
12
// check device's permission on push notifications
13
var permission = Pushwoosh.driver.getPermission();
14
// check whether a device is registered in Pushwoosh and can receive push notifications
15
var isSubscribed = Pushwoosh.isSubscribed();
16
actions.push(permission);
17
actions.push(isSubscribed);
18
// wait for all actions resolved
19
Promise.all(actions)
20
.then((result) => {
21
var permission = result[0];
22
var isSubscribed = result[1];
23
// if push notifications are not blocked on a device (can show native permission prompt)
24
// and if the device is not subscribed to push notifications (including manual unsubscribe)
25
// show notification widget
26
if (permission !== 'denied' && !isSubscribed) {
27
$subscriptionWidget.classList.remove('push-notification-widget_hidden');
28
}
29
});
30
});
31
</script>
Copied!
Last modified 1yr ago
Copy link