कस्टम सब्सक्रिप्शन विजेट कैसे बनाएं

सब्सक्रिप्शन विजेट बनाना

यदि डिफ़ॉल्ट विजेट आपके लक्ष्यों और प्राथमिकताओं से मेल नहीं खाता है, तो आप नीचे वर्णित चरणों का पालन करके अपना कस्टम सब्सक्रिप्शन विजेट बना सकते हैं।

1. अपने प्रोजेक्ट में एक छिपा हुआ <div> जोड़ें जिसमें सब्सक्राइब करने का प्रॉम्प्ट हो।

<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    कुछ भी महत्वपूर्ण न चूकें — पुश नोटिफिकेशन के लिए सब्सक्राइब करें!
  </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 || [];
  // यदि कोई डिवाइस पुश नोटिफिकेशन के लिए सब्सक्राइब करता है तो एक सफलता संदेश दिखाएं
  Pushwoosh.push(['onSubscribe', () => {
    $subscriptionWidget.classList.add('push-notification-widget_subscribed');
  }]);
  Pushwoosh.push(() => {
    /* अब WebSDK तैयार है और आप पब्लिक मेथड्स का उपयोग कर सकते हैं। */
    // Promise.all के लिए एक ऐरे बनाएं
    var actions = [];
    // पुश नोटिफिकेशन पर डिवाइस की अनुमति जांचें
    var permission = Pushwoosh.driver.getPermission();
    // जांचें कि क्या कोई डिवाइस Pushwoosh में पंजीकृत है और पुश नोटिफिकेशन प्राप्त कर सकता है
    var isSubscribed = Pushwoosh.isSubscribed();
    actions.push(permission);
    actions.push(isSubscribed);
    // सभी एक्शन के हल होने की प्रतीक्षा करें
    Promise.all(actions)
      .then((result) => {
        var permission = result[0];
        var isSubscribed = result[1];
        // यदि डिवाइस पर पुश नोटिफिकेशन ब्लॉक नहीं हैं (नेटिव अनुमति प्रॉम्प्ट दिखा सकते हैं)
        // और यदि डिवाइस पुश नोटिफिकेशन के लिए सब्सक्राइब्ड नहीं है (मैनुअल अनसब्सक्राइब सहित)
        // नोटिफिकेशन विजेट दिखाएं
        if (permission !== 'denied' && !isSubscribed) {
          $subscriptionWidget.classList.remove('push-notification-widget_hidden');
        }
      });
  });
</script>