मूल इन-ऐप संदेश बनाएँ
मूल इन-ऐप्स रेडी-मेड लेआउट का उपयोग करते हैं जिन्हें Pushwoosh SDK सीधे डिवाइस पर रेंडर करता है, बजाय इसके कि एक कस्टम इन-ऐप HTML पेज लोड करे। यह उन्हें तेजी से लोड करने और अधिक सुचारू रूप से एनिमेट करने में मदद करता है, और आपको एक बनाने के लिए डिज़ाइन या विकास कौशल की आवश्यकता नहीं होती है।
जब आप जल्दी से एक प्रमोशन, रिमाइंडर, या फीचर घोषणा लॉन्च करना चाहते हैं और एक पूरी तरह से कस्टम लेआउट आवश्यक नहीं है, तो एक मूल इन-ऐप का उपयोग करें। यदि आपको डिज़ाइन पर पूर्ण नियंत्रण की आवश्यकता है, तो इसके बजाय एक HTML-आधारित इन-ऐप बनाएँ।
पूर्वापेक्षाएँ
Anchor link toएक मूल इन-ऐप टेम्प्लेट बनाने से पहले, सुनिश्चित करें:
- Pushwoosh SDK आपके ऐप में एकीकृत है ताकि इन-ऐप संदेश दिखाई दे सकें। और जानें
- आपका ऐप modal, fullscreen, और stories के लिए iOS SDK 7.2.0+ या Android SDK 6.10.0+ पर चलता है। Sheet, carousel, और banner के लिए iOS SDK 7.2.1+ या Android SDK 6.10.1+ की आवश्यकता है। Video के लिए iOS SDK 7.2.0+ या Android SDK 6.11.0+ की आवश्यकता है।
क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क
Anchor link toमूल इन-ऐप मॉड्यूल आपके स्टैक के आधार पर अलग-अलग तरीके से शिप होता है:
- Flutter मूल इन-ऐप मॉड्यूल को स्वचालित रूप से बंडल करता है। Pushwoosh Flutter प्लगइन के अलावा किसी अतिरिक्त सेटअप की आवश्यकता नहीं है।
- React Native, Cordova, Capacitor, Unity, और Expo मूल इन-ऐप मॉड्यूल को बंडल नहीं करते हैं। इसे अपने ऐप के अंतर्निहित Android/iOS प्रोजेक्ट में स्वयं जोड़ें: Android पर
pushwoosh-inapp-ui, iOS परPushwooshInApp। आपके फ्रेमवर्क की एकीकरण मार्गदर्शिका देखें कि आपके प्रोजेक्ट में मूल मॉड्यूल कैसे जोड़े जाते हैं। - वेब समर्थित नहीं है। मूल इन-ऐप्स Android और iOS SDK के माध्यम से रेंडर होते हैं, और वेब SDK में कोई मूल इन-ऐप मॉड्यूल नहीं है।
एक मूल इन-ऐप टेम्प्लेट बनाएँ
Anchor link to- कंटेंट → इन-ऐप्स पर जाएँ।
- इन-ऐप बनाएँ के बगल में तीर पर क्लिक करें और नेटिव इन-ऐप चुनें। नेटिव संपादक सीधे खुलता है।
- एक टेम्प्लेट नाम दर्ज करें।
- संपादक के शीर्ष पर प्रदर्शन प्रकार में, एक प्रदर्शन प्रकार चुनें: modal, fullscreen, stories, sheet, carousel, banner, या video। हर प्रकार को क्या चाहिए, यह जानने के लिए प्रदर्शन प्रकार को कॉन्फ़िगर करें देखें।
संपादक दाईं ओर एक लाइव मोबाइल प्रीव्यू और बाईं ओर टेम्प्लेट फ़ील्ड दिखाता है, जो कंटेंट, कॉन्फिग, और एक्शन में समूहीकृत हैं। प्रत्येक समूह में आप जो देखते हैं वह आपके द्वारा चुने गए प्रदर्शन प्रकार पर निर्भर करता है।
प्रदर्शन प्रकार को कॉन्फ़िगर करें
Anchor link toमोडल
Anchor link toएक केंद्रित कार्ड, वैकल्पिक रूप से एक मंद पृष्ठभूमि पर दिखाया गया है।
- कंटेंट के तहत, एक शीर्षक और संदेश जोड़ें, प्रत्येक अपने स्वयं के टेक्स्ट रंग के साथ, साथ ही एक वैकल्पिक छवि। एक छवि जोड़ें देखें।
- कॉन्फिग के तहत, कार्ड पृष्ठभूमि रंग सेट करें। यह आपके टेक्स्ट और छवि के पीछे कार्ड को भरता है।
- यदि आप एक ✕ नियंत्रण चाहते हैं ताकि उपयोगकर्ता बिना बटन टैप किए इन-ऐप को खारिज कर सकें, तो क्लोज बटन चालू करें।
- कार्ड के पीछे स्क्रीन को गहरा करने और अपने संदेश पर ध्यान केंद्रित रखने के लिए बैकग्राउंड को डिम करें चालू करें।
- एक्शन के तहत, एक या अधिक बटन जोड़ें। बटन कॉन्फ़िगर करें देखें।

