कस्टम सब्सक्रिप्शन पॉपअप
कस्टम सब्सक्रिप्शन पॉपअप एक पॉप-अप विंडो है जो वेब पेज पर प्रदर्शित होती है और उपयोगकर्ताओं को वेब पुश नोटिफिकेशन के लिए सब्सक्राइब करने का सुझाव देती है। इसे Pushwoosh WebSDK के साथ लागू किया गया है और यह नेटिव सब्सक्रिप्शन प्रॉम्प्ट के प्रदर्शन पर ब्राउज़र प्रतिबंधों को दूर करने की अनुमति देता है। एक नेटिव सब्सक्रिप्शन पॉपअप किसी विशेष उपयोगकर्ता को केवल दो बार दिखाया जा सकता है। यदि कोई उपयोगकर्ता पुश नोटिफिकेशन की अनुमति नहीं देता है और नेटिव सब्सक्रिप्शन पॉपअप को लगातार दो बार बंद कर देता है, तो इसे फिर से नहीं दिखाया जाएगा और पुश नोटिफिकेशन को ब्लॉक माना जाएगा। इसके विपरीत, एक कस्टम सब्सक्रिप्शन पॉपअप को जितनी बार आवश्यक हो, उतनी बार प्रदर्शित किया जा सकता है, जब तक कि कोई उपयोगकर्ता स्पष्ट रूप से पुश नोटिफिकेशन को सब्सक्राइब या ब्लॉक न कर दे।
एक कस्टम सब्सक्रिप्शन पॉपअप में कोई भी टेक्स्ट हो सकता है जो पुश नोटिफिकेशन के सब्सक्रिप्शन के फायदों की व्याख्या करता है और दो अनुकूलन योग्य बटन होते हैं - एक “बाद में पूछें” विकल्प के लिए और एक “सब्सक्राइब करें” के लिए।
जब कोई उपयोगकर्ता “सब्सक्राइब करें” बटन दबाता है, तो एक नेटिव सब्सक्रिप्शन पॉपअप दिखाई देता है।
जब कोई उपयोगकर्ता “बाद में पूछें” बटन दबाता है या बस विंडो बंद कर देता है, तो कस्टम सब्सक्रिप्शन पॉपअप एक निर्दिष्ट समय में फिर से दिखाई देगा (डिफ़ॉल्ट रूप से, एक सप्ताह के बाद; पुनः प्रयास के लिए देरी को “retryOffset” पैरामीटर के माध्यम से अनुकूलित किया जा सकता है)।
कार्यान्वयन
Anchor link toकस्टम सब्सक्रिप्शन पॉपअप को सक्षम और अनुकूलित करने के लिए, Pushwoosh WebSDK को इनिशियलाइज़ करते समय निम्नलिखित स्क्रिप्ट का उपयोग करें:
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' }});कस्टम सब्सक्रिप्शन पॉपअप इंस्टेंस तक पहुँचना
Anchor link toकस्टम सब्सक्रिप्शन पॉपअप इंस्टेंस Pushwoosh.moduleRegistry.subscribePopup के माध्यम से उपलब्ध है।
ध्यान दें: यह इंस्टेंस केवल subscribe-popup-ready इवेंट के ट्रिगर होने के बाद ही सुलभ होता है। हालाँकि, यदि उपयोगकर्ता पहले से ही पुश नोटिफिकेशन के लिए सब्सक्राइब है तो यह उपलब्ध नहीं होगा।
इंस्टेंस एक toggle() विधि प्रदान करता है जो आपको पॉपअप को मैन्युअल रूप से दिखाने या छिपाने की अनुमति देता है:
// कस्टम सब्सक्रिप्शन पॉपअप को मैन्युअल रूप से दिखाएं या छिपाएंPushwoosh.moduleRegistry.subscribePopup.toggle(); // दृश्यता को टॉगल करता हैPushwoosh.moduleRegistry.subscribePopup.toggle(true); // पॉपअप दिखाता हैPushwoosh.moduleRegistry.subscribePopup.toggle(false); // पॉपअप छिपाता हैयह आपके कोड से सीधे पॉपअप के व्यवहार पर अधिक नियंत्रण की अनुमति देता है।
थीम्स
Anchor link toडिफ़ॉल्ट रूप से, सब्सक्रिप्शन पॉपअप एक ‘मटेरियल’ थीम का उपयोग करता है और दिखाए जाने पर स्क्रीन के कुछ हिस्से को ओवरले करता है, इस प्रकार वेबसाइट विज़िटर से कुछ सामग्री छिपाता है।
सब्सक्रिप्शन पॉपअप द्वारा मूल्यवान सामग्री को छिपाने से बचने के लिए, ‘टॉपबार’ थीम का उपयोग करें ताकि पॉपअप स्क्रीन के शीर्ष पर एक संकीर्ण बार के रूप में दिखाया जाए।
कस्टम सब्सक्रिप्शन पॉपअप इवेंट्स
Anchor link toकस्टम सब्सक्रिप्शन पॉपअप के साथ इंटरैक्शन को ट्रैक करने के लिए निम्नलिखित इवेंट्स उपलब्ध हैं:
// जब कस्टम सब्सक्रिप्शन पॉपअप लोड हो जाता है और दिखाए जाने के लिए तैयार होता है, तब निष्पादित होता है// ध्यान दें: यदि उपयोगकर्ता पहले से ही पुश नोटिफिकेशन के लिए सब्सक्राइब है तो यह इवेंट ट्रिगर नहीं होगा।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");});