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

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

Anchor link to

विजेट एक संदेश को चार सेल लेआउट में से एक के रूप में खींचता है — 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'      // कैरोसेल निष्क्रिय पेज डॉट्स
  }
}]);

API

Anchor link to

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

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

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