Cómo crear un widget de suscripción personalizado

Si el widget predeterminado no coincide con sus objetivos y preferencias, puede crear su propio widget de suscripción personalizado siguiendo los pasos que se describen a continuación.

Agregue a su proyecto un <div> oculto que contenga la solicitud de suscripción.

<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    ¡No se pierda nada importante! Suscríbase a las notificaciones push.
  </div>
  <div class="push-notification-widget__control">
    <button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
      Suscribirse
    </button>
  </div>
  <div class="push-notification-widget__success">
    Está suscrito
  </div>
</div>

Especifique sus estilos.

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

Una vez que se inicialice el WebSDK de Pushwoosh, compruebe si un usuario ya está suscrito o ha bloqueado las solicitudes de permiso. Si no es así, muestre el widget.

<script>
  var $subscriptionWidget = document.getElementById('push-notification-widget');
  var Pushwoosh = Pushwoosh || [];
  // muestra un mensaje de éxito si un dispositivo se suscribe a las notificaciones push
  Pushwoosh.push(['onSubscribe', () => {
    $subscriptionWidget.classList.add('push-notification-widget_subscribed');
  }]);
  Pushwoosh.push(() => {
    /* ahora el WebSDK está listo y puede usar métodos públicos. */
    // crea un array para Promise.all
    var actions = [];
    // comprueba el permiso del dispositivo para las notificaciones push
    var permission = Pushwoosh.driver.getPermission();
    // comprueba si un dispositivo está registrado en Pushwoosh y puede recibir notificaciones push
    var isSubscribed = Pushwoosh.isSubscribed();
    actions.push(permission);
    actions.push(isSubscribed);
    // espera a que se resuelvan todas las acciones
    Promise.all(actions)
      .then((result) => {
        var permission = result[0];
        var isSubscribed = result[1];
        // si las notificaciones push no están bloqueadas en un dispositivo (puede mostrar la solicitud de permiso nativa)
        // y si el dispositivo no está suscrito a las notificaciones push (incluida la cancelación manual de la suscripción)
        // muestra el widget de notificación
        if (permission !== 'denied' && !isSubscribed) {
          $subscriptionWidget.classList.remove('push-notification-widget_hidden');
        }
      });
  });
</script>

Cómo crear un widget de suscripción personalizado

Crear un widget de suscripción