इन-ऐप एडिटर ब्लॉक्स संदर्भ

हर उस ब्लॉक के लिए संदर्भ जिसे आप बिल्ट-इन एडिटर कैनवास पर जोड़ सकते हैं।

प्रत्येक ब्लॉक प्रकार संदेश में एक अलग उद्देश्य पूरा करता है:

• हेडिंग: शीर्षक और छोटी हेडलाइंस
• टेक्स्ट: बॉडी कॉपी और लंबे विवरण
• बटन: एक टैप करने योग्य कॉल टू एक्शन
• इमेज: मीडिया स्टोर से तस्वीरें, अपलोड, या URL
• वीडियो: एक टैप करने योग्य वीडियो थंबनेल जो YouTube या Vimeo वीडियो खोलता है
• कार्ड: एक लेआउट में हेडिंग, टेक्स्ट और बटन के साथ एक इमेज
• डिवाइडर: एक रेखा जो अनुभागों को अलग करती है
• कॉलम: साइड-बाय-साइड लेआउट (2, 3, या 4 बराबर कॉलम, या 33/67 और 67/33 स्प्लिट्स)
• टाइमर: ऑफ़र और समय-सीमा के लिए एक काउंटडाउन
• बारकोड: एक स्कैन करने योग्य Code 128, EAN-13, EAN-8, UPC-A, या QR कोड जो एक वैयक्तिकरण मान से उत्पन्न होता है, जैसे कि वाउचर
• मेन्यू: नेविगेशन या संपर्क लिंक की एक पंक्ति या कॉलम
• सोशल: आइकन जो आपके सोशल प्रोफाइल से लिंक होते हैं
• HTML: कस्टम HTML, जैसे कि एक फ़ॉर्म, सर्वेक्षण, या एम्बेडेड वीडियो
• प्रोडक्ट्स: आपके प्रोडक्ट कैटलॉग या उपयोगकर्ता के छोड़े गए कार्ट से उत्पाद कार्ड का एक ग्रिड

एडिटर ब्लॉक्स को कैसे कॉन्फ़िगर करें

ब्लॉक्स टैब से कैनवास पर एक ब्लॉक खींचें, या इसे अंत में जोड़ने के लिए क्लिक करें। दाएं पैनल में इसकी सेटिंग्स खोलने के लिए ब्लॉक का चयन करें और सामग्री, लिंक, आकार और स्पेसिंग को कॉन्फ़िगर करें।

टिप

हर ब्लॉक में Visibility और Display condition सेटिंग्स भी होती हैं। इनका उपयोग किसी ब्लॉक को फ़ोन या डेस्कटॉप पर छिपाने के लिए, या इसे केवल विशिष्ट उपयोगकर्ताओं को दिखाने के लिए करें। और जानें

हेडिंग और टेक्स्ट

हेडिंग और टेक्स्ट ब्लॉक में वह कॉपी होती है जिसे उपयोगकर्ता इन-ऐप संदेश में पढ़ते हैं। कैनवास पर टेक्स्ट संपादित करें और इसे टूलबार से प्रारूपित करें।

कैनवास पर इसकी कॉपी संपादित करने के लिए हेडिंग या टेक्स्ट ब्लॉक पर क्लिक करें। फ़ॉर्मेटिंग टूलबार लाने के लिए कुछ टेक्स्ट चुनें: बोल्ड, इटैलिक, अंडरलाइन, अलाइनमेंट, एक लिंक बटन, और एक टेक्स्ट स्टाइल ड्रॉपडाउन।

मर्ज टैग प्लेसहोल्डर होते हैं जो उपयोगकर्ता के प्रोफ़ाइल से एक टैग मान संदेश में डालते हैं, ताकि प्रत्येक ग्राहक को व्यक्तिगत कॉपी दिखाई दे। एक जोड़ने के लिए, टेक्स्ट चुनें, टूलबार में मर्ज टैग पर क्लिक करें, और अपने खाते से एक टैग चुनें। व्यक्तिगत इन-ऐप संदेशों के बारे में और जानें

इमेज

एक इमेज ब्लॉक इन-ऐप टेम्पलेट में एक तस्वीर प्रदर्शित करता है।

दाएं पैनल में इमेज सेटिंग्स खोलने के लिए इसे कैनवास पर चुनें।