फुलस्क्रीन
Anchor link toएक एज-टू-एज कवर इमेज जिसके ऊपर टेक्स्ट और बटन होते हैं। बाएं पैनल पर इन फ़ील्ड्स को भरें:
- कंटेंट के तहत, एक कवर इमेज जोड़ें, साथ ही एक शीर्षक और संदेश, प्रत्येक अपने स्वयं के टेक्स्ट रंग के साथ। एक छवि जोड़ें देखें।
- कॉन्फिग के तहत, कवर रंग सेट करें। यह कवर इमेज लोड होने के दौरान दिखाई देता है, या यदि आप इमेज को खाली छोड़ देते हैं तो यह अपने आप दिखाई देता है।
- यदि आप एक ✕ नियंत्रण चाहते हैं ताकि उपयोगकर्ता बिना बटन टैप किए इन-ऐप को खारिज कर सकें, तो क्लोज बटन चालू करें।
- एक्शन के तहत, एक या अधिक बटन जोड़ें। बटन कॉन्फ़िगर करें देखें।

स्टोरीज़
Anchor link toशीर्ष पर प्रगति बार के साथ पूर्ण-स्क्रीन स्लाइड्स का एक क्रम, सोशल मीडिया स्टोरीज़ के समान। प्रत्येक स्लाइड कंटेंट के तहत अपनी स्वयं की स्टोरीज़ प्रविष्टि है।
- पहली स्लाइड की इमेज, शीर्षक, और संदेश (प्रत्येक अपने स्वयं के टेक्स्ट रंग के साथ) भरें। एक छवि जोड़ें देखें।
- सेकंड को सेट करें कि स्लाइड आगे बढ़ने से पहले स्क्रीन पर कितनी देर तक रहती है। डिफ़ॉल्ट 5 है। 1 से 30 तक का मान दर्ज करें। इस सीमा के बाहर के मान सहेजें को एक सत्यापन त्रुटि के साथ ब्लॉक करते हैं।
- वैकल्पिक रूप से, स्लाइड के अंदर जोड़ें पर क्लिक करें ताकि इसे अपना CTA बटन मिल सके। बटन कॉन्फ़िगर करें देखें।

- एक और स्लाइड जोड़ने के लिए अंतिम स्लाइड के नीचे जोड़ें पर क्लिक करें, फिर उसके लिए चरण 1-3 दोहराएँ।
- कॉन्फिग के तहत, यदि आप चाहते हैं कि अंतिम स्लाइड समाप्त होने के बाद कहानी पहली स्लाइड से फिर से शुरू हो, तो लूप चालू करें।
- यदि आप एक ✕ नियंत्रण चाहते हैं ताकि उपयोगकर्ता सभी स्लाइड्स के चलने से पहले बाहर निकल सकें, तो क्लोज बटन चालू करें।

उपयोगकर्ता के लिए तैयार कहानी कैसी दिखती है इसका उदाहरण
Anchor link toएक बॉटम शीट जो स्क्रीन के निचले किनारे से ऊपर की ओर स्लाइड करती है। शीर्ष पर एक हैंडल उपयोगकर्ताओं को इसे खारिज करने के लिए नीचे खींचने देता है।
बाएं पैनल पर इन फ़ील्ड्स को भरें:
- कंटेंट के तहत, एक शीर्षक और संदेश जोड़ें, प्रत्येक अपने स्वयं के टेक्स्ट रंग के साथ, साथ ही एक वैकल्पिक छवि। एक छवि जोड़ें देखें।
- कॉन्फिग के तहत, शीट पृष्ठभूमि रंग सेट करें। यह आपके टेक्स्ट और छवि के पीछे पैनल को भरता है।
- यदि आप एक ✕ नियंत्रण चाहते हैं ताकि उपयोगकर्ता बिना बटन टैप किए शीट को खारिज कर सकें, तो क्लोज बटन चालू करें।
- एक्शन के तहत, एक या अधिक बटन जोड़ें। बटन कॉन्फ़िगर करें देखें।

