वेब इनबॉक्स विजेट

वेब संदेश इनबॉक्स को आपकी वेबसाइट में एकीकृत करने से रूपांतरणों में भारी वृद्धि होती है। एक उपयोग के लिए तैयार वेब इनबॉक्स विजेट उपयोगकर्ताओं के साथ संवाद करने के लिए आवश्यक सभी तरीकों के लिए आउट-ऑफ-द-बॉक्स सब्सक्राइब किया गया है। बस विजेट को अपनी वेबसाइट में एकीकृत करें और अपनी ब्रांड के अनुरूप इसकी उपस्थिति को अनुकूलित करें।

inboxWidget.enable: true सेट करने से एक विज़िटर का डिवाइस इनबॉक्स डिलीवरी के लिए पंजीकृत हो जाता है, भले ही विज़िटर ने पुश नोटिफिकेशन की अनुमति न दी हो, इसलिए यह उन विज़िटरों तक पहुंच सकता है जिन्होंने कभी पुश के लिए सब्सक्राइब नहीं किया है।

SDK संस्करण (v3.66.0+) पर महत्वपूर्ण नोट

संस्करण 3.66.0 से, एक विज़िटर के डिवाइस को उनके ब्राउज़र से जुड़े एक हार्डवेयर आईडी द्वारा ट्रैक किया जाता है, इससे पहले कि विज़िटर लॉग इन करे। यदि विज़िटर registerUser को कॉल करने से पहले अपनी साइट का डेटा साफ़ करता है, ब्राउज़र बदलता है, या डिवाइस बदलता है, तो वह ट्रैकिंग टूट जाती है। उनका पिछला संदेश इतिहास खो जाता है और विज़िटर के लॉग इन करने के बाद भी वह आगे नहीं बढ़ता है।

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

वेबसाइटों के लिए संदेश इनबॉक्स को एकीकृत करने के लिए, कृपया गाइड का पालन करें।

विजेट को एकीकृत करना

Pushwoosh WebSDK को इनिशियलाइज़ करते समय, inboxWidget पैरामीटर जोड़ें:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

ट्रिगर

विजेट को रेंडर करने के लिए, आपको विजेट के लिए एक ट्रिगर तत्व निर्दिष्ट करना चाहिए। पेज पर कोई भी DOM-तत्व ट्रिगर हो सकता है। SDK को इनिशियलाइज़ करते समय इसकी आईडी को “pwInbox” के रूप में निर्दिष्ट करें या triggerId पैरामीटर को कोई भी कस्टम आईडी असाइन करें। जब WebSDK इनिशियलाइज़ हो जाता है, तो ट्रिगर तत्व पर अपठित संदेशों का बैज प्रदर्शित होता है। एक बार जब ट्रिगर तत्व पर टैप किया जाता है, तो विजेट पेज पर दिखाई देता है।

पोजिशनिंग

डिफ़ॉल्ट रूप से, विजेट ट्रिगर तत्व के सबसे करीब स्क्रीन बॉर्डर से विपरीत दिशा में स्थित होता है। आप कॉन्फ़िगरेशन पैरामीटर के माध्यम से विजेट की स्थिति सेट कर सकते हैं:

उदाहरण

Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

डिफ़ॉल्ट रूप से, inboxWidget को क्लोजिंग </body> टैग से पहले रखा जाना चाहिए। नीचे दिए गए उदाहरण में दिखाए अनुसार विजेट को पेज पर कहीं भी रेंडर करें:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

एक पैरेंट तत्व की खोज querySelector द्वारा की जाती है, इसलिए इसे एक क्लास, आईडी, या तत्व का स्पष्ट विनिर्देश चाहिए।

विजेट को अनुकूलित करना

टेक्स्ट को अनुकूलित करना

विजेट टेक्स्ट को अनुकूलित करने के लिए, emptyInboxTitle और emptyInboxText पैरामीटर जोड़ें:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // विजेट शीर्षक
    emptyInboxTitle: 'You\'re all caught up',       // खाली इनबॉक्स विजेट शीर्षक
    emptyInboxText: 'There are no new messages. Stay tuned!'    // खाली इनबॉक्स विजेट टेक्स्ट
  }
}]);

परिणाम इस तरह दिखता है:

उपस्थिति को अनुकूलित करना

विजेट की उपस्थिति को अनुकूलित करने के लिए, निम्नलिखित पैरामीटर का उपयोग करें:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // विजेट पृष्ठभूमि
    borderColor: 'transparent', // विजेट बॉर्डर का रंग
    borderRadius: 4,            // विजेट बॉर्डर रेडियस (px)
    widgetWidth: 350,           // विजेट की चौड़ाई (px)
    zIndex: 100                 // z-index
  }
}]);

अपठित संदेशों की गिनती का बैज निम्नानुसार अनुकूलित किया जा सकता है:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // बैज का रंग
    badgeTextColor: '#ffffff'   // बैज टेक्स्ट का रंग
  }
}]);

टेक्स्ट गुणों को अनुकूलित करने के लिए, निम्नलिखित कोड जोड़ें:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // टेक्स्ट का रंग
    fontFamily: 'Helvetica, Arial, sans-serif', // फ़ॉन्ट
    messageTitleColor: '#7a7a7a',               // संदेशों के शीर्षक का रंग
    timeTextColor: '#c4c4c4',                   // टाइमस्टैम्प टेक्स्ट का रंग
    emptyInboxTitleColor: '#333333',            // खाली इनबॉक्स शीर्षक का रंग
    emptyInboxTextColor: '#7a7a7a'              // खाली इनबॉक्स टेक्स्ट का रंग
  }
}]);

अंत में, आप खाली इनबॉक्स के लिए आइकन निर्दिष्ट कर सकते हैं:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // एक आइकन का URL पथ
  }
}]);

सेल लेआउट को अनुकूलित करना

विजेट एक संदेश को चार सेल लेआउट में से एक के रूप में खींचता है — classic, banner, captioned, या carousel — वही लेआउट जो कंट्रोल पैनल में अभियान पूर्वावलोकन दिखाता है। एक लेआउट जो संदेश के साथ रेंडर नहीं हो सकता है, वह classic में बदल जाता है: banner को एक हीरो इमेज की आवश्यकता होती है, captioned को एक हीरो इमेज के साथ-साथ एक शीर्षक और एक बॉडी दोनों की आवश्यकता होती है, और carousel को कम से कम एक स्लाइड के साथ-साथ एक शीर्षक और एक बॉडी दोनों की आवश्यकता होती है।

लेआउट की उपस्थिति को अनुकूलित करने के लिए, निम्नलिखित पैरामीटर का उपयोग करें:

उदाहरण

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // क्लासिक अवतार पर अपठित डॉट
    avatarBgColor: '#e6e6e6',     // क्लासिक अवतार पृष्ठभूमि
    avatarTextColor: '#333333',   // क्लासिक अवतार प्रारंभिक रंग
    avatarSize: 52,               // क्लासिक अवतार आकार (px)
    mediaRadius: 8,               // बैनर/कैप्शन/कैरोसेल मीडिया का कोना रेडियस (px)
    slideCaptionColor: '#ffffff', // कैरोसेल स्लाइड कैप्शन टेक्स्ट का रंग
    slideScrimColor: '#000000',  // कैरोसेल स्लाइड कैप्शन पृष्ठभूमि स्क्रिम
    pagerDotActiveColor: '#ff4c00', // कैरोसेल सक्रिय पेज डॉट
    pagerDotColor: '#c4c4c4'      // कैरोसेल निष्क्रिय पेज डॉट्स
  }
}]);

प्री-3.75 क्लासिक सेल को पुनर्स्थापित करना

क्लासिक सेल के पिछले लुक को बनाए रखने के लिए inboxWidget.legacyClassicCell: true सेट करें — 52px गोल अवतार के बजाय 40px आइकन कॉलम, कोई अपठित डॉट नहीं, और एक अनक्लैम्प्ड बॉडी। banner, captioned, और carousel लेआउट इस विकल्प से अप्रभावित रहते हैं।

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

आवश्यकताएँ

• साइट Web SDK को Pushwoosh CDN से लोड करती है, जैसा कि कार्ड पर बताया गया है। कार्ड Settings source चाहे जो भी हो, आपकी साइट पर init स्निपेट या यह पेज (देखें Web Push SDK 3.0), काम करता है, लेकिन आवश्यक SDK संस्करण उस स्रोत पर निर्भर करता है:
  • आपकी साइट पर init स्निपेट: Web SDK 3.93.1 या उसके बाद का संस्करण। पुराना SDK कार्ड को अनदेखा करता है और inboxWidget को केवल स्निपेट से पढ़ता है।
  • यह पेज: कार्ड के मानों के लिए Web SDK 3.92 या उसके बाद का संस्करण, और नीचे बताए गए npm पर बंद करने के लिए 3.93.0 या उसके बाद का संस्करण।
• पेज पर वह एलिमेंट मौजूद है जो इनबॉक्स खोलता है, डिफ़ॉल्ट रूप से #pwInbox। यदि यह मौजूद नहीं है, तो इनबॉक्स नहीं खुलता, और ब्राउज़र कंसोल में Error during Pushwoosh initialization त्रुटि दिखती है, जो गायब एलिमेंट का नाम बताती है और यह भी बताती है कि उसकी ID कहाँ बदलनी है।
• जो साइट SDK को npm से इंस्टॉल करती है, उस पर कार्ड विजेट को बंद कर सकता है, लेकिन चालू नहीं कर सकता, क्योंकि साइट विजेट को स्वयं बनाती है।

