React Email Templates: Build Beautiful Transactional Emails

लेन-देन संबंधी ईमेल में 45% खुली दर होती है - औसत मार्केटिंग ईमेल से लगभग 5 गुना - फिर भी अधिकांश कंपनियां खराब स्वरूपित HTML ईमेल भेजती हैं जो ब्रांड धारणा को नुकसान पहुंचाती हैं। रिएक्ट ईमेल घटक-आधारित विकास मॉडल को ईमेल डिजाइन में लाता है, जिससे डेवलपर्स को परिचित रिएक्ट पैटर्न के साथ सुंदर, उत्तरदायी टेम्पलेट बनाने की सुविधा मिलती है।

मुख्य बातें

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

---

ईमेल पर प्रतिक्रिया क्यों दें

ईमेल HTML अत्यंत कठिन है. अलग-अलग क्लाइंट HTML को अलग-अलग तरीके से प्रस्तुत करते हैं - आउटलुक अपने रेंडरिंग इंजन के रूप में वर्ड का उपयोग करता है, जीमेल स्ट्रिप्स स्टाइल टैग, और मोबाइल क्लाइंट व्यूपोर्ट हैंडलिंग में भिन्न होते हैं।

रिएक्ट ईमेल इसे पूर्व-निर्मित घटकों के साथ सारांशित करता है: कंटेनर (उत्तरदायी चौड़ाई), अनुभाग (तालिका-आधारित ब्लॉक), पंक्ति/स्तंभ (ग्रिड प्रणाली), पाठ, शीर्षक, बटन (आउटलुक में काम करता है), छवि, लिंक, घंटा, और पूर्वावलोकन (छिपा हुआ इनबॉक्स पाठ)।

---

प्रोजेक्ट सेटअप

@प्रतिक्रिया-ईमेल/घटक और प्रतिक्रिया-ईमेल स्थापित करें। टेम्प्लेट/, कंपोनेंट्स/ और एक render.ts फ़ाइल के साथ पैकेज/ईमेल-टेम्प्लेट निर्देशिका में टेम्प्लेट व्यवस्थित करें जो रेंडर फ़ंक्शंस को निर्यात करता है।

---

बिल्डिंग टेम्प्लेट

साझा लेआउट घटक

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

टेम्पलेट संरचना

प्रत्येक ईमेल टेम्प्लेट एक रिएक्ट घटक है जो टाइप किए गए प्रॉप्स प्राप्त करता है:

import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr,
} from "@react-email/components";

interface WelcomeEmailProps {
  userName: string;
  loginUrl: string;
}

export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "Arial, sans-serif" }}>
        <Container style={{ maxWidth: "600px", margin: "0 auto" }}>
          <Text>Hi {userName},</Text>
          <Text>Your account is ready.</Text>
          <Button
            href={loginUrl}
            style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
          >
            Sign In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

---

NestJS एकीकरण के लिए प्रतिपादन

महत्वपूर्ण पैटर्न: ** रेंडर फ़ंक्शंस निर्यात करें, कच्चे घटक नहीं। ** NestJS JSX संकलन के बिना चलता है, इसलिए रिएक्ट घटकों को आयात करने से सीधे त्रुटियाँ होती हैं।

एक render.ts फ़ाइल बनाएं जो टेम्प्लेट आयात करती है और async फ़ंक्शंस निर्यात करती है:

import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";

export async function renderWelcomeEmail(props: {
  userName: string;
  loginUrl: string;
}) {
  return render(WelcomeEmail(props));
}

NestJS में, HTML प्राप्त करने के लिए रेंडर फ़ंक्शन को कॉल करें, फिर अपने ईमेल ट्रांसपोर्टर के माध्यम से भेजें।

---

विकास कार्यप्रवाह

स्थानीय पूर्वावलोकन

हॉट रीलोड के साथ ब्राउज़र-आधारित पूर्वावलोकन के लिए npx react-email dev चलाएँ। परिवर्तन तुरंत दिखाई देते हैं, जिससे पुनरावृत्ति तेज़ हो जाती है।

क्रॉस-क्लाइंट परीक्षण

एसिड पर लिटमस या ईमेल का उपयोग करके ग्राहकों के बीच परीक्षण करें। At minimum test: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail, and Outlook.com.

---

स्टाइलिंग की सर्वोत्तम प्रथाएँ

• केवल इनलाइन शैलियाँ: क्लाइंट अनुकूलता के लिए रिएक्ट ईमेल इनलाइन शैलियाँ स्वचालित रूप से
• सिस्टम फ़ॉन्ट: एरियल, जॉर्जिया, वर्दाना का उपयोग करें। कस्टम फ़ॉन्ट का समर्थन सीमित है.
• 600px अधिकतम चौड़ाई: डेस्कटॉप और मोबाइल के लिए मानक ईमेल चौड़ाई
• टेबल-आधारित लेआउट: रिएक्ट ईमेल घटक आउटलुक संगतता के लिए तालिकाओं के रूप में प्रस्तुत होते हैं
• डार्क मोड: ऐप्पल मेल और आउटलुक डार्क मोड समर्थन के लिए मेटा टैग शामिल करें

---

सामान्य ईमेल टेम्प्लेट

आदेश की पुष्टि

ऑर्डर नंबर, कीमतों के साथ आइटम सूची, शिपिंग पता, अनुमानित डिलीवरी और उपलब्ध होने पर ट्रैकिंग लिंक शामिल करें। आइटम सूची के लिए तालिका लेआउट का उपयोग करें.

पासवर्ड रीसेट

इसे न्यूनतम रखें: संक्षिप्त विवरण, समय-सीमित लिंक के साथ प्रमुख रीसेट बटन, लिंक साझा न करने के बारे में सुरक्षा सूचना और समर्थन संपर्क।

चालान ईमेल

पीडीएफ चालान संलग्न करें और ईमेल के मुख्य भाग में एक सारांश शामिल करें: चालान संख्या, तिथि, देय तिथि, कुल राशि, और ऑनलाइन देखने/भुगतान करने के लिए एक बटन।

शिपिंग अधिसूचना

ऑर्डर संख्या, वाहक का नाम, क्लिक करने योग्य लिंक के साथ ट्रैकिंग नंबर, अनुमानित डिलीवरी तिथि और भेजे जाने वाले आइटम शामिल करें।

---

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: ड्रैग-एंड-ड्रॉप ईमेल बिल्डर का उपयोग क्यों न करें?

Drag-and-drop builders work for marketing emails but lack dynamic content capabilities for transactional emails. ऑर्डर पुष्टिकरण और चालान के लिए डेटा-संचालित टेम्पलेट की आवश्यकता होती है जो कोड बेहतर तरीके से संभालता है।

प्रश्न: क्या रिएक्ट ईमेल किसी भेजने वाली सेवा के साथ काम करता है?

हाँ। यह नोडमेलर, सेंडग्रिड, पोस्टमार्क, एडब्ल्यूएस एसईएस, रीसेंड या किसी एसएमटीपी सर्वर के साथ संगत मानक HTML स्ट्रिंग्स को आउटपुट करता है।

प्रश्न: हम ईमेल स्थानीयकरण को कैसे संभालते हैं?

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

प्रश्न: क्या हम गतिशील चित्र या चार्ट शामिल कर सकते हैं?

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

---

आगे क्या है

रिएक्ट ईमेल लेनदेन संबंधी ईमेल विकास को निराशाजनक टेबल-लेआउट अभ्यास से आधुनिक घटक-आधारित वर्कफ़्लो में बदल देता है।

ईमेल टेम्पलेट विकास के लिए ECOSIRE से संपर्क करें, या एकीकृत ईमेल वर्कफ़्लो के लिए हमारी Odoo कार्यान्वयन सेवाओं का पता लगाएं।

---

ECOSIRE द्वारा प्रकाशित - एंटरप्राइज़ सॉफ़्टवेयर समाधानों के साथ व्यवसायों को बड़े पैमाने पर मदद करना।