• इमेज जोड़ें / इमेज बदलें: जब ब्लॉक खाली हो तो इमेज जोड़ें पर क्लिक करें, या जब कोई तस्वीर पहले से सेट हो तो इमेज बदलें पर क्लिक करें। आप एक फ़ाइल अपलोड कर सकते हैं या अपने मीडिया स्टोर से एक चुन सकते हैं।
• इमेज URL: इमेज का एक होस्टेड लिंक पेस्ट करें।
• ऑल्ट टेक्स्ट: एक्सेसिबिलिटी के लिए इमेज का वर्णन करें।
• प्रॉम्प्ट: एक इमेज के लिए AI जनरेशन प्रॉम्प्ट जिसे आपने Generate with AI के साथ बनाया है।
• चौड़ाई (px) / ऊंचाई (px): इमेज को एक पिक्सेल आकार में ठीक करें। इसे स्वचालित रूप से आकार देने के लिए एक फ़ील्ड खाली छोड़ दें। इन फ़ील्ड्स के नीचे, एक संकेत दिखाता है कि इमेज किस आकार में प्रस्तुत होती है और अपलोड करने का आकार: प्रस्तुत आकार का 2×, ताकि तस्वीर फ़ोन स्क्रीन पर तेज बनी रहे। यदि अपलोड की गई फ़ाइल किसी भी अक्ष पर प्रस्तुत आकार से छोटी है, तो एक चेतावनी आपको बताती है कि इसे अपस्केल किया जाएगा और पिक्सेलयुक्त दिखेगा।
• कॉर्नर रेडियस (px): इमेज के कोनों को गोल करें।
• अलाइनमेंट: बाएँ, केंद्र, या दाएँ।

लिंक में, एक एक्शन प्रकार (उदाहरण के लिए वेबसाइट खोलें या URL या डीपलिंक) और उसका URL सेट करें ताकि इमेज टैप होने पर कुछ खुले, और एक लिंक लक्ष्य ताकि यह उसी टैब या एक नए टैब में खुले।

स्पेसिंग में, इमेज के चारों ओर जगह जोड़ने के लिए पैडिंग चालू करें। हर तरफ समान पैडिंग के लिए सभी तरफ का उपयोग करें, या प्रत्येक तरफ को अलग से सेट करने के लिए अधिक विकल्प चालू करें।

अनुशंसित इमेज आकार

चौड़ाई (px) / ऊंचाई (px) के तहत संकेत द्वारा दिखाए गए आकार का 2× आकार की इमेज अपलोड करें। यह वह संख्या है जिसे जांचना है, क्योंकि यह आपकी अपनी चौड़ाई/ऊंचाई और क्रॉप सेटिंग्स को दर्शाती है। जब आपने अभी तक कोई ब्लॉक सेट नहीं किया है, तो इन सामान्य स्लॉट चौड़ाई को एक शुरुआती बिंदु के रूप में उपयोग करें:

इमेज कहाँ बैठती है	पर प्रस्तुत होता है	कम से कम अपलोड करें
डिफ़ॉल्ट पॉपअप में पूर्ण-चौड़ाई वाली इमेज	600 px चौड़ाई तक	1200 px चौड़ाई
फ़ोन पूर्वावलोकन	360–430 px चौड़ाई, डिवाइस के आधार पर	860 px चौड़ाई तक
टैबलेट/डेस्कटॉप पूर्वावलोकन	768 px चौड़ाई	1536 px चौड़ाई

पहलू अनुपात आप पर निर्भर है। लेआउट उत्तरदायी है, इसलिए ऊंचाई जो भी ऊंचाई (px) या क्रॉप आप सेट करते हैं, उसका अनुसरण करती है। डिफ़ॉल्ट पॉपअप चौड़ाई बदलने के लिए दस्तावेज़ और पॉपअप आकार देखें।

नोट

यह तालिका बिल्ट-इन एडिटर में इमेज ब्लॉक को कवर करती है। नेटिव इन-ऐप्स (मोडल, फुलस्क्रीन, स्टोरीज़, शीट, कैरोसेल, बैनर, वीडियो) के लिए अभी तक कोई अनुशंसित कवर आकार नहीं है।

वीडियो

एक वीडियो ब्लॉक संदेश में एक YouTube या Vimeo वीडियो को एक टैप करने योग्य थंबनेल के रूप में जोड़ता है। संदेश एक ▶ ओवरले के साथ एक स्थिर इमेज दिखाता है। इसे टैप करने पर YouTube या Vimeo ऐप या ब्राउज़र में वीडियो खुलता है।

इसकी सेटिंग्स खोलने के लिए कैनवास पर ब्लॉक चुनें:

• वीडियो URL: एक YouTube या Vimeo लिंक पेस्ट करें। एडिटर स्वचालित रूप से एक थंबनेल प्राप्त करता है।
• ऑल्ट टेक्स्ट: एक्सेसिबिलिटी के लिए वीडियो का वर्णन करें।
• थंबनेल URL: स्वतः प्राप्त थंबनेल रखें, या मीडिया स्टोर से एक चुनने के लिए थंबनेल जोड़ें / थंबनेल बदलें पर क्लिक करें, या सीधे एक होस्टेड लिंक पेस्ट करें।
• प्ले बटन ओवरले: डिफ़ॉल्ट रूप से चालू। ▶ ओवरले के बिना सादा थंबनेल दिखाने के लिए बंद करें।
• चौड़ाई (px), कॉर्नर रेडियस (px), और अलाइनमेंट: नियंत्रित करें कि थंबनेल कैसा दिखता है और यह लेआउट में कहाँ बैठता है।

कार्ड

एक कार्ड ब्लॉक एक इमेज को एक हेडिंग, टेक्स्ट और बटन के साथ एक ही रेडी-मेड लेआउट में जोड़ता है, ताकि आपको चार अलग-अलग ब्लॉकों को हाथ से रखने और संरेखित करने की आवश्यकता न हो।

• लेआउट: चुनें कि इमेज सामग्री के सापेक्ष किस तरफ बैठती है, या टेक्स्ट को इमेज के चारों ओर लपेटें चालू करें।
• इमेज: इमेज जोड़ें या बदलें, ऑल्ट टेक्स्ट सेट करें, AI जनरेशन प्रॉम्प्ट संपादित करें, पैडिंग जोड़ें, और कॉर्नर रेडियस (px) सेट करें।
• आकार और फिट: इमेज की चौड़ाई, ऊंचाई, क्रॉप (मूल या एक निश्चित अनुपात), और फिट (कवर या एक फोकल पॉइंट) सेट करें। सटीक फ़ील्ड आपके द्वारा चुने गए लेआउट पर निर्भर करते हैं।
• लिंक: टैप करने पर पूरे कार्ड को एक URL खोलने के लिए बनाएं।

कार्ड की हेडिंग, टेक्स्ट और बटन को उसी तरह संपादित करें जैसे आप स्टैंडअलोन हेडिंग, टेक्स्ट, और बटन ब्लॉक संपादित करते हैं।

बटन

एक बटन इन-ऐप संदेश में एक टैप करने योग्य कॉल टू एक्शन है। इसका उपयोग एक URL खोलने, कस्टम JavaScript चलाने, या संदेश को बंद करने के लिए करें।

कैनवास पर इसका लेबल संपादित करने के लिए बटन ब्लॉक पर क्लिक करें। फ़ॉन्ट आकार, टेक्स्ट रंग, बोल्ड, इटैलिक, अंडरलाइन और अलाइनमेंट बदलने के लिए टूलबार का उपयोग करें।

यह सेट करने के लिए कि उपयोगकर्ता बटन टैप करने पर क्या होता है:

1. लिंक डालें/संपादित करें खोलने के लिए टूलबार में लिंक आइकन पर क्लिक करें।
2. एक एक्शन प्रकार चुनें: वेबसाइट खोलें, URL या डीपलिंक, या कस्टम जावास्क्रिप्ट।
3. उस एक्शन के लिए फ़ील्ड भरें (नीचे देखें)।
4. सहेजें पर क्लिक करें।

वेबसाइट खोलें

वेबसाइट खोलें उपयोगकर्ता द्वारा बटन टैप करने पर एक वेब पेज खोलता है। URL में पता दर्ज करें, उदाहरण के लिए https://example.com।

URL या डीपलिंक

URL या डीपलिंक उपयोगकर्ता द्वारा बटन टैप करने पर एक लिंक या डीप लिंक खोलता है। URL में पता दर्ज करें, उदाहरण के लिए एक ऐप स्क्रीन: myapp://screen।

कस्टम जावास्क्रिप्ट चलाएँ

कस्टम जावास्क्रिप्ट उपयोगकर्ता द्वारा बटन टैप करने पर कोड चलाता है। onClick फ़ील्ड में कोड दर्ज करें।

इसका उपयोग तब करें जब एक टैप को केवल एक लिंक खोलने के बजाय Pushwoosh में कुछ करना चाहिए। ऐप में व्यक्ति अभी भी एक सामान्य बटन देखता है। वे टैग या ईवेंट नहीं देखते हैं। आप तय करते हैं कि स्क्रीन पर आगे क्या होता है: संदेश को खुला छोड़ दें, या इसे उसी onClick में बंद कर दें।

onClick में उपलब्ध तरीके

• pushwoosh.closeInApp(): इन-ऐप संदेश बंद करें। टैप के बाद संदेश को खुला रखने के लिए इसे छोड़ दें।
• pushwoosh.sendTags({...}): बाद के अभियानों के लिए मानों को डिवाइस टैग के रूप में सहेजें।
• pushwoosh.postEvent(...): एक कस्टम ईवेंट भेजें, उदाहरण के लिए एक Customer Journey शुरू करने के लिए।
• pushwoosh.getTags(...): वर्तमान टैग पढ़ें। कस्टम HTML में उपयोगी है ताकि संदेश क्या दिखाता है उसे बदला जा सके।
• pushwoosh.getCustomData(): इस इन-ऐप को खोलने वाले पुश से पास किए गए कस्टम डेटा को पढ़ें।
• pushwoosh.registerForPushNotifications(): प्लेटफ़ॉर्म के नेटिव पुश अनुमति संवाद को ट्रिगर करें, उदाहरण के लिए पूर्व-अनुमति इन-ऐप से।

उदाहरण: उपयोगकर्ताओं को एक रुचि चुनने दें और इसे बाद के अभियानों के लिए सहेजें

1. एक टेक्स्ट या हेडिंग ब्लॉक में एक प्रश्न जोड़ें, उदाहरण के लिए: “आप किस खेल में रुचि रखते हैं?”
2. प्रत्येक विकल्प के लिए एक बटन जोड़ें, उदाहरण के लिए: योग और जिम।

3. प्रत्येक बटन के लिए एक्शन प्रकार को कस्टम जावास्क्रिप्ट पर सेट करें।
4. योग बटन के लिए, इसे onClick में पेस्ट करें:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. जिम बटन के लिए, इसे onClick में पेस्ट करें:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

जब उपयोगकर्ता योग पर टैप करता है, तो Pushwoosh उनके डिवाइस पर interest टैग लिखता है और इन-ऐप को बंद कर देता है। फिर आप उस उपयोगकर्ता को एक सेगमेंट या Customer Journey में लक्षित कर सकते हैं।

जावास्क्रिप्ट के साथ इन-ऐप्स कैसे बनाएं, इसके बारे में और जानें

डिवाइडर

एक डिवाइडर सामग्री ब्लॉकों के बीच एक क्षैतिज रेखा है। इसका उपयोग टेम्पलेट में अनुभागों को दृष्टिगत रूप से अलग करने के लिए करें।

सेटिंग्स पैनल में लाइन स्टाइल (सॉलिड, डैश्ड, डॉटेड), रंग, मोटाई, और चौड़ाई कॉन्फ़िगर करें।

HTML

HTML ब्लॉक आपको एक इन-ऐप टेम्पलेट में कस्टम HTML पेस्ट करने देता है। इसका उपयोग एक कस्टम फ़ॉर्म, सर्वेक्षण, या एम्बेडेड वीडियो के लिए करें जब इन-ऐप संदेशों के लिए कोई समर्पित फ़ॉर्म ब्लॉक न हो।

उदाहरण

नीचे दिए गए उदाहरण इन-ऐप टेम्पलेट में HTML ब्लॉक का उपयोग करने के सामान्य तरीके दिखाते हैं: एक लीड फ़ॉर्म, एक सर्वेक्षण, और एक एम्बेडेड वीडियो।

नोट

फ़ॉर्म और सर्वेक्षण उदाहरण डिवाइस टैग सहेजते हैं और Pushwoosh के माध्यम से ईवेंट भेजते हैं। अभियानों में उनका उपयोग करने से पहले अपने खाते में कस्टम ईवेंट बनाएं।

लीड फॉर्म

यह लीड फ़ॉर्म नाम और ईमेल को टैग के रूप में लिखता है, एक promo_requested ईवेंट भेजता है, एक धन्यवाद संदेश दिखाता है, फिर इन-ऐप को बंद कर देता है।

HTML कोड

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

सर्वे

यह सर्वेक्षण चयनित वर्कआउट समय को एक टैग के रूप में सहेजता है, एक schedule_survey_completed ईवेंट भेजता है, एक धन्यवाद संदेश दिखाता है, फिर इन-ऐप को बंद कर देता है।

HTML कोड

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

वीडियो

यह उदाहरण इन-ऐप संदेश में एक YouTube वीडियो एम्बेड करता है।

HTML कोड

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

मेन्यू

मेन्यू ब्लॉक कई क्लिक करने योग्य आइटम को एक पंक्ति या कॉलम में रखता है। इसका उपयोग नेविगेशन बार या कंपनी संपर्कों की सूची के लिए करें।

प्रत्येक मेन्यू आइटम के लिए, सेट करें:

• लेबल: वह टेक्स्ट जो उपयोगकर्ता देखते हैं
• URL: जहाँ आइटम खुलता है
• लक्ष्य: समान टैब या एक नया टैब

ब्लॉक सेटिंग्स में, आप यह भी सेट कर सकते हैं:

• दिशा: क्षैतिज या लंबवत
• अलाइनमेंट: बाएँ, केंद्र, या दाएँ
• विभाजक: आइटम के बीच एक वैकल्पिक डिवाइडर
• फ़ॉन्ट, आकार, वजन, अक्षर रिक्ति, और लिंक/टेक्स्ट रंग

सोशल

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

प्लेटफ़ॉर्म प्रविष्टियाँ जोड़ें, फिर अलाइनमेंट, आइकन आकार, और आइकन के बीच का अंतर सेट करें।

काउंटडाउन टाइमर

टाइमर ब्लॉक इन-ऐप संदेश में एक काउंटडाउन है। इसका उपयोग सीमित समय के ऑफ़र, फ्लैश बिक्री, और ईवेंट अनुस्मारक के लिए करें।

इसे सेट करने के लिए:

1. काउंटडाउन में, अंतिम तिथि और अंतिम समय सेट करें, फिर टाइमर लेबल के लिए समय क्षेत्र और भाषा चुनें।
2. अंकों के नीचे “दिन / घंटे / मिनट / सेकंड” कैप्शन दिखाने के लिए लेबल चालू करें, या केवल संख्याओं के लिए बंद करें।
3. उपस्थिति में, पृष्ठभूमि, अंकों का रंग, लेबल का रंग, और अंकों के लिए फ़ॉन्ट आकार (डिफ़ॉल्ट 40px) और लेबल (डिफ़ॉल्ट 16px) सेट करें।
4. आवश्यकतानुसार स्पेसिंग (पैडिंग) समायोजित करें।

बारकोड

बारकोड ब्लॉक एक वैयक्तिकरण मान से एक स्कैन करने योग्य बारकोड या QR कोड प्रस्तुत करता है, जो अक्सर एक वाउचर होता है।

इसे सेट करने के लिए:

1. कोड में, डिवाइस टैग {Coupon|String|} रखें, या मर्ज टैग पर क्लिक करें और एक और डिवाइस टैग चुनें जो प्रत्येक प्राप्तकर्ता का कोड संग्रहीत करता है। इन-ऐप्स लिक्विड का मूल्यांकन नहीं करते हैं। SDK इन-ऐप दिखाए जाने से पहले डिवाइस पर टैग भरता है। यह ईमेल बारकोड ब्लॉक से अलग है, जो {{voucher}} का उपयोग करता है।

2. सिम्बोलॉजी चुनें:
   • QR: एक वर्गाकार 2D कोड जिसे फ़ोन स्कैन कर सकते हैं। किसी भी टेक्स्ट को स्वीकार करता है, जिसमें WELCOME2025-A1 जैसे अल्फ़ान्यूमेरिक कोड शामिल हैं
   • Code 128: किसी भी टेक्स्ट के लिए एक रैखिक बारकोड, जिसमें समान अल्फ़ान्यूमेरिक कोड शामिल हैं
   • EAN-13: यूरोप और कई अन्य क्षेत्रों में सामान्य खुदरा बारकोड। केवल अंक, 12-13 अक्षर
   • EAN-8: छोटे पैकेजिंग के लिए एक छोटा खुदरा बारकोड। केवल अंक, 7-8 अक्षर
   • UPC-A: उत्तरी अमेरिका में सामान्य खुदरा बारकोड। केवल अंक, 11-12 अक्षर
3. यदि आपने QR चुना है, तो त्रुटि सुधार सेट करें। यह अतिरिक्त डेटा जोड़ता है ताकि कोड का कुछ हिस्सा ढका, घिसा हुआ, या देखने में कठिन होने पर भी स्कैन हो सके। L, M, Q, या H (डिफ़ॉल्ट M) चुनें। उच्च स्तर अधिक क्षति से बचते हैं लेकिन पैटर्न को सघन बनाते हैं, जिसे छोटे आकार में पढ़ना कठिन हो सकता है। अन्य सिम्बोलॉजी के लिए इस फ़ील्ड को छोड़ दें।
4. वैकल्पिक रूप से कोड को अंकों में प्रिंट करें चालू करें ताकि कोड के नीचे मान दिखाया जा सके।

5. उपस्थिति में, बार्स का रंग पृष्ठभूमि से गहरा सेट करें — अधिकांश स्कैनर गहरे रंग की पृष्ठभूमि पर हल्के बार नहीं पढ़ सकते हैं। चौड़ाई (px) और ऊंचाई (px) को कम से कम 600×200 पर सेट करें ताकि कोड सामान्य फ़ोन-कैमरा रेंज में स्कैन करने योग्य बना रहे। डिफ़ॉल्ट मार्जिन के लिए शांत क्षेत्र, मॉड्यूल को ऑटो पर छोड़ दें।

नोट

कैनवास पर ब्लॉक एक नमूना बारकोड दिखाता है, न कि वास्तविक प्राप्तकर्ता कोड। एक डिवाइस टैग जैसे {Coupon|String|} केवल डिवाइस पर भरा जाता है, इसलिए पूर्वावलोकन भी वास्तविक इमेज नहीं बना सकता है। प्रकाशित करने से पहले एक वास्तविक डिवाइस पर बारकोड की जाँच करें। EAN-13, EAN-8, या UPC-A का उपयोग केवल एक टैग मान के लिए करें जो केवल अंक है, प्रत्येक की अपेक्षित लंबाई पर। WELCOME2025-A1 जैसे अल्फ़ान्यूमेरिक कोड के लिए, इसके बजाय Code 128 या QR का उपयोग करें।

कॉलम

कॉलम कैनवास को साइड-बाय-साइड अनुभागों में विभाजित करते हैं ताकि आप सामग्री को एक पंक्ति में एक दूसरे के बगल में रख सकें।

इनमें से एक ब्लॉक को कैनवास पर खींचें:

• 2 कॉलम: दो बराबर कॉलम
• 3 कॉलम: तीन बराबर कॉलम
• 4 कॉलम: चार बराबर कॉलम
• 33 / 67: बायाँ कॉलम लगभग 33% चौड़ा, दायाँ लगभग 67%
• 67 / 33: बायाँ कॉलम लगभग 67% चौड़ा, दायाँ लगभग 33%

फिर प्रत्येक कॉलम में सामग्री जोड़ें। टेम्पलेट में सभी कॉलम के लिए स्पेसिंग बदलने के लिए, सेटिंग्स → कॉलम डिफ़ॉल्ट खोलें और बाहरी पैडिंग, कॉलम पैडिंग, और कॉलम के बीच का अंतर समायोजित करें।

प्रोडक्ट्स

एक प्रोडक्ट्स ब्लॉक एक साझा टेम्पलेट से उत्पाद कार्ड का एक ग्रिड दिखाता है। प्रत्येक कार्ड में एक इमेज, शीर्षक, विवरण, मूल्य, और एक खरीदें बटन शामिल हो सकता है। टेम्पलेट हर उत्पाद के लिए दोहराता है।

सेटिंग्स पैनल में, स्रोत के तहत, चुनें कि उत्पाद कहाँ से आते हैं:

• मैनुअल: उत्पादों को हाथ से दर्ज करें, या अपने प्रोडक्ट कैटलॉग से विशिष्ट आइटम का चयन करने के लिए कैटलॉग से चुनें… पर क्लिक करें। आप दोनों को एक ही ब्लॉक में मिला सकते हैं।
• कैटलॉग नियम: श्रेणी और सॉर्ट क्रम के अनुसार उत्पादों को स्वचालित रूप से खींचें, संदेश दिखाए जाने पर कैटलॉग से ताजा हल किया जाता है।
• कार्ट: प्रत्येक उपयोगकर्ता के वर्तमान छोड़े गए कार्ट से आइटम दिखाएं। एक छोड़े गए कार्ट अभियान को कैसे सेट करें

नोट

कैटलॉग नियम और कार्ट को आपके प्लान पर कंटेंट टेम्प्लेट्स और एक API एक्सेस टोकन (सेटिंग्स → API एक्सेस) की आवश्यकता होती है। यदि स्रोत चयनकर्ता उनमें से किसी एक पर स्विच नहीं करेगा, या ब्लॉक उत्पादों को प्रस्तुत नहीं करता है, तो समर्थन या अपने खाता प्रबंधक से संपर्क करें, या एक टोकन बनाएं और स्रोत को फिर से चुनें।

एक बार जब आप एक स्रोत चुन लेते हैं, तो ये सेटिंग्स नियंत्रित करती हैं कि ग्रिड और उसके कार्ड कैसे दिखते हैं:

• उत्पादों की संख्या (या कार्ट के लिए अधिकतम उत्पाद दिखाए गए): कितने कार्ड दिखाने हैं।
• कॉलम: प्रति पंक्ति 1, 2, या 3 कार्ड।
• गैप: कार्ड के बीच की जगह।
• विवरण सीमा: वह वर्ण सीमा जिस पर विवरण टेक्स्ट को छोटा किया जाता है, ताकि कार्ड एक सुसंगत आकार के बने रहें।
• कार्ड टेम्पलेट: एक लेआउट चुनें, फिर प्रत्येक कार्ड के लिए कार्ड पृष्ठभूमि, कार्ड कॉर्नर रेडियस, और सामग्री पैडिंग सेट करें।

ब्लॉक्स को सहेजें और पुन: उपयोग करें

एक ब्लॉक को इस या अन्य इन-ऐप टेम्प्लेट्स में पुन: उपयोग करने के लिए सहेजें, बजाय इसके कि हर बार इसे फिर से बनाया जाए।

1. कैनवास पर ब्लॉक का चयन करें।
2. ब्लॉक के टूलबार में बुकमार्क आइकन (पुन: उपयोग के लिए ब्लॉक सहेजें) पर क्लिक करें और इसे एक नाम दें।

सहेजे गए ब्लॉक ब्लॉक्स टैब के नीचे सहेजे गए ब्लॉक्स के तहत दिखाई देते हैं।

• एक सहेजे गए ब्लॉक को कैनवास पर खींचें, या इसे टेम्पलेट के अंत में जोड़ने के लिए क्लिक करें।
• इसे हटाने के लिए एक सहेजे गए ब्लॉक की टाइल पर × पर क्लिक करें।

प्रतियों को सिंक में रखें

जब आप एक ब्लॉक सहेजते हैं, तो प्रत्येक डाली गई प्रति को एक ही स्रोत से जोड़ने के लिए प्रतियों को सिंक में रखें चालू करें। स्रोत को एक बार संपादित करें, और परिवर्तन हर जगह लागू होता है जहाँ उस ब्लॉक का उपयोग किया जाता है।

एक सिंक की गई प्रति कैनवास पर लॉक होती है। आप इसे सीधे संपादित नहीं कर सकते। इसकी सेटिंग्स खोलने के लिए प्रति का चयन करें:

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

नोट

हर बार जब आप एक इन-ऐप टेम्पलेट खोलते हैं, तो Pushwoosh इसकी सिंक की गई प्रतियों की जाँच करता है और किसी भी पुरानी प्रति को अपडेट करता है। एक टोस्ट दिखाता है कि कितने ताज़ा किए गए थे। यदि स्रोत में नई सामग्री है, तो प्रति की सेटिंग्स एक चेतावनी दिखाती हैं जब तक कि आप टेम्पलेट को फिर से नहीं खोलते या स्रोत से अपडेट करें पर क्लिक नहीं करते। यदि स्रोत हटा दिया गया था, तो प्रति अपनी अंतिम सामग्री रखती है और आप केवल स्रोत से अलग करें कर सकते हैं।