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

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

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

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

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

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. अपनी प्राथमिकताएं चुनने के बाद, परिवर्तनों को सहेजने के लिए लागू करें पर क्लिक करें या उन्हें रद्द करने के लिए रद्द करें पर क्लिक करें।

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

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

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

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