# सब्सक्रिप्शन विजेट
**सब्सक्रिप्शन विजेट** एक लॉन्चर बेल और एक प्रॉम्प्ट है जो वेबसाइट विज़िटर्स को पुश नोटिफिकेशन सब्सक्राइब करने के लिए आमंत्रित करता है। यह [पुश सब्सक्रिप्शन बटन](/hi/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/), [कस्टम सब्सक्रिप्शन पॉपअप](/hi/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/), और [सब्सक्रिप्शन प्रॉम्प्ट](/hi/developer/guides/messaging-channels/subscription-prompt/) विजेट्स को एक ही कंपोनेंट में बदल देता है। जब तक यह सक्षम है, इनमें से कोई भी पेज पर लोड नहीं होता, इसलिए विज़िटर्स को कभी भी दो प्रतिस्पर्धी अनुरोध एक साथ नहीं दिखते।
जिस विज़िटर ने अभी तक निर्णय नहीं लिया है, उसे प्रॉम्प्ट दिखाई देता है। जिस विज़िटर ने पहले ही नोटिफिकेशन ब्लॉक कर दिए हैं, उसे इसके बजाय उन्हें अनब्लॉक करने के तरीके की व्याख्या दिखाई देती है।
## पूर्वापेक्षाएं
सुनिश्चित करें कि आपने अपनी वेबसाइट पर Pushwoosh Web SDK 3.0 लागू किया है। ऐसा करने के लिए, हमारी [इंटीग्रेशन गाइड](/hi/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) का पालन करें।
## 1. विजेट सक्षम करें
WebSDK इनिशियलाइज़ेशन में `subscriptionWidget` पैरामीटर जोड़ें और `enable` को `true` पर सेट करें:
```javascript
Pushwoosh.push(['init', {
//...
subscriptionWidget: {
enable: true,
}
}]);
```
नीचे दिया गया प्रत्येक फ़ील्ड वैकल्पिक है। छोड़ा गया फ़ील्ड अपने डिफ़ॉल्ट मान पर वापस चला जाता है। init स्निपेट में, अपनी सीमा से बाहर की संख्या को चुपचाप निकटतम सीमा तक सीमित कर दिया जाता है, और एक अमान्य enum मान चुपचाप अपने डिफ़ॉल्ट मान पर वापस चला जाता है, बिना किसी कंसोल चेतावनी के। नीचे वर्णित Control Panel फॉर्म एक अमान्य मान को पूरी तरह से अस्वीकार कर देता है और उसे सहेजने से इनकार कर देता है।
## 2. प्रॉम्प्ट कॉन्फ़िगर करें
```javascript
Pushwoosh.push(['init', {
//...
subscriptionWidget: {
enable: true,
prompt: {
layout: 'card', // 'card' | 'bar' | 'modal'
position: 'bottom-right',
iconUrl: 'https://url-image.png',
borderRadius: 12, // 0–32
overlay: false,
},
launcher: {
enabled: true,
position: 'bottom-right', // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
offset: 20, // 0–100
size: 48, // 32–80
},
display: {
trigger: 'auto', // 'auto' | 'launcher' | 'manual'
delay: 5, // seconds, 0–3600
cappingCount: 3, // auto-shows per visitor, 0–100, 0 = unlimited
cappingInterval: 24, // hours between auto-shows, 0–8760
},
texts: {
title: 'Stay in the loop',
message: 'Get notified about news and updates.',
acceptText: 'Allow',
declineText: 'Not now',
closeText: 'Close',
blockedTitle: 'Notifications are blocked',
blockedMessage: 'Enable notifications in your browser settings to stay updated.',
launcherLabel: 'Subscribe to notifications',
launcherBlockedLabel: 'Notifications are blocked',
},
colors: {
background: '#ffffff',
accent: '#4285f4',
text: '#000000',
textSecondary: '#666666',
},
}
}]);
```
### लेआउट और स्थिति
`prompt.layout` प्रॉम्प्ट का आकार सेट करता है:
- **`card`** — एक कॉम्पैक्ट कार्ड जो किसी किनारे या कोने से जुड़ा होता है। `prompt.position` `top`, `bottom`, `top-left`, `top-right`, `bottom-left`, या `bottom-right` स्वीकार करता है।
- **`bar`** — पेज की पूरी चौड़ाई तक फैली एक बार। `prompt.position` केवल `top` या `bottom` स्वीकार करता है।
- **`modal`** — पेज के केंद्र में एक विंडो। `prompt.position` हमेशा `center` होता है।
स्थिति चुनने से पहले आपके द्वारा सेट किए गए लेआउट के लिए ऊपर दी गई सूची देखें। init स्निपेट में, वर्तमान लेआउट द्वारा समर्थित न होने वाली स्थिति को चुपचाप लेआउट के डिफ़ॉल्ट मान से बदल दिया जाता है। Control Panel फॉर्म इसके बजाय इस संयोजन को अस्वीकार कर देता है।
### इसे कब दिखाना है
`display.trigger` नियंत्रित करता है कि प्रॉम्प्ट को क्या खोलता है:
- **`auto`** — पेज लोड होने के `display.delay` सेकंड बाद अपने आप खुलता है, फिर यदि विज़िटर ने निर्णय नहीं लिया है तो हर `display.cappingInterval` घंटे में फिर से, कुल मिलाकर अधिकतम `display.cappingCount` बार (`0` का मतलब है कोई सीमा नहीं)।
- **`launcher`** — केवल तभी खुलता है जब विज़िटर बेल पर क्लिक करता है।
- **`manual`** — केवल नीचे वर्णित `Pushwoosh.moduleRegistry.subscriptionWidget` के माध्यम से खुलता है।
`display.delay`, `display.cappingCount`, और `display.cappingInterval` केवल `auto` ट्रिगर पर लागू होते हैं।
### लॉन्चर बेल
`launcher.enabled` तब तक एक फ्लोटिंग बेल दिखाता है जब तक विज़िटर सब्सक्राइब नहीं करता, चाहे `display.trigger` कुछ भी हो — `trigger: 'auto'` के साथ भी, बेल दिखाई देती रहती है ताकि विज़िटर प्रॉम्प्ट को बंद करने के बाद उसे फिर से खोल सके। `launcher.position` इसे चार कोनों में से एक में रखता है। `launcher.offset` (किनारों से पिक्सेल में दूरी) और `launcher.size` (बेल का व्यास पिक्सेल में) इसकी स्थिति को बारीक रूप से समायोजित करते हैं।
### टेक्स्ट और रंग
एक बार जब ब्राउज़र रिपोर्ट करता है कि विज़िटर ने नोटिफिकेशन ब्लॉक कर दिए हैं, तो अनुरोध के बजाय `texts.blockedTitle`, `texts.blockedMessage`, और `texts.closeText` दिखाए जाते हैं — उस स्थिति में `texts.acceptText` और `texts.declineText` कभी दिखाई नहीं देते। `texts.launcherLabel` और `texts.launcherBlockedLabel` प्रत्येक स्थिति में बेल का टूलटिप हैं। प्रत्येक टेक्स्ट फ़ील्ड अधिकतम 300 वर्ण स्वीकार करता है।
`colors.accent`, `colors.background`, `colors.text`, और `colors.textSecondary` एक हेक्स वैल्यू या CSS रंग नाम स्वीकार करते हैं। Control Panel फॉर्म प्रत्येक फ़ील्ड को इसी तरह वेलिडेट करता है, अधिकतम 64 वर्ण तक। init स्निपेट इन फ़ील्ड्स के लिए किसी भी गैर-रिक्त स्ट्रिंग को उसके फॉर्मेट या लंबाई की जांच किए बिना स्वीकार करता है।
## Control Panel में इसे प्रबंधित करना
पैनल-प्रबंधित एप्लिकेशन पर, **Settings → Configure platforms → Web** पर जाएं और **Subscription widget** कार्ड खोलें। कार्ड पर एक बैज दिखाता है कि विजेट **On** है या **Off**।
ऊपर वर्णित समान फ़ील्ड्स को संपादित करने के लिए **Configure** पर क्लिक करें, जो **Prompt**, **When to show**, **Bell**, **Texts**, और **Colors** के रूप में समूहीकृत हैं, एक लाइव प्रीव्यू के साथ जो निर्णय-न-लिए और ब्लॉक किए गए विज़िटर दोनों की स्थिति दिखाता है। सहेजने से पैनल की विजेट कॉन्फ़िग की कॉपी बदल जाती है। यह आपकी साइट पर WebSDK init स्निपेट को प्रभावित नहीं करता।
जब तक कोई एप्लिकेशन पैनल-प्रबंधित है, इस कार्ड में सहेजे गए मान साइट के init स्निपेट में समान कुंजियों को ओवरराइड करते हैं। किसी साइट को पैनल कॉन्फ़िगरेशन में ले जाना पैनल में एक स्विच है, साइट पर कोई कोड परिवर्तन नहीं।
## 3. अपने कोड से विजेट को नियंत्रित करें
एक बार विजेट बंडल लोड हो जाने के बाद, यह `Pushwoosh.moduleRegistry.subscriptionWidget` पर एक API प्रकाशित करता है:
```javascript
Pushwoosh.moduleRegistry.subscriptionWidget.show(); // Opens the prompt
Pushwoosh.moduleRegistry.subscriptionWidget.hide(); // Closes the prompt
Pushwoosh.moduleRegistry.subscriptionWidget.toggle(); // Toggles the current state
Pushwoosh.moduleRegistry.subscriptionWidget.toggle(true); // Opens the prompt
Pushwoosh.moduleRegistry.subscriptionWidget.isVisible(); // Returns whether the prompt is open
```
जो विज़िटर पहले ही सब्सक्राइब कर चुका है, उसके लिए `show()` का कोई प्रभाव नहीं होता। प्रॉम्प्ट खोलने से `show-subscription-widget` इवेंट डिस्पैच होता है। इसे बंद करने से `hide-subscription-widget` डिस्पैच होता है:
```javascript
Pushwoosh.addEventHandler('show-subscription-widget', function() {
console.log('Triggered event: show-subscription-widget');
});
Pushwoosh.addEventHandler('hide-subscription-widget', function() {
console.log('Triggered event: hide-subscription-widget');
});
```
## पुराने विजेट्स से माइग्रेट करना
पुश सब्सक्रिप्शन बटन, कस्टम सब्सक्रिप्शन पॉपअप, और सब्सक्रिप्शन प्रॉम्प्ट अपने-अपने पेज पर बताए अनुसार तब तक काम करते रहते हैं जब तक `subscriptionWidget.enable` सेट नहीं किया जाता या `false` रहता है। इसे `true` पर सेट करने से तीनों का लोड होना बंद हो जाता है, चाहे एप्लिकेशन स्निपेट-कॉन्फ़िगर किया गया हो या पैनल-प्रबंधित।