सामग्री पर जाएं
उपयोगकर्ता गाइड कैसे करें गाइड सहायता डेमो अनुरोध करें साइन इन करें
Pushwoosh.com

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

सब्सक्रिप्शन विजेट एक प्रॉम्प्ट और एक लॉन्चर बेल है जो वेबसाइट विज़िटर्स को पुश नोटिफिकेशन सब्सक्राइब करने के लिए आमंत्रित करते हैं। इन्हें subscriptionWidget के रूप में एक साथ कॉन्फ़िगर किया जाता है, लेकिन चालू स्वतंत्र रूप से किया जाता है: केवल प्रॉम्प्ट, केवल बेल, या दोनों एक साथ। इनमें से कोई भी चालू करने पर यह पुश सब्सक्रिप्शन बटन, कस्टम सब्सक्रिप्शन पॉपअप, और सब्सक्रिप्शन प्रॉम्प्ट की जगह ले लेता है — जब तक कम से कम एक हिस्सा चालू है, इन तीनों पुराने विजेट्स में से कोई भी पेज पर लोड नहीं होता।

जिस विज़िटर ने अभी तक निर्णय नहीं लिया है, उसे प्रॉम्प्ट का अनुरोध दिखाई देता है। जिस विज़िटर ने पहले ही नोटिफिकेशन ब्लॉक कर दिए हैं, उसे इसके बजाय उन्हें अनब्लॉक करने के तरीके की व्याख्या दिखाई देती है।

पूर्वापेक्षाएं

Anchor link to

सुनिश्चित करें कि आपने अपनी वेबसाइट पर Pushwoosh Web SDK 3.0 लागू किया है। ऐसा करने के लिए, हमारी इंटीग्रेशन गाइड का पालन करें।

1. प्रॉम्प्ट और बेल चालू करें

Anchor link to

WebSDK इनिशियलाइज़ेशन में subscriptionWidget पैरामीटर जोड़ें और prompt.enabled और/या launcher.enabled को true पर सेट करें:

Pushwoosh.push(['init', {
  //...
  subscriptionWidget: {
    prompt: { enabled: true },
    launcher: { enabled: true },
  }
}]);

नीचे दिया गया प्रत्येक फ़ील्ड वैकल्पिक है। छोड़ा गया फ़ील्ड अपने डिफ़ॉल्ट मान पर वापस चला जाता है। init स्निपेट में, अपनी सीमा से बाहर की संख्या को चुपचाप निकटतम सीमा तक सीमित कर दिया जाता है, और एक अमान्य enum मान चुपचाप अपने डिफ़ॉल्ट मान पर वापस चला जाता है, बिना किसी कंसोल चेतावनी के। नीचे वर्णित Control Panel फॉर्म प्रत्येक फ़ील्ड को वेलिडेट करते हैं और अमान्य मान को सहेजने से इनकार कर देते हैं।

2. प्रॉम्प्ट और बेल कॉन्फ़िगर करें

Anchor link to
Pushwoosh.push(['init', {
  //...
  subscriptionWidget: {
    prompt: {
      enabled: true,
      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
      width: 48,             // 16–200
      height: 48,            // 16–200
      imageUrl: 'https://url-image.png',
      background: '#4285f4',
      iconColor: '#ffffff',
    },
    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',
    },
  }
}]);

लेआउट और स्थिति

Anchor link to

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 फॉर्म इसके बजाय इस संयोजन को अस्वीकार कर देता है।

प्रॉम्प्ट को कब दिखाना है

Anchor link to

display.trigger नियंत्रित करता है कि प्रॉम्प्ट को क्या खोलता है:

  • auto — पेज लोड होने के display.delay सेकंड बाद अपने आप खुलता है, फिर यदि विज़िटर ने निर्णय नहीं लिया है तो हर display.cappingInterval घंटे में फिर से, कुल मिलाकर अधिकतम display.cappingCount बार (0 का मतलब है कोई सीमा नहीं)।
  • launcher — टाइमर पर कभी नहीं खुलता। इसे launcher.enabled: true के साथ सेट करें ताकि बेल पर क्लिक करने से यह खुल सके। मैन्युअल API इस सेटिंग या बेल के चालू होने की परवाह किए बिना इसे फिर भी खोलता है।
  • manual — केवल नीचे वर्णित Pushwoosh.moduleRegistry.subscriptionWidget के माध्यम से खुलता है।

display.delay, display.cappingCount, और display.cappingInterval केवल auto ट्रिगर पर लागू होते हैं।

लॉन्चर बेल

Anchor link to

launcher.enabled एक फ्लोटिंग बेल उस विज़िटर को दिखाता है जो अभी भी अनुरोध पर कार्रवाई कर सकता है (अभी सब्सक्राइब नहीं किया है, या ब्लॉक किया है), प्रॉम्प्ट और display.trigger से स्वतंत्र रूप से। प्रॉम्प्ट खुले होने के दौरान भी बेल स्क्रीन पर बनी रहती है। launcher.position इसे चार कोनों में से एक में रखता है। launcher.offset किनारों से इसकी दूरी पिक्सेल में सेट करता है।

