Custom subscription widget

Create a Subscription Prompt widget that fully fits your website

Creating a subscription widget

If the default widget does not match 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>