So erstellen Sie ein benutzerdefiniertes Abonnement-Widget

Erstellen eines Abonnement-Widgets

Wenn das Standard-Widget nicht Ihren Zielen und Vorlieben entspricht, können Sie Ihr eigenes benutzerdefiniertes Abonnement-Widget erstellen, indem Sie die unten beschriebenen Schritte befolgen.

Fügen Sie Ihrem Projekt ein verstecktes <div> hinzu, das die Aufforderung zum Abonnieren enthält.

<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    Verpassen Sie nichts Wichtiges – abonnieren Sie Push-Benachrichtigungen!
  </div>
  <div class="push-notification-widget__control">
    <button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
      Abonnieren
    </button>
  </div>
  <div class="push-notification-widget__success">
    Sie sind abonniert
  </div>
</div>

Geben Sie die Stile an.

<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>

Sobald das Pushwoosh WebSDK initialisiert ist, überprüfen Sie, ob ein Benutzer bereits abonniert ist oder Berechtigungsanfragen blockiert hat. Wenn nicht, zeigen Sie das Widget an.

<script>
  var $subscriptionWidget = document.getElementById('push-notification-widget');
  var Pushwoosh = Pushwoosh || [];
  // zeigt eine Erfolgsmeldung an, wenn ein Gerät Push-Benachrichtigungen abonniert
  Pushwoosh.push(['onSubscribe', () => {
    $subscriptionWidget.classList.add('push-notification-widget_subscribed');
  }]);
  Pushwoosh.push(() => {
    /* jetzt ist das WebSDK bereit und Sie können öffentliche Methoden verwenden. */
    // erstellt ein Array für Promise.all
    var actions = [];
    // überprüft die Berechtigung des Geräts für Push-Benachrichtigungen
    var permission = Pushwoosh.driver.getPermission();
    // überprüft, ob ein Gerät in Pushwoosh registriert ist und Push-Benachrichtigungen empfangen kann
    var isSubscribed = Pushwoosh.isSubscribed();
    actions.push(permission);
    actions.push(isSubscribed);
    // wartet, bis alle Aktionen abgeschlossen sind
    Promise.all(actions)
      .then((result) => {
        var permission = result[0];
        var isSubscribed = result[1];
        // wenn Push-Benachrichtigungen auf einem Gerät nicht blockiert sind (kann eine native Berechtigungsaufforderung anzeigen)
        // und wenn das Gerät keine Push-Benachrichtigungen abonniert hat (einschließlich manueller Abmeldung)
        // Benachrichtigungs-Widget anzeigen
        if (permission !== 'denied' && !isSubscribed) {
          $subscriptionWidget.classList.remove('push-notification-widget_hidden');
        }
      });
  });
</script>