कैरोसेल
Anchor link toएक पूर्ण-स्क्रीन संदेश जिसमें कई कार्ड होते हैं जिन्हें उपयोगकर्ता स्वाइप करते हैं। नीचे डॉट्स दिखाते हैं कि कौन सा कार्ड सक्रिय है। कंटेंट के तहत, प्रत्येक कार्ड एक अलग कार्ड्स प्रविष्टि है।
- पहले कार्ड की इमेज, शीर्षक, और संदेश (प्रत्येक अपने स्वयं के टेक्स्ट रंग के साथ) भरें। एक छवि जोड़ें देखें।
- कार्ड के लिए एक्शन सेट करें। जब उपयोगकर्ता कार्ड टैप करता है तो इन-ऐप को खारिज करने के लिए क्लोज चुनें, या एक लिंक खोलने के लिए url चुनें (बटन कॉन्फ़िगर करें के समान विकल्प)।
- एक और कार्ड जोड़ने के लिए अंतिम कार्ड के नीचे जोड़ें पर क्लिक करें, फिर उसके लिए चरण 1-2 दोहराएँ।
- यदि आप एक ✕ नियंत्रण चाहते हैं ताकि उपयोगकर्ता बिना कार्ड टैप किए कैरोसेल छोड़ सकें, तो क्लोज बटन चालू करें।

बैनर
Anchor link toस्क्रीन के ऊपरी या निचले किनारे पर पिन की गई एक कॉम्पैक्ट बार, उन संदेशों के लिए जो पूरे UI को ब्लॉक नहीं करना चाहिए।
- कंटेंट के तहत, एक शीर्षक और संदेश जोड़ें, प्रत्येक अपने स्वयं के टेक्स्ट रंग के साथ, साथ ही एक वैकल्पिक छोटी छवि। एक छवि जोड़ें देखें।
- कॉन्फिग के तहत, स्थिति को ऊपर या नीचे पर सेट करें ताकि बैनर को आप जिस स्क्रीन किनारे पर चाहते हैं, वहां पिन किया जा सके।
- ऑटो-डिस्मिस, सेकंड को सेट करें ताकि बैनर उतने सेकंड के बाद स्वचालित रूप से बंद हो जाए। इसे खाली छोड़ दें ताकि बैनर तब तक बना रहे जब तक उपयोगकर्ता इसे खारिज न कर दे।
- बार के लिए पृष्ठभूमि रंग सेट करें।
- यदि आप बैनर पर एक ✕ नियंत्रण चाहते हैं, तो क्लोज बटन चालू करें।
- एक्शन के तहत, एक्शन को क्लोज या url पर सेट करें। बैनर में अलग-अलग बटन नहीं होते हैं। बैनर पर कहीं भी टैप करने से यह एक्शन चलता है। क्लोज और url व्यवहार के लिए बटन कॉन्फ़िगर करें देखें।

वीडियो
Anchor link toएक HLS स्ट्रीमिंग लिंक (.m3u8) या एक सीधी .mp4 फ़ाइल के लिए एक पूर्ण-स्क्रीन प्लेयर, जिसके ऊपर एक वैकल्पिक शीर्षक, संदेश और बटन होते हैं।
- कंटेंट के तहत, वीडियो URL (आवश्यक) को एक
.m3u8या.mp4फ़ाइल के लिए एक पूर्ण HTTPS लिंक पर सेट करें। वैकल्पिक रूप से, प्लेबैक शुरू होने से पहले दिखाई जाने वाली एक पोस्टर छवि जोड़ें, और यदि वीडियो नहीं चल सकता है तो दिखाई जाने वाली एक फॉलबैक छवि जोड़ें। - एक शीर्षक और संदेश जोड़ें, प्रत्येक अपने स्वयं के टेक्स्ट रंग के साथ।
- कॉन्फिग के तहत, वीडियो समाप्त होने के बाद उसे फिर से शुरू करने के लिए लूप चालू करें।
- ध्वनि बंद करके प्लेबैक शुरू करने के लिए म्यूटेड चालू करें।
- यदि आप एक ✕ नियंत्रण चाहते हैं ताकि उपयोगकर्ता वीडियो समाप्त होने की प्रतीक्षा किए बिना इन-ऐप को खारिज कर सकें, तो क्लोज बटन चालू करें।
- एक्शन के तहत, एक या अधिक बटन जोड़ें। बटन कॉन्फ़िगर करें देखें।