बेल पर क्लिक का प्रभाव प्रॉम्प्ट पर निर्भर करता है। यदि prompt.enabled true है, तो क्लिक इसे टॉगल करता है: इसे खोलता है, या पहले से खुला हो तो बंद करता है। यदि प्रॉम्प्ट बंद है, तो क्लिक सीधे ब्राउज़र से अनुमति मांगता है, ठीक Pushwoosh.subscribe() की तरह — सिवाय उस स्थिति के जब विज़िटर पहले ही नोटिफिकेशन ब्लॉक कर चुका हो, तब क्लिक कुछ नहीं करता।

launcher.width और launcher.height बेल का आकार पिक्सेल में सेट करते हैं (16–200, प्रत्येक का डिफ़ॉल्ट 48)। launcher.imageUrl गोल बेल बटन के बजाय एक चित्र दिखाता है। launcher.background और launcher.iconColor गोल बटन का फिल और ग्लिफ़ रंग सेट करते हैं। सेट न करने पर launcher.background पैलेट के एक्सेंट रंग पर और launcher.iconColor उसके विपरीत कंट्रास्ट के लिए गणना किए गए ग्लिफ़ रंग पर डिफ़ॉल्ट होता है।

टेक्स्ट और रंग

Anchor link to

एक बार जब ब्राउज़र रिपोर्ट करता है कि विज़िटर ने नोटिफिकेशन ब्लॉक कर दिए हैं, तो अनुरोध के बजाय 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 फॉर्म इनमें से, और launcher.background/launcher.iconColor में से, प्रत्येक को इसी तरह वेलिडेट करते हैं, अधिकतम 64 वर्ण तक। init स्निपेट colors.* के लिए किसी भी गैर-रिक्त स्ट्रिंग को फॉर्मेट या लंबाई की जांच के बिना स्वीकार करता है। launcher.background/launcher.iconColor के लिए यह फॉर्मेट की जांच नहीं करता, लेकिन मान को चुपचाप 64 वर्णों तक काट देता है।

Control Panel में इसे प्रबंधित करना

Anchor link to

पैनल-प्रबंधित एप्लिकेशन पर, Settings → Configure platforms → Web पर जाएं। प्रॉम्प्ट और बेल वहां दो अलग कार्ड हैं, प्रत्येक का अपना On/Off बैज और Configure बटन है:

  • Subscription invitation प्रॉम्प्ट को संपादित करता है: Invitation (लेआउट, स्थिति, आइकन), When to show (ट्रिगर, देरी, कैपिंग), Texts, और Colors।
  • Subscription bell लॉन्चर को संपादित करता है: स्थिति, इमेज URL, चौड़ाई/ऊंचाई, बैकग्राउंड और आइकन रंग, और इसके अपने टूलटिप टेक्स्ट।

प्रत्येक कार्ड का Configure बटन फॉर्म के बगल में एक लाइव प्रीव्यू खोलता है। जब तक उस कार्ड का अपना स्विच बंद है, प्रीव्यू कुछ नहीं दिखाता। चालू होने के बाद, प्रीव्यू के ऊपर एक ड्रॉपडाउन निर्णय-न-लिए विज़िटर के अनुरोध और ब्लॉक किए गए विज़िटर की व्याख्या के बीच स्विच करता है। किसी कार्ड को सहेजने से पैनल की विजेट कॉन्फ़िग की कॉपी का केवल उसका अपना आधा हिस्सा बदलता है — दूसरे कार्ड की सेटिंग्स और आपकी साइट पर WebSDK init स्निपेट अछूते रहते हैं।

जब तक कोई एप्लिकेशन पैनल-प्रबंधित है, किसी भी कार्ड में सहेजे गए मान साइट के init स्निपेट में समान कुंजियों को ओवरराइड करते हैं।

3. अपने कोड से प्रॉम्प्ट को नियंत्रित करें

Anchor link to

एक बार विजेट बंडल लोड हो जाने के बाद, यह Pushwoosh.moduleRegistry.subscriptionWidget पर एक API प्रकाशित करता है:

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

जब तक prompt.enabled false है, show() और toggle() का कोई प्रभाव नहीं होता, और जो विज़िटर पहले ही सब्सक्राइब कर चुका है, उसके लिए भी नहीं होता। प्रॉम्प्ट खोलने से show-subscription-widget इवेंट डिस्पैच होता है। इसे बंद करने से hide-subscription-widget डिस्पैच होता है:

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');
});

पुराने विजेट्स से माइग्रेट करना

Anchor link to

पुश सब्सक्रिप्शन बटन, कस्टम सब्सक्रिप्शन पॉपअप, और सब्सक्रिप्शन प्रॉम्प्ट अपने-अपने पेज पर बताए अनुसार तब तक काम करते रहते हैं जब तक साइट के subscriptionWidget.prompt.enabled और subscriptionWidget.launcher.enabled दोनों सेट नहीं किए जाते या false रहते हैं। इनमें से किसी एक को भी चालू करने से तीनों का लोड होना बंद हो जाता है, चाहे एप्लिकेशन स्निपेट-कॉन्फ़िगर किया गया हो या पैनल-प्रबंधित।