كيفية إنشاء واجهة اشتراك مخصصة

إنشاء واجهة اشتراك

إذا كانت الواجهة الافتراضية لا تتناسب مع أهدافك وتفضيلاتك، يمكنك إنشاء واجهة اشتراك مخصصة باتباع الخطوات الموضحة أدناه.

1. أضف إلى مشروعك عنصر <div> مخفي يحتوي على طلب الاشتراك.

<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. حدد أنماطها.

<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 || [];
  // 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>