टेक्स्ट फ़ील्ड कॉन्फ़िगर करें
Anchor link toटेक्स्ट फ़ील्ड मल्टी-लाइन टेक्स्ट का समर्थन नहीं करते हैं। यदि आप एंटर दबाते हैं, तो संपादक एक लाइन ब्रेक दिखा सकता है, लेकिन Pushwoosh इसके बजाय एक स्पेस सहेजता है। डिवाइस पर, टेक्स्ट एक लाइन के रूप में दिखाई देता है।
एक इमोजी जोड़ने के लिए, फ़ील्ड टूलबार के बगल में इमोजी पर क्लिक करें। इमोजी सादे टेक्स्ट के समान टेक्स्ट फ़ील्ड में समर्थित हैं। लेआउट पर वे कैसे दिखते हैं यह देखने के लिए लाइव प्रीव्यू देखें।
डायनामिक कंटेंट जोड़ें
Anchor link toप्रत्येक टेक्स्ट फ़ील्ड टैग और यूज़र आईडी के साथ पर्सनलाइज़ेशन का समर्थन करता है।
- फ़ील्ड टूलबार के बगल में पर्सनलाइज़ेशन पर क्लिक करें।
- टैग के तहत, एक टैग या यूज़र आईडी चुनें।
- एक प्रारूप संशोधक चुनें (उदाहरण के लिए, CapitalizeFirst या regular)।
- वैकल्पिक रूप से, एक डिफ़ॉल्ट टैग मान दर्ज करें।
- सम्मिलित करें पर क्लिक करें।

