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

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

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

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

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

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

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

ट्रिगर

विजेट को रेंडर करने के लिए, आपको विजेट के लिए एक ट्रिगर एलिमेंट निर्दिष्ट करना होगा। पेज पर कोई भी DOM-एलिमेंट ट्रिगर हो सकता है। इसकी ID को “pwInbox” के रूप में निर्दिष्ट करें या SDK को इनिशियलाइज़ करते समय triggerId पैरामीटर को कोई भी कस्टम ID असाइन करें।
जब 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-इंडेक्स
  }
}]);

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

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

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

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