# कस्टम सब्सक्रिप्शन पॉपअप

**कस्टम सब्सक्रिप्शन पॉपअप** एक पॉप-अप विंडो है जो वेब पेज पर प्रदर्शित होती है और उपयोगकर्ताओं को वेब पुश नोटिफिकेशन के लिए सब्सक्राइब करने का सुझाव देती है। इसे [Pushwoosh WebSDK](/hi/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) के साथ लागू किया गया है और यह नेटिव सब्सक्रिप्शन प्रॉम्प्ट के प्रदर्शन पर ब्राउज़र प्रतिबंधों को दूर करने की अनुमति देता है। एक नेटिव सब्सक्रिप्शन पॉपअप किसी विशेष उपयोगकर्ता को केवल दो बार दिखाया जा सकता है। यदि कोई उपयोगकर्ता पुश नोटिफिकेशन की अनुमति नहीं देता है और नेटिव सब्सक्रिप्शन पॉपअप को लगातार दो बार बंद कर देता है, तो इसे फिर से नहीं दिखाया जाएगा और पुश नोटिफिकेशन को ब्लॉक माना जाएगा। इसके विपरीत, एक **कस्टम सब्सक्रिप्शन पॉपअप** को जितनी बार आवश्यक हो, उतनी बार प्रदर्शित किया जा सकता है, जब तक कि कोई उपयोगकर्ता स्पष्ट रूप से पुश नोटिफिकेशन को सब्सक्राइब या ब्लॉक न कर दे।

एक **कस्टम सब्सक्रिप्शन पॉपअप** में कोई भी टेक्स्ट हो सकता है जो पुश नोटिफिकेशन के सब्सक्रिप्शन के फायदों की व्याख्या करता है और दो अनुकूलन योग्य बटन होते हैं - एक "बाद में पूछें" विकल्प के लिए और एक "सब्सक्राइब करें" के लिए।

जब कोई उपयोगकर्ता "सब्सक्राइब करें" बटन दबाता है, तो एक नेटिव सब्सक्रिप्शन पॉपअप दिखाई देता है।

जब कोई उपयोगकर्ता "बाद में पूछें" बटन दबाता है या बस विंडो बंद कर देता है, तो कस्टम सब्सक्रिप्शन पॉपअप एक निर्दिष्ट समय में फिर से दिखाई देगा (डिफ़ॉल्ट रूप से, एक सप्ताह के बाद; पुनः प्रयास के लिए देरी को "retryOffset" पैरामीटर के माध्यम से अनुकूलित किया जा सकता है)।

## कार्यान्वयन

**कस्टम सब्सक्रिप्शन पॉपअप** को सक्षम और अनुकूलित करने के लिए, [Pushwoosh WebSDK](/hi/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) को इनिशियलाइज़ करते समय निम्नलिखित स्क्रिप्ट का उपयोग करें:

```javascript title="उदाहरण"
Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (बूलियन) पॉपअप सक्रियण
        text: 'पॉपअप पर टेक्स्ट',             // (स्ट्रिंग) पॉपअप पर प्रदर्शित होने वाला टेक्स्ट
        confirmSubscriptionButtonText: 'सब्सक्राइब करें', // (स्ट्रिंग) "सब्सक्राइब करें" बटन के लिए कस्टम टेक्स्ट

        manualToggle: false,               // (बूलियन) पॉपअप दिखाने के लिए मैन्युअल नियंत्रण
        delay: 60,                         // (पूर्णांक) पेज लोड होने और पॉपअप दिखने के बीच की देरी
        retryOffset: 604800,               // (पूर्णांक) पॉपअप को फिर से दिखाने के लिए सेकंड में एक ऑफसेट

        iconUrl: 'https://...',            // (स्ट्रिंग) कस्टम आइकन URL
        iconAlt: 'आपके आइकन के लिए वर्णनात्मक टेक्स्ट', // (स्ट्रिंग) आइकन के लिए ALT टेक्स्ट
        overlay: false,                    // (बूलियन) पॉपअप प्रदर्शित होने पर पेज ओवरलेइंग को सक्षम करता है
        position: 'top',                   // (स्ट्रिंग) पेज पर स्थिति। संभावित मान: ’top' | 'center' | 'bottom’
        mobileViewMargin: '10px',          // (स्ट्रिंग) मोबाइल व्यू के लिए मार्जिन

        bgColor: '#fff',                   // (स्ट्रिंग) पॉपअप का बैकग्राउंड रंग
        borderColor: 'transparent',        // (स्ट्रिंग) पॉपअप का बॉर्डर रंग
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (स्ट्रिंग) पॉपअप की छाया

        textColor: '#000',                 // (स्ट्रिंग) पॉपअप के टेक्स्ट का रंग
        textSize: 'inherit',               // (स्ट्रिंग) पॉपअप के टेक्स्ट का आकार
        textWeight: 'normal',              // (स्ट्रिंग) पॉपअप के टेक्स्ट का वजन
        fontFamily: 'inherit',             // (स्ट्रिंग) पॉपअप के टेक्स्ट का फ़ॉन्ट

        subscribeBtnBgColor: '#4285f4',         // (स्ट्रिंग) "सब्सक्राइब करें" बटन का बैकग्राउंड रंग
        subscribeBtnTextColor: '#fff',          // (स्ट्रिंग) "सब्सक्राइब करें" बटन के टेक्स्ट का रंग
        subscribeBtnTextWeight: 'bold',         // (स्ट्रिंग) "सब्सक्राइब करें" बटन के टेक्स्ट का वजन
        subscribeBtnBorderColor: 'transparent', // (स्ट्रिंग) "सब्सक्राइब करें" बटन का बॉर्डर रंग
        subscribeBtnBorderRadius: '4px',        // (स्ट्रिंग) "सब्सक्राइब करें" बटन का बॉर्डर रेडियस

        askLaterButtonText: 'अभी नहीं',          // (स्ट्रिंग) "बाद में पूछें" बटन के लिए कस्टम टेक्स्ट
        askLaterBtnBgColor: 'transparent',      // (स्ट्रिंग) "बाद में पूछें" बटन का बैकग्राउंड रंग
        askLaterBtnTextColor: '#000',           // (स्ट्रिंग) "बाद में पूछें" बटन के टेक्स्ट का रंग
        askLaterBtnBorderColor: 'transparent',  // (स्ट्रिंग) "बाद में पूछें" बटन का बॉर्डर रंग
        askLaterBtnBorderRadius: '4px',         // (स्ट्रिंग) "बाद में पूछें" बटन का बॉर्डर रेडियस
        askLaterBtnTextWeight: 'normal',        // (स्ट्रिंग) "बाद में पूछें" बटन के टेक्स्ट का वजन

        theme: 'material',               // (स्ट्रिंग) पॉपअप थीम, संभावित मान: 'material' | 'topbar'
        viewport: 'desktop'              // (स्ट्रिंग) लक्ष्य व्यूपोर्ट, संभावित मान: 'desktop' | 'mobile'
    }
});
```


