बिल्ट-इन एडिटर में इन-ऐप मैसेज बनाएं

यूट्यूब वीडियो: हमारे उपयोग में आसान एडिटर में बिना कोडिंग के इन-ऐप्स बनाएं

एक नया टेम्पलेट जोड़ें

एक इन-ऐप टेम्पलेट बनाने के लिए, कंटेंट → इन-ऐप्स पर जाएं और टेम्पलेट जोड़ें पर क्लिक करें:

यहां, आपके पास तीन विकल्प हैं:

1. अपने HTML इन-ऐप मैसेज के साथ एक ZIP फ़ाइल अपलोड करें।
2. पहले से बने टेम्पलेट्स में से चुनें और कस्टमाइज़ करें।
3. शुरू से अपना खुद का टेम्पलेट बनाएं।

इस लेख में, हम शुरू से एक टेम्पलेट बनाने पर विचार करेंगे। अपने मौजूदा टेम्पलेट को कस्टमाइज़ करने के लिए उन्हीं चरणों का पालन करें।

एक टेम्पलेट नाम दर्ज करें, नया टेम्पलेट बनाएं चुनें, और टेम्पलेट जोड़ें पर क्लिक करें:

आप एक डिफ़ॉल्ट टेम्पलेट के आधार पर एक नया इन-ऐप मैसेज पेज बना सकते हैं या एक खाली टेम्पलेट चुनकर शुरू से शुरू कर सकते हैं।

कंटेंट जोड़ें

लेआउट

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

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

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

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

पोर्ट्रेट और लैंडस्केप इन-ऐप मैसेज बनाना

Pushwoosh पोर्ट्रेट और लैंडस्केप दोनों ओरिएंटेशन में इन-ऐप मैसेज कंटेंट बनाने की सुविधा प्रदान करता है। यह सुनिश्चित करता है कि आपके अभियान सभी डिवाइस पर आकर्षक और प्रभावी हों।

पोर्ट्रेट इन-ऐप मैसेज

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

लैंडस्केप इन-ऐप मैसेज

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

लैंडस्केप इन-ऐप मैसेज में कॉलम जोड़ना

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

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

नोट

यह कदम मोबाइल डिवाइस पर देखे जाने पर आपके लैंडस्केप इन-ऐप मैसेज के इच्छित डिज़ाइन को बनाए रखने के लिए महत्वपूर्ण है। यह सुनिश्चित करता है कि कॉलम एक-दूसरे के ऊपर स्टैक होने के बजाय अगल-बगल रहें।

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

कंटेंट एलीमेंट्स

हेडिंग

आप हेडिंग के लिए फ़ॉन्ट, रंग, टेक्स्ट अलाइनमेंट, लाइन हाइट और पैडिंग पैरामीटर को एडिट कर सकते हैं।

नोट

यदि आप प्रत्येक यूजर के लिए हेडिंग को पर्सनलाइज करना चाहते हैं, तो इसमें टैग जोड़ें।

आप AI को आपके लिए हेडिंग टेक्स्ट जेनरेट करने देकर भी समय बचा सकते हैं। स्मार्ट हेडिंग्स सेक्शन में बटन पर क्लिक करें, कुछ कीवर्ड दर्ज करें, और सुझाव प्राप्त करें पर क्लिक करें:

टेक्स्ट

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

नोट

यदि आप प्रत्येक यूजर के लिए टेक्स्ट को पर्सनलाइज करना चाहते हैं, तो इसमें टैग जोड़ें।

आप स्मार्ट टेक्स्ट विकल्प का उपयोग करके अपने टेक्स्ट को और बेहतर बना सकते हैं:

इमेज

एक इमेज जोड़ने के लिए, इमेज ब्लॉक पर क्लिक करें और अपनी फ़ाइल को एडिटर पैनल में ड्रैग करें:

वैकल्पिक रूप से, आप एक फ़ाइल अपलोड करने के बजाय इमेज URL निर्दिष्ट कर सकते हैं।

आप AI इमेज जनरेशन के साथ भी प्रयोग कर सकते हैं। ऐसा करने के लिए, मैजिक इमेज सेक्शन में बटन पर क्लिक करें, उस इमेज का वर्णन करें जिसे आप बनाना चाहते हैं, और इमेज जेनरेट करें पर क्लिक करें:

एक्शन सेक्शन में, आप उस एक्शन को सेट कर सकते हैं जो इमेज पर क्लिक करने पर किया जाना चाहिए। आप एक वेबसाइट (या अपने ऐप के भीतर एक पेज का डीप लिंक) खोल सकते हैं या पॉपअप को बंद कर सकते हैं। आप इमेज क्लिक एक्शन को सेट करने के लिए एक कस्टम जावास्क्रिप्ट हैंडलर एट्रिब्यूट भी डाल सकते हैं। यदि किसी एक्शन की आवश्यकता नहीं है, तो इस सेटिंग को अनदेखा करें।

नोट

यदि आप चाहते हैं कि इमेज पर क्लिक करने पर आपके मोबाइल ऐप में एक पेज खुले, तो वेबसाइट खोलें विकल्प चुनें और एक डीप लिंक डालें।

बटन

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

नोट

यदि आप प्रत्येक यूजर के लिए बटन टेक्स्ट को पर्सनलाइज करना चाहते हैं, तो इसमें टैग जोड़ें।

AI आपको बटन टेक्स्ट के साथ आने में मदद कर सकता है। बस स्मार्ट बटन सेक्शन में बटन पर क्लिक करें, कीवर्ड दर्ज करें, और सुझाव प्राप्त करें पर क्लिक करें:

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

नोट

यदि आप चाहते हैं कि बटन पर क्लिक करने पर आपके मोबाइल ऐप में एक पेज खुले, तो वेबसाइट खोलें विकल्प चुनें और एक डीप लिंक डालें।

डिवाइडर

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

फॉर्म

नोट

इस एलीमेंट को कॉन्फ़िगर करने के लिए, आपको एक डेवलपर की मदद की आवश्यकता होगी।

फॉर्म आपको यूज़र्स के ईमेल, फोन नंबर, प्राथमिकताएं और अन्य जानकारी एकत्र करने की अनुमति देते हैं जो भविष्य के संचार के लिए उपयोगी हो सकती है। यह एलीमेंट एक मानक HTML फॉर्म के रूप में कॉन्फ़िगर किया गया है: डेटा URL फ़ील्ड में निर्दिष्ट पते पर GET या POST अनुरोध में भेजा जाता है।

उसके पैरामीटर को कॉन्फ़िगर करने के लिए फ़ील्ड नाम पर क्लिक करें:

• फ़ील्ड प्रकार: डेटा का प्रकार जो फ़ील्ड में प्रेषित किया जाना चाहिए;
• फ़ील्ड नाम: पैरामीटर का नाम जिसमें फ़ील्ड से डेटा पास किया जाता है;
• फ़ील्ड लेबल: फ़ील्ड के ऊपर प्रदर्शित टेक्स्ट;
• प्लेसहोल्डर टेक्स्ट;
• चेकबॉक्स यह दर्शाता है कि फॉर्म जमा करने के लिए फ़ील्ड आवश्यक है या नहीं।

एक और फ़ील्ड जोड़ने के लिए, नई फ़ील्ड जोड़ें पर क्लिक करें और डेटा प्रकार चुनें:

आप फॉर्म पैरामीटर जैसे चौड़ाई, अलाइनमेंट, फ़ील्ड के बीच की जगह, बटन टेक्स्ट, रंग और फ़ॉन्ट को कस्टमाइज़ कर सकते हैं।

HTML

HTML ब्लॉक आपको एक टेम्पलेट में अपना खुद का कस्टम HTML कोड जोड़ने की अनुमति देता है।

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

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

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

इसके अलावा, आप अधिक आकर्षक यूजर अनुभव के लिए वीडियो एम्बेड करके अपने इन-ऐप मैसेज को बेहतर बना सकते हैं। यहां HTML का उपयोग करके YouTube वीडियो को एम्बेड करने का एक उदाहरण दिया गया है:

<!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>

मेन्यू

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

एक मेन्यू आइटम जोड़ने के लिए, नया आइटम जोड़ें पर क्लिक करें:

आइटम टेक्स्ट जोड़ें और उस एक्शन को सेट करें जो आइटम पर क्लिक करने पर किया जाना चाहिए:

हॉरिजॉन्टल या वर्टिकल मेन्यू प्रकार चुनें और यदि आवश्यक हो तो आइटम के बीच एक सेपरेटर जोड़ें:

कंटेंट पर्सनलाइजेशन

अपने कंटेंट को अधिक प्रासंगिक और आकर्षक बनाने के लिए मुख्य टेक्स्ट, हेडर या बटन टेक्स्ट को पर्सनलाइज करें। उदाहरण के लिए, आप यूज़र्स को नाम से संबोधित कर सकते हैं या उनकी प्राथमिकताओं का उल्लेख कर सकते हैं।

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

मल्टी-लैंग्वेज टेम्पलेट्स

आप अपने इन-ऐप मैसेज टेम्पलेट के टेक्स्ट को प्रत्येक भाषा के लिए लोकलाइज कर सकते हैं जो आपके यूजर बोलते हैं। ऐसा करने के लिए, एडिटेबल भाषा सूची में भाषाओं के बीच स्विच करें और प्रत्येक भाषा में कंटेंट को अलग-अलग एडिट करें:

यदि कंटेंट लोकलाइज नहीं है, तो यह भाषा सेटिंग्स में डिफ़ॉल्ट के रूप में निर्दिष्ट भाषा में प्रदर्शित होगा।

नोट

टेम्पलेट में आपके द्वारा जोड़ा गया कोई भी एलीमेंट सभी भाषाओं के लिए समान कंटेंट के साथ दिखाई देता है। अपने टेम्पलेट में उपयोग की जाने वाली सभी भाषाओं के लिए जोड़े गए टेक्स्ट (बटन टेक्स्ट सहित) को लोकलाइज करना याद रखें।

सामान्य टेम्पलेट सेटिंग्स

पॉपअप टैब पर, आप सामान्य टेम्पलेट सेटिंग्स को कॉन्फ़िगर कर सकते हैं:

• स्क्रीन पर पॉपअप की पोजीशन सेट करें;
• पॉपअप की चौड़ाई और ऊंचाई बदलें;
• बॉर्डर राउंडिंग को एडजस्ट करें;
• पूरे टेम्पलेट के लिए कंटेंट सेटिंग्स को कॉन्फ़िगर करें: अलाइनमेंट, चौड़ाई, फ़ॉन्ट और रंग;
• बैकग्राउंड रंग सेट करें या एक बैकग्राउंड इमेज जोड़ें;
• क्लोज बटन की पोजीशन और अपीयरेंस को कस्टमाइज़ करें।

इन-ऐप मैसेज के अपीयरेंस और बिहेवियर को कस्टमाइज़ करें (iOS और Android नेटिव)

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

इन-ऐप सेटिंग्स को कॉन्फ़िगर करने के लिए:

1. स्क्रीन के शीर्ष पर सेटिंग्स पर क्लिक करें।

2. सेटिंग्स विंडो में, उपलब्ध विकल्पों को एडजस्ट करके चुनें कि आप अपने इन-ऐप मैसेज को कैसा दिखाना और व्यवहार करना चाहते हैं:

स्क्रीन पर मैसेज की पोजीशन सेट करें

चुनें कि मैसेज कहां दिखना चाहिए।

विकल्पों में शामिल हैं: फुलस्क्रीन, टॉप, सेंटर, बॉटम

एंट्री एनिमेशन चुनें

चुनें कि मैसेज स्क्रीन पर कैसे दिखाई देता है।

विकल्पों में शामिल हैं: अप, डाउन, लेफ्ट, राइट

एग्जिट एनिमेशन चुनें

चुनें कि मैसेज कैसे गायब होता है।

विकल्पों में शामिल हैं: अप, डाउन, लेफ्ट, राइट

स्वाइप-टू-क्लोज इनेबल करें (वैकल्पिक)

यूज़र्स को एक या अधिक दिशाओं में स्वाइप करके मैसेज को डिस्मिस करने की अनुमति दें।

विकल्पों में शामिल हैं: लेफ्ट, राइट, अप, डाउन

3. अपनी प्राथमिकताएं चुनने के बाद, परिवर्तनों को सेव करने के लिए लागू करें पर क्लिक करें या उन्हें रद्द करने के लिए रद्द करें पर क्लिक करें।

टेम्पलेट को सेव करें और उपयोग करें

परिवर्तनों को लागू करने के लिए सेव करें पर क्लिक करें।

अब आप अपने इन-ऐप मैसेज टेम्पलेट का उपयोग निम्नलिखित तरीकों में से एक में कर सकते हैं:

• कस्टमर जर्नी के हिस्से के रूप में एक इन-ऐप दिखाएं;
• एक पुश भेजें जो क्लिक करने पर एक इन-ऐप खोलता है;
• अपने यूज़र्स को एक सिंगल इन-ऐप दिखाएं।