सामग्री पर जाएं
डेवलपर दस्तावेज़ीकरण सहायता डेमो अनुरोध करें साइन इन करें
Pushwoosh.com

HTML कोड एडिटर

यूट्यूब वीडियो: HTML के साथ स्क्रैच से अपनी ईमेल सामग्री बनाएँ

यदि आप HTML में कुशल हैं और अपना खुद का कोड लिखना पसंद करते हैं, तो आप Pushwoosh HTML कोड एडिटर का उपयोग करके ईमेल बना सकते हैं।

ईमेल सामग्री बनाएँ

Anchor link to

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

वैकल्पिक रूप से, आप नीचे के पैनल में स्थित Upload HTML File पर क्लिक करके एक HTML फ़ाइल अपलोड कर सकते हैं।

अपने ईमेल में एक व्यक्तिगत स्पर्श जोड़ने के लिए, कस्टम टैग का उपयोग करें। इसके लिए:

  1. एडिटर के नीचे स्थित Tag आइकन पर क्लिक करें।
  2. वांछित टैग और उसके संशोधक का चयन करें, और यदि आवश्यक हो तो एक डिफ़ॉल्ट मान प्रदान करें।
  3. अपनी ईमेल सामग्री में कस्टम टैग शामिल करने के लिए Insert पर क्लिक करें।
कस्टम टैग इंसर्शन इंटरफ़ेस जो टैग चयन और डिफ़ॉल्ट मान विकल्प दिखा रहा है

अपने ईमेल में एक इमोजी शामिल करने के लिए, एडिटर के नीचे स्थित Emoji आइकन पर क्लिक करें।

छवियाँ जोड़ें

Anchor link to

अपने ईमेल में एक छवि जोड़ने के लिए, अपने HTML में एक <img> टैग शामिल करें और src एट्रिब्यूट को छवि URL पर सेट करें।

अपने Media store से एक छवि का पुन: उपयोग करने के लिए, वहां से उसका URL कॉपी करें और उसे src एट्रिब्यूट में पेस्ट करें। चरणों के लिए एक छवि URL कॉपी करें देखें।

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

YOUR-MEDIA-STORE-URL को उस URL से बदलें जिसे आपने Media store से कॉपी किया है।

स्थानीयकरण का उपयोग करें

Anchor link to

स्थानीयकरण आपको विभिन्न भाषाओं में उपयोगकर्ताओं को व्यक्तिगत अनुभव प्रदान करने की शक्ति देता है।

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

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

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

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

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

इस परिदृश्य पर विचार करें: आप कॉफी मिश्रणों पर सीमित समय की छूट का विज्ञापन कर रहे हैं। ऊपर उल्लिखित स्थानीयकरण संरचना का उपयोग करके, आप विभिन्न भाषाएँ बोलने वाले उपयोगकर्ताओं को अपना प्रचार संदेश प्रभावी ढंग से संप्रेषित कर सकते हैं। प्रचार के लिए आपका HTML कोड इस तरह दिख सकता है:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>


  </div>
</body>
</html>

इस सेटअप के साथ, यदि किसी उपयोगकर्ता की भाषा जर्मन है, तो वे ईमेल को जर्मन में देखेंगे। जिन उपयोगकर्ताओं ने अंग्रेजी में ईमेल प्राप्त करने का विकल्प चुना है, वे इसे अंग्रेजी में देखेंगे। जिन लोगों ने इसे स्पेनिश में प्राप्त करने का विकल्प चुना है, वे इसे स्पेनिश में प्राप्त करेंगे। यह सुनिश्चित करता है कि सभी प्राप्तकर्ताओं को आपका संदेश उनकी पसंदीदा भाषा में मिले।

ईमेल सामग्री ब्लॉक डालें और संयोजित करें

Anchor link to

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

उदाहरण के लिए, यदि आपके पास ईमेल सामग्री A (एक हेडर) और ईमेल सामग्री B (एक न्यूज़लेटर) है, तो आप हर बार मैन्युअल रूप से सामग्री की प्रतिलिपि बनाए बिना ईमेल सामग्री A को ईमेल सामग्री B में डाल सकते हैं।

सिंटैक्स

Anchor link to

एक सामग्री को दूसरे में डालने के लिए, निम्नलिखित सिंटैक्स का उपयोग करें:

{% email_content "AAAAA-BBBBB" %}

जहाँ “AAAAA-BBBBB” उस ईमेल सामग्री की ID है जिसे आप डालना चाहते हैं। आप अपनी ईमेल सामग्री की सूची में सामग्री नाम के नीचे स्थित ID पा सकते हैं।

ईमेल सामग्री ID डिस्प्ले जो सामग्री का नाम और अद्वितीय पहचानकर्ता दिखा रहा है

उदाहरण

मान लीजिए आपके पास दो सामग्री हैं:

  • हेडर सामग्री (ID: “AAAAA-BBBBB”) एक पूर्वनिर्धारित हेडर डिज़ाइन के साथ।
  • न्यूज़लेटर सामग्री, जहाँ आप हेडर शामिल करना चाहते हैं।

हेडर को न्यूज़लेटर में डालने के लिए, आप निम्नलिखित का उपयोग करेंगे:

{% email_content "AAAAA-BBBBB" %}

यह आपको कई ईमेल अभियानों में एक पूर्वनिर्धारित हेडर का आसानी से पुन: उपयोग करने की अनुमति देता है। यह समय बचाता है और आपके ईमेल में निरंतरता सुनिश्चित करता है।

एक अनसब्सक्राइब लिंक जोड़ें

Anchor link to

अपने ईमेल में एक अनसब्सक्राइब लिंक शामिल करें ताकि प्राप्तकर्ता नियमों और अपनी वरीयताओं के अनुरूप ऑप्ट-आउट कर सकें। Pushwoosh तीन चर प्रदान करता है जिनका आप अपने HTML में उपयोग कर सकते हैं।

अनसब्सक्राइब लिंक

Anchor link to

यह लिंक जोड़ें ताकि उपयोगकर्ता प्राप्त संदेश से ऑप्ट-आउट कर सकें:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

जब आप ईमेल भेजते हैं तो चर को Pushwoosh अनसब्सक्राइब URL से बदल दिया जाता है।

  • जब सदस्यता वरीयता केंद्र सक्षम होता है, तो प्राप्तकर्ता केवल उस ईमेल को सौंपी गई श्रेणी से अनसब्सक्राइब होते हैं (उदाहरण के लिए, न्यूज़लेटर)। एक पुष्टिकरण स्क्रीन दिखाई देती है जहाँ वे उस श्रेणी में पुनः सब्सक्राइब कर सकते हैं या सभी ईमेल श्रेणियों को समायोजित करने के लिए वरीयताएँ प्रबंधित करें। और जानें

  • जब सदस्यता वरीयता केंद्र सक्षम नहीं होता है, तो प्राप्तकर्ता सभी मार्केटिंग ईमेल से अनसब्सक्राइब हो जाते हैं।

क्लिक संदेश इतिहास में उस संदेश के लिए अनसब्सक्राइब दर में गिने जाते हैं।

सभी श्रेणियों से अनसब्सक्राइब करें

Anchor link to

एक लिंक जोड़ें जो उपयोगकर्ता को एक ही बार में सभी ईमेल श्रेणियों से अनसब्सक्राइब कर दे:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>

वरीयता केंद्र लिंक

Anchor link to

वरीयता केंद्र का सीधा लिंक जोड़ें जहाँ उपयोगकर्ता यह प्रबंधित करते हैं कि वे कौन सी श्रेणियां प्राप्त करते हैं:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>

वरीयता केंद्र कैसे काम करता है जानें

नीचे दिया गया स्क्रीनशॉट एक फुटर दिखाता है जो सभी तीन लिंक प्रकारों का उपयोग करता है।

ईमेल फुटर का उदाहरण जिसमें तीनों अनसब्सक्राइब लिंक हैं: अनसब्सक्राइब, वरीयताएँ प्रबंधित करें, सभी ईमेल से अनसब्सक्राइब करें

ईमेल सामग्री सहेजें

Anchor link to

जब आप अपना ईमेल बनाना समाप्त कर लें, तो एडिटर के शीर्ष पर स्थित Save बटन पर क्लिक करें।

ईमेल सामग्री सहेजें डायलॉग जो नाम और लेबल फ़ील्ड दिखा रहा है

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

यदि आपने अभी तक प्रेषक विवरण सेट नहीं किया है, तो उसे भी करना सुनिश्चित करें। फिर, Save पर क्लिक करें।

अब जब आपकी ईमेल सामग्री तैयार है, तो इसका उपयोग ईमेल अभियानों में किया जा सकता है। और जानें

एक परीक्षण ईमेल भेजें

Anchor link to

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

एक परीक्षण ईमेल भेजने के लिए, ईमेल एडिटर में Test email पर क्लिक करें।

ईमेल एडिटर इंटरफ़ेस में परीक्षण ईमेल बटन

खुलने वाली विंडो में:

  1. Email address फ़ील्ड में, वह ईमेल पता दर्ज करें जहाँ आप परीक्षण ईमेल प्राप्त करना चाहते हैं।

यदि KYC पूरा नहीं हुआ है, तो आपको एक ईमेल दर्ज करने के बजाय परीक्षण पतों की सूची से एक सत्यापित ईमेल पता चुनना होगा।

सत्यापित परीक्षण ईमेल पता चयन ड्रॉपडाउन
  1. यदि आपके ईमेल में गतिशील सामग्री (व्यक्तिगत डेटा के लिए प्लेसहोल्डर) है, तो परीक्षण उद्देश्यों के लिए नमूना मान जोड़ें।

उदाहरण के लिए:

  • Age (integer): आयु प्लेसहोल्डर का प्रतिनिधित्व करने के लिए एक संख्या दर्ज करें (जैसे, 21)।
  • FirstName (string): एक नमूना पहला नाम दर्ज करें (जैसे, David)।

ये मान परीक्षण ईमेल में वास्तविक प्राप्तकर्ता डेटा को प्रतिस्थापित करेंगे, जिससे आप यह सत्यापित कर सकेंगे कि गतिशील सामग्री कैसी दिखती है।

  1. एक बार जब आप आवश्यक विवरण भर दें, तो परीक्षण संदेश को दिए गए ईमेल पते पर भेजने के लिए Send test email पर क्लिक करें।
नमूना डेटा फ़ील्ड के साथ परीक्षण ईमेल पुष्टिकरण संवाद भेजें