### कस्टम सब्सक्रिप्शन पॉपअप इंस्टेंस तक पहुँचना

**कस्टम सब्सक्रिप्शन पॉपअप** इंस्टेंस `Pushwoosh.moduleRegistry.subscribePopup` के माध्यम से उपलब्ध है।

**ध्यान दें:** यह इंस्टेंस केवल `subscribe-popup-ready` इवेंट के ट्रिगर होने के बाद ही सुलभ होता है। हालाँकि, **यदि उपयोगकर्ता पहले से ही पुश नोटिफिकेशन के लिए सब्सक्राइब है तो यह उपलब्ध नहीं होगा।**

इंस्टेंस एक `toggle()` विधि प्रदान करता है जो आपको पॉपअप को मैन्युअल रूप से दिखाने या छिपाने की अनुमति देता है:

```javascript
// कस्टम सब्सक्रिप्शन पॉपअप को मैन्युअल रूप से दिखाएं या छिपाएं
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // दृश्यता को टॉगल करता है
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // पॉपअप दिखाता है
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // पॉपअप छिपाता है
```

यह आपके कोड से सीधे पॉपअप के व्यवहार पर अधिक नियंत्रण की अनुमति देता है।

## थीम्स

डिफ़ॉल्ट रूप से, सब्सक्रिप्शन पॉपअप एक **'मटेरियल' थीम** का उपयोग करता है और दिखाए जाने पर स्क्रीन के कुछ हिस्से को ओवरले करता है, इस प्रकार वेबसाइट विज़िटर से कुछ सामग्री छिपाता है।

<img src="/web-push-notifications-custom-subscription-popup-1.webp" alt="'मटेरियल' थीम"/>

सब्सक्रिप्शन पॉपअप द्वारा मूल्यवान सामग्री को छिपाने से बचने के लिए, **'टॉपबार' थीम** का उपयोग करें ताकि पॉपअप स्क्रीन के शीर्ष पर एक संकीर्ण बार के रूप में दिखाया जाए।

<img src="/web-push-notifications-custom-subscription-popup-2.webp" alt="'टॉपबार' थीम"/>

## कस्टम सब्सक्रिप्शन पॉपअप इवेंट्स

**कस्टम सब्सक्रिप्शन पॉपअप** के साथ इंटरैक्शन को ट्रैक करने के लिए निम्नलिखित इवेंट्स उपलब्ध हैं:

```javascript
// जब कस्टम सब्सक्रिप्शन पॉपअप लोड हो जाता है और दिखाए जाने के लिए तैयार होता है, तब निष्पादित होता है
// ध्यान दें: यदि उपयोगकर्ता पहले से ही पुश नोटिफिकेशन के लिए सब्सक्राइब है तो यह इवेंट ट्रिगर नहीं होगा।
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("ट्रिगर किया गया इवेंट: subscribe-popup-ready");
});

// जब कस्टम सब्सक्रिप्शन पॉपअप दिखाया जाता है, तब निष्पादित होता है
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("ट्रिगर किया गया इवेंट: subscribe-popup-show");
});

// जब कोई उपयोगकर्ता पॉप-अप विंडो में 'सब्सक्राइब करें' बटन पर क्लिक करता है, तब निष्पादित होता है
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("ट्रिगर किया गया इवेंट: subscribe-popup-accept");
});

// जब कोई उपयोगकर्ता पॉप-अप विंडो में 'बाद में पूछें' बटन पर क्लिक करता है, तब निष्पादित होता है
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("ट्रिगर किया गया इवेंट: subscribe-popup-decline");
});

// जब पॉपअप छिप जाता है, तब निष्पादित होता है
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("ट्रिगर किया गया इवेंट: subscribe-popup-hide");
});
```