सम्मिलित टैग फ़ील्ड में एक चिप के रूप में दिखाई देता है। आप सम्मिलित करें पर क्लिक करने से पहले टैग, संशोधक और डिफ़ॉल्ट को बदल सकते हैं। पर्सनलाइज़ेशन डायनामिक कंटेंट के समान टैग, संशोधक और डिफ़ॉल्ट का उपयोग करता है।
जब आप सहेजें पर क्लिक करते हैं, तो Pushwoosh प्रत्येक टेक्स्ट फ़ील्ड में डायनामिक कंटेंट और लिक्विड की जाँच करता है। यदि कोई फ़ील्ड पार्स नहीं होती है (उदाहरण के लिए, एक बंद नहीं किया गया {% if %} टैग), तो सहेजें ब्लॉक हो जाता है और एक डायनामिक कंटेंट में त्रुटियाँ हैं टोस्ट टूटे हुए फ़ील्ड और भाषा का नाम बताता है। इसे वहां ठीक करें, फिर सहेजें पर फिर से क्लिक करें।
बटन कॉन्फ़िगर करें
Anchor link toमोडल, फुलस्क्रीन, प्रत्येक स्टोरीज़ स्लाइड, शीट, और वीडियो समान बटन फ़ील्ड का उपयोग करते हैं:
- बटन टेक्स्ट और उसका रंग।
- बैकग्राउंड, बॉर्डर रंग, और बॉर्डर रेडियस।
- एक्शन: चुनें कि जब उपयोगकर्ता बटन टैप करता है तो क्या होता है:
- क्लोज: इन-ऐप को खारिज करता है।
- url: आपके द्वारा दिखाई देने वाले फ़ील्ड में दर्ज किए गए लिंक को खोलता है। एक वेब पता (उदाहरण के लिए,
https://example.com) या अपने ऐप में एक डीप लिंक (उदाहरण के लिए,myapp://product/123) का उपयोग करें।

एक और बटन जोड़ने के लिए जोड़ें पर क्लिक करें, या इसे हटाने के लिए एक बटन पर × पर क्लिक करें।
एक छवि जोड़ें
Anchor link toप्रत्येक छवि फ़ील्ड (छवि, कवर छवि, और प्रत्येक कार्ड या स्लाइड की छवि) एक ही तरह से काम करती है। एक होस्ट की गई छवि URL को सीधे फ़ील्ड में पेस्ट करें, या मीडिया स्टोर खोलने और आपके द्वारा पहले से अपलोड की गई छवि चुनने के लिए इसके बगल में मीडिया स्टोरेज से चुनें पर क्लिक करें। मीडिया स्टोर से एक छवि चुनने से फ़ील्ड में वर्तमान में जो भी URL है वह बदल जाता है।
एक बारकोड जोड़ें
Anchor link toमीडिया स्टोरेज से चुनें के बगल में, एक बारकोड बनाएँ पर क्लिक करें ताकि एक दराज खुले जो एक स्कैन करने योग्य Code 128, EAN-13, EAN-8, UPC-A, या QR कोड उत्पन्न करता है और परिणामी URL को फ़ील्ड में लिखता है:

- कोड। एन्कोड करने के लिए मान: या तो एक निश्चित कोड, जैसे
SAVE20, या एक डिवाइस टैग, जैसे{Coupon|String|}या{LoyaltyCardNumber|String|}, ताकि प्रत्येक प्राप्तकर्ता अपना स्वयं का कोड देखे। एक डिवाइस टैग प्राप्तकर्ता के वास्तविक मान के साथ सीधे उनके डिवाइस पर भरा जाता है, ठीक इन-ऐप दिखाई देने से पहले। डिफ़ॉल्ट{Coupon|String|}है।

- सिम्बोलॉजी। बारकोड प्रारूप चुनें: Code 128, EAN-13, EAN-8, और UPC-A मानक खुदरा बारकोड हैं जो हैंडहेल्ड स्कैनर द्वारा पढ़े जाते हैं, और QR एक वर्गाकार कोड है जिसे कोई भी फ़ोन कैमरा स्कैन कर सकता है।
- एरर करेक्शन। केवल तभी दिखाई देता है जब आप सिम्बोलॉजी को QR पर सेट करते हैं। वास्तविक दुनिया के QR कोड खरोंच, धुंधले, या आंशिक रूप से एक लोगो द्वारा कवर हो सकते हैं, और एरर करेक्शन कोड में पकी हुई अतिरिक्त जानकारी है ताकि यह उस क्षति के बावजूद भी स्कैन हो सके। चुनें कि यह कितनी क्षति सहन कर सकता है:
L,M,Q, याH, सबसे कम से सबसे मजबूत तक। उच्च स्तर अधिक क्षति सहन करते हैं लेकिन एक सघन, व्यस्त दिखने वाला कोड उत्पन्न करते हैं। डिफ़ॉल्टMहै।

- अंकों में कोड प्रिंट करें। कोड के नीचे मान दिखाएँ।

जब कोड एक डिवाइस टैग होता है, तो प्रीव्यू एक नमूना मान प्रतिस्थापित करता है, क्योंकि यह एक वास्तविक प्राप्तकर्ता के टैग को हल नहीं कर सकता है। एक निश्चित कोड, जैसे SAVE20, ठीक वैसे ही प्रीव्यू करता है जैसे दर्ज किया गया है।
ऊपर छवि फ़ील्ड में उत्पन्न URL को कॉपी करने के लिए छवि फ़ील्ड में सम्मिलित करें पर क्लिक करें।

स्थानीयकरण जोड़ें
Anchor link toडिफ़ॉल्ट रूप से, एक मूल इन-ऐप में एक भाषा होती है। और जोड़ने के लिए:
- शीर्ष बार में भाषा चयनकर्ता के बगल में + पर क्लिक करें।
- जोड़ने के लिए भाषाएँ चुनें और लागू करें पर क्लिक करें।

- भाषाओं के बीच स्विच करने और प्रत्येक के लिए टेक्स्ट फ़ील्ड भरने के लिए शीर्ष बार में भाषा चयनकर्ता का उपयोग करें।
टेम्प्लेट सहेजें
Anchor link toअपने परिवर्तनों को बनाए रखने के लिए ऊपरी दाईं ओर सहेजें पर क्लिक करें।
टेम्प्लेट फिर कंटेंट → इन-ऐप्स में आपके अन्य इन-ऐप टेम्प्लेट के साथ दिखाई देता है।
इसे एक अभियान में उपयोग करें
Anchor link toएक मूल इन-ऐप टेम्प्लेट आपके अन्य इन-ऐप टेम्प्लेट के साथ टेम्प्लेट पिकर में दिखाई देता है।
आप इसका उपयोग कर सकते हैं:
- एक तत्काल इन-ऐप भेजें
- एक ग्राहक यात्रा में एक इन-ऐप चरण जोड़ें
- जब उपयोगकर्ता एक पुश टैप करता है तो एक इन-ऐप खोलें