Comment créer un widget d'abonnement personnalisé

Si le widget par défaut ne correspond pas à vos objectifs et préférences, vous pouvez créer votre propre widget d’abonnement personnalisé en suivant les étapes décrites ci-dessous.

Ajoutez à votre projet un <div> masqué contenant l’invitation à s’abonner.

<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    Ne manquez rien d'important — abonnez-vous aux notifications push !
  </div>
  <div class="push-notification-widget__control">
    <button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
      S'abonner
    </button>
  </div>
  <div class="push-notification-widget__success">
    Vous êtes abonné
  </div>
</div>

2. Spécifiez ses 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. Une fois le SDK Web de Pushwoosh initialisé, vérifiez si un utilisateur est déjà abonné ou s’il a bloqué les demandes d’autorisation. Si ce n’est pas le cas, affichez le widget.

<script>
  var $subscriptionWidget = document.getElementById('push-notification-widget');
  var Pushwoosh = Pushwoosh || [];
  // affiche un message de succès si un appareil s'abonne aux notifications push
  Pushwoosh.push(['onSubscribe', () => {
    $subscriptionWidget.classList.add('push-notification-widget_subscribed');
  }]);
  Pushwoosh.push(() => {
    /* le SDK Web est maintenant prêt et vous pouvez utiliser les méthodes publiques. */
    // crée un tableau pour Promise.all
    var actions = [];
    // vérifie l'autorisation de l'appareil pour les notifications push
    var permission = Pushwoosh.driver.getPermission();
    // vérifie si un appareil est enregistré dans Pushwoosh et peut recevoir des notifications push
    var isSubscribed = Pushwoosh.isSubscribed();
    actions.push(permission);
    actions.push(isSubscribed);
    // attend que toutes les actions soient résolues
    Promise.all(actions)
      .then((result) => {
        var permission = result[0];
        var isSubscribed = result[1];
        // si les notifications push ne sont pas bloquées sur un appareil (peut afficher l'invite d'autorisation native)
        // et si l'appareil n'est pas abonné aux notifications push (y compris le désabonnement manuel)
        // affiche le widget de notification
        if (permission !== 'denied' && !isSubscribed) {
          $subscriptionWidget.classList.remove('push-notification-widget_hidden');
        }
      });
  });
</script>

Comment créer un widget d'abonnement personnalisé

Créer un widget d’abonnement