# HTML कोड एडिटर के साथ ईमेल कंटेंट बनाएं

<YouTube id="DryThwJHYxk" params="start=258&end=355" playlabel="यूट्यूब वीडियो: HTML के साथ स्क्रैच से अपना ईमेल कंटेंट बनाएं"/>

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

<Aside type="note">
कोडिंग कौशल नहीं है? ईमेल कंटेंट को आसानी से बनाने के लिए ड्रैग एंड ड्रॉप एडिटर का उपयोग करें। शून्य कोडिंग कौशल की आवश्यकता है। [और जानें](/hi/product/content/email-content/drag-and-drop-email-editor)
</Aside>

<Aside type="caution" title="महत्वपूर्ण">
ईमेल कंटेंट बनाना शुरू करने से पहले, यह आवश्यक है कि आप अपने चुने हुए ईमेल एडिटर के भीतर अपने ईमेल को ठीक से सेट करें। इसमें भाषाओं को कॉन्फ़िगर करना, विषय पंक्ति निर्दिष्ट करना, प्रेषक जानकारी प्रदान करना और बहुत कुछ शामिल है। [इसे कैसे करें जानें](/hi/product/content/email-content/set-up-your-email-in-the-editor)
</Aside>


## ईमेल कंटेंट बनाएं

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

<video src="/emails-html-code-editor-1.webm" title="HTML कोड एडिटर इंटरफ़ेस जो कोड टाइप करते समय रीयल-टाइम ईमेल प्रीव्यू दिखा रहा है" autoplay loop muted playsinline />

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

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

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

<img src="/emails-html-code-editor-2.webp" alt="कस्टम टैग इन्सर्शन इंटरफ़ेस जो टैग चयन और डिफ़ॉल्ट मान विकल्प दिखा रहा है"/>

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

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

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

अपने [मीडिया स्टोर](/hi/product/content/media-store/) से एक छवि का पुन: उपयोग करने के लिए, वहां से उसका URL कॉपी करें और इसे `src` एट्रिब्यूट में पेस्ट करें। चरणों के लिए [एक छवि URL कॉपी करें](/hi/product/content/media-store/#copy-an-image-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 से बदलें जिसे आपने मीडिया स्टोर से कॉपी किया है।

## लोकलाइज़ेशन का उपयोग करें

लोकलाइज़ेशन आपको विभिन्न भाषाओं में उपयोगकर्ताओं को व्यक्तिगत अनुभव प्रदान करने में सशक्त बनाता है।

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

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

```json
{
  "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é!"
  }
}
```

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

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

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

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

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

<video src="/emails-html-code-editor-3.webm" title="लोकलाइज़ेशन प्रदर्शन जो विभिन्न भाषाओं में ईमेल कंटेंट दिखा रहा है" autoplay loop muted playsinline />

## ईमेल कंटेंट ब्लॉक इन्सर्ट और कंबाइन करें

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

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

### सिंटैक्स

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

```
{% email_content "AAAAA-BBBBB" %}
```

जहाँ "AAAAA-BBBBB" उस ईमेल कंटेंट की ID है जिसे आप डालना चाहते हैं। आप ID को अपने ईमेल कंटेंट की सूची में कंटेंट नाम के नीचे पा सकते हैं।

<img src="/emails-html-code-editor-4.webp" alt="ईमेल कंटेंट ID डिस्प्ले जो कंटेंट नाम और अद्वितीय पहचानकर्ता दिखा रहा है"/>

<Aside type="caution" title="महत्वपूर्ण">
* आप कंटेंट को रिकर्सिव रूप से डाल सकते हैं, जिसका अर्थ है कि एक कंटेंट ब्लॉक दूसरे को शामिल कर सकता है, अधिकतम 3 स्तरों की गहराई तक। उदाहरण के लिए:
  * **कंटेंट A** **कंटेंट B** को डाल सकता है।
  * **कंटेंट B** **कंटेंट C** को डाल सकता है।
  * हालाँकि, **कंटेंट C** एक और ब्लॉक नहीं डाल सकता है।
* **चक्रीय इन्सर्शन** (उदाहरण के लिए, जहाँ **कंटेंट A** **कंटेंट B** को डालता है और **कंटेंट B** **कंटेंट A** को डालने की कोशिश करता है) की अनुमति नहीं है और इससे एक त्रुटि होगी।
</Aside>  

**उदाहरण**

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

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

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

```

{% email_content "AAAAA-BBBBB" %}
```

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


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

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

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

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

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

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

- जब सदस्यता वरीयता केंद्र सक्षम होता है, तो प्राप्तकर्ता केवल उस ईमेल को सौंपी गई श्रेणी से अनसब्सक्राइब होते हैं (उदाहरण के लिए, *न्यूज़लेटर*)। एक पुष्टिकरण स्क्रीन दिखाई देती है जहाँ वे उस श्रेणी में **पुन: सब्सक्राइब** कर सकते हैं या सभी ईमेल श्रेणियों को समायोजित करने के लिए **वरीयताएँ प्रबंधित करें** पर क्लिक कर सकते हैं। [और जानें](/hi/product/messaging-channels/emails/email-preferences/#default-behavior-unsubscribe-from-a-category)

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

क्लिक्स को [मैसेज हिस्ट्री](/hi/product/statistics-and-analytics/message-history) में उस संदेश के लिए अनसब्सक्राइब दर में गिना जाता है।

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

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

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

<Aside type="note">
आपको अपने ग्राहकों को महत्वपूर्ण ईमेल वितरित करने देने के लिए, हम आपके उपयोगकर्ता आधार से अनसब्सक्राइब किए गए उपयोगकर्ताओं को नहीं हटाते हैं। उन उपयोगकर्ताओं के लिए जिन्होंने पूरी तरह से ऑप्ट-आउट कर लिया है (उदाहरण के लिए, जब वरीयता केंद्र सक्षम नहीं है, या सभी से अनसब्सक्राइब लिंक के माध्यम से), [**अनसब्सक्राइब्ड ईमेल** डिफ़ॉल्ट टैग](/hi/product/audience-data-and-segmentation/user-data-tags) 'true' पर सेट है। 

उन उपयोगकर्ताओं का एक [सेगमेंट](/hi/product/audience-data-and-segmentation/segmentation/) बनाने पर विचार करें जिन्होंने अनसब्सक्राइब नहीं किया है (टैग मान 'false') ताकि उन्हें संदेश भेजना जारी रखा जा सके। शिकायतों से बचने के लिए, उन उपयोगकर्ताओं को ईमेल न करें जिन्होंने अनसब्सक्राइब किया है।
</Aside>

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

[वरीयता केंद्र](/hi/product/messaging-channels/emails/email-preferences/#optional-setup-full-preference-center) का एक सीधा लिंक जोड़ें जहाँ उपयोगकर्ता यह प्रबंधित करते हैं कि वे कौन सी श्रेणियाँ प्राप्त करते हैं:

```
<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>
```
[वरीयता केंद्र कैसे काम करता है जानें](/hi/product/messaging-channels/emails/email-preferences/#how-to-let-users-unsubscribe-from-a-category-or-manage-preferences)

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

<img src="/emails-html-code-editor-6.webp" alt="ईमेल फुटर उदाहरण जिसमें तीनों अनसब्सक्राइब लिंक हैं: अनसब्सक्राइब, वरीयताएँ प्रबंधित करें, सभी ईमेल से अनसब्सक्राइब करें"/>

<Aside type="caution">
यदि आप Pushwoosh चर के बजाय अपने स्वयं के अनसब्सक्राइब लिंक का उपयोग करते हैं, तो आपके लिंक के माध्यम से ऑप्ट-आउट करने वाले उपयोगकर्ताओं को [मैसेज हिस्ट्री](/hi/product/statistics-and-analytics/message-history) में अनसब्सक्राइब दर में शामिल नहीं किया जाता है। केवल वे उपयोगकर्ता जिन्होंने Pushwoosh लिंक का पालन किया है, उस ईमेल के आँकड़ों में गिने जाते हैं।
</Aside>

## ईमेल कंटेंट सेव करें

अपना ईमेल बनाने के बाद, एडिटर के शीर्ष पर स्थित **सेव** बटन पर क्लिक करें।

<img src="/emails-html-code-editor-5.webp" alt="ईमेल कंटेंट सेव करें डायलॉग जो नाम और लेबल फ़ील्ड दिखा रहा है"/>

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

यदि आपने अभी तक [प्रेषक विवरण सेट नहीं किया है](/hi/product/content/email-content/set-up-your-email-in-the-editor), तो उसे भी करना सुनिश्चित करें। फिर, **सेव** पर क्लिक करें।

अब जब आपका ईमेल कंटेंट तैयार है, तो इसका उपयोग ईमेल अभियानों में किया जा सकता है। [और जानें](/hi/product/messaging-channels/emails/sending-emails)

## एक टेस्ट ईमेल भेजें

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

<Aside type="note">
यदि KYC **(अपने ग्राहक को जानें)** पूरा नहीं हुआ है, तो भी आप एक टेस्ट ईमेल पता सत्यापित करके टेस्ट ईमेल भेज सकते हैं। ऐसा करने के लिए, [टेस्ट डिवाइस](/hi/developer/first-steps/test-your-integration/test-devices/) अनुभाग पर जाएं, वह ईमेल पता जोड़ें जिसका आप परीक्षण के लिए उपयोग करना चाहते हैं, और सत्यापन प्रक्रिया पूरी करें।
</Aside>

एक टेस्ट ईमेल भेजने के लिए, ईमेल एडिटर में **टेस्ट ईमेल** पर क्लिक करें।

<img src="/shared-14.webp" alt="ईमेल एडिटर इंटरफ़ेस में टेस्ट ईमेल बटन"/>

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

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

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

<img src="/shared-50.webp" alt="सत्यापित टेस्ट ईमेल पता चयन ड्रॉपडाउन"/>

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

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

* **आयु (पूर्णांक)**: आयु प्लेसहोल्डर का प्रतिनिधित्व करने के लिए एक संख्या दर्ज करें (उदाहरण के लिए, `21`)।
* **FirstName (स्ट्रिंग)**: एक नमूना पहला नाम दर्ज करें (उदाहरण के लिए, `David`)।

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

3. एक बार जब आप आवश्यक विवरण भर देते हैं, तो दिए गए ईमेल पते पर परीक्षण संदेश भेजने के लिए **टेस्ट ईमेल भेजें** पर क्लिक करें।

<img src="/shared-34.webp" alt="नमूना डेटा फ़ील्ड के साथ टेस्ट ईमेल भेजें पुष्टिकरण डायलॉग"/>