Как создать кастомный виджет подписки

Создание виджета подписки

Если виджет по умолчанию не соответствует вашим целям и предпочтениям, вы можете создать свой собственный виджет подписки, следуя шагам, описанным ниже.

1. Добавьте в свой проект скрытый <div>, содержащий запрос на подписку.

<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    Не пропустите ничего важного — подпишитесь на push-уведомления!
  </div>
  <div class="push-notification-widget__control">
    <button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
      Подписаться
    </button>
  </div>
  <div class="push-notification-widget__success">
    Вы подписаны
  </div>
</div>

2. Задайте его стили.

<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. После инициализации Pushwoosh WebSDK проверьте, подписан ли уже пользователь или заблокировал ли он запросы на разрешение. Если нет, отобразите виджет.

Осторожно

Убедитесь, что виджет отображается ПОСЛЕ полной инициализации WebSDK. В противном случае виджет не будет работать корректно.

<script>
  var $subscriptionWidget = document.getElementById('push-notification-widget');
  var Pushwoosh = Pushwoosh || [];
  // показать сообщение об успехе, если устройство подписывается на push-уведомления
  Pushwoosh.push(['onSubscribe', () => {
    $subscriptionWidget.classList.add('push-notification-widget_subscribed');
  }]);
  Pushwoosh.push(() => {
    /* теперь WebSDK готов, и вы можете использовать публичные методы. */
    // создать массив для Promise.all
    var actions = [];
    // проверить разрешение устройства на push-уведомления
    var permission = Pushwoosh.driver.getPermission();
    // проверить, зарегистрировано ли устройство в Pushwoosh и может ли оно получать push-уведомления
    var isSubscribed = Pushwoosh.isSubscribed();
    actions.push(permission);
    actions.push(isSubscribed);
    // дождаться выполнения всех действий
    Promise.all(actions)
      .then((result) => {
        var permission = result[0];
        var isSubscribed = result[1];
        // если push-уведомления не заблокированы на устройстве (можно показать нативный запрос на разрешение)
        // и если устройство не подписано на push-уведомления (включая отписку вручную)
        // показать виджет уведомлений
        if (permission !== 'denied' && !isSubscribed) {
          $subscriptionWidget.classList.remove('push-notification-widget_hidden');
        }
      });
  });
</script>