Control Panel से विजेट सेट अप करने के लिए:

1. Settings → Configure platforms → Web पर जाएं।

2. Inbox widget कार्ड पर, Configure पर क्लिक करें।

   

3. Show the inbox on the site चालू करें।

4. उन फ़ील्ड्स को भरें जिन्हें आप पैनल से प्रबंधित करना चाहते हैं, और बाकी को खाली छोड़ दें। खाली फ़ील्ड सहेजा नहीं जाता, इसलिए स्निपेट का मान, या SDK का डिफ़ॉल्ट, फिर भी लागू रहता है। triggerId और appendTo को स्निपेट में उस मार्कअप के पास रखने के लिए, जिसकी ओर वे इशारा करते हैं, ID of the element that opens the inbox और Insert into (CSS selector) को खाली छोड़ें।

5. प्रीव्यू में परिणाम जांचें। दोनों स्थितियाँ देखने के लिए With messages और No messages के बीच स्विच करें।

   

6. फ़ॉर्म सहेजें। Width, px में 200 से 1200 तक की पूर्ण संख्या, और Corner radius, px में 0 से 64 तक की पूर्ण संख्या स्वीकार की जाती है। कोई भी अन्य मान फ़ील्ड के नीचे त्रुटि दिखाता है और सहेजा नहीं जाता।

कार्ड स्निपेट के साथ कैसे काम करता है

कार्ड में सहेजे गए मान init स्निपेट की समान inboxWidget कुंजियों को कुंजी-दर-कुंजी ओवरराइड करते हैं। प्रत्येक फ़ील्ड एक कुंजी सेट करता है:

अनुभाग	फ़ील्ड	inboxWidget कुंजी
Placement	ID of the element that opens the inbox	triggerId
Placement	Opens	position
Placement	Insert into (CSS selector)	appendTo
Texts	Widget title	title
Texts	Title when there are no messages	emptyInboxTitle
Texts	Text when there are no messages	emptyInboxText
Texts	Image when there are no messages (URL)	emptyInboxIconUrl
Appearance	Width, px (200–1200)	widgetWidth
Appearance	Corner radius, px (0–64)	borderRadius
Appearance	Font	fontFamily
Appearance	Background, Text, Border	bgColor, textColor, borderColor
Appearance	Counter background, Counter text, Unread mark	badgeBgColor, badgeTextColor, unreadDotColor

जो कुंजियां कार्ड में नहीं हैं, जैसे सेल लेआउट पैरामीटर और legacyClassicCell, वे हमेशा स्निपेट से पढ़ी जाती हैं।

Show the inbox on the site स्विच भी इसी तरह काम करता है। जब तक इसे पैनल में सहेजा नहीं जाता, कार्ड का बैज Set in the snippet दिखाता है, और स्निपेट का enable तय करता है कि विजेट दिखे या नहीं। स्विच सहेजने के बाद, बैज On या Off दिखाता है, और कार्ड स्निपेट को ओवरराइड करता है:

• Off विजेट को छिपा देता है, भले ही स्निपेट में enable: true सेट हो।
• On विजेट को दिखाता है, भले ही स्निपेट में inboxWidget बिल्कुल न हो। enable: true की तरह, यह विज़िटरों को पुश अनुमति के बिना इनबॉक्स डिलीवरी के लिए रजिस्टर करता है।

सहेजे गए बदलाव एक मिनट के भीतर, अगली बार पेज लोड होने पर साइट तक पहुँचते हैं।

विजेट को वापस स्निपेट को सौंपने के लिए, कार्ड पर Return to snippet पर क्लिक करें और पुष्टि करें। कार्ड में कुछ भी सहेजे जाने के बाद यह बटन दिखाई देता है। यह पैनल में सहेजी गई सभी इनबॉक्स सेटिंग्स को हटा देता है, और साइट फिर से अपने स्निपेट की inboxWidget सेटिंग्स का उपयोग करती है।

API

विजेट को खोलने या बंद करने के लिए, निम्नलिखित API विधि का उपयोग करें:

उदाहरण

Pushwoosh.pwinboxWidget.toggle(open?: boolean);

विजेट खोलने से यह सर्वर से ताज़ा हो जाता है, अधिकतम हर 30 सेकंड में एक बार — एक स्टैंडअलोन ऐप इनबॉक्स संदेश बिना पुश के एक चैनल पर चलता है, इसलिए पेज लोड के बीच कोई और इसकी घोषणा नहीं करता है।