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

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

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

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

आवश्यक शर्तें

Anchor link to

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

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

Anchor link to

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

उदाहरण
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

ट्रिगर

Anchor link to

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

ट्रिगर पर अपठित संदेश बैज के साथ वेब इनबॉक्स विजेट

पोजीशनिंग

Anchor link to

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

उदाहरण
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 द्वारा की जाती है, इसलिए इसे एक क्लास, आईडी, या तत्व का स्पष्ट विनिर्देश चाहिए।

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

Anchor link to

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

Anchor link to

विजेट टेक्स्ट को अनुकूलित करने के लिए, 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!'    // खाली इनबॉक्स विजेट टेक्स्ट
  }
}]);

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

अनुकूलित टेक्स्ट के साथ खाली वेब इनबॉक्स विजेट

दिखावट को अनुकूलित करना

Anchor link to

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

उदाहरण
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 पथ
  }
}]);

API

Anchor link to

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

उदाहरण
Pushwoosh.pwinboxWidget.toggle(open?: boolean);