ری ایکٹ ای میل ٹیمپلیٹس: خوبصورت ٹرانزیکشنل ای میلز بنائیں

**ٹرانزیکشنل ای میلز کی اوپن ریٹ 45% ہوتی ہے -- تقریباً 5x اوسط مارکیٹنگ ای میل -- پھر بھی زیادہ تر کمپنیاں خراب فارمیٹ شدہ HTML ای میلز بھیجتی ہیں جو برانڈ کے تاثر کو نقصان پہنچاتی ہیں۔ ** React ای میل اجزاء پر مبنی ڈیولپمنٹ ماڈل کو ای میل ڈیزائن میں لاتا ہے، جس سے ڈویلپرز کو مانوس رد عمل کے نمونوں کے ساتھ خوبصورت، جوابی ٹیمپلیٹس بنانے کی اجازت ملتی ہے۔

اہم ٹیک ویز

رد عمل ای میل کے اجزاء کراس کلائنٹ کے موافق ایچ ٹی ایم ایل پر مرتب کریں -- جی میل، آؤٹ لک، ایپل میل

اجزاء پر مبنی فن تعمیر دوبارہ قابل استعمال ہیڈر، فوٹر، اور لے آؤٹ پیٹرن کو قابل بناتا ہے

گرم دوبارہ لوڈ کے ساتھ مقامی پیش نظارہ سرور ٹیمپلیٹ کی ترقی کو تیز کرتا ہے۔

ہموار NestJS انضمام کے لیے رینڈر فنکشنز (خام اجزاء نہیں) برآمد کریں

ای میل پر رد عمل کیوں؟

ای میل HTML بدنام زمانہ مشکل ہے۔ مختلف کلائنٹس ایچ ٹی ایم ایل کو مختلف طریقے سے پیش کرتے ہیں -- آؤٹ لک ورڈ کو اپنے رینڈرنگ انجن کے طور پر استعمال کرتا ہے، جی میل سٹرپس اسٹائل ٹیگز، اور موبائل کلائنٹس ویو پورٹ ہینڈلنگ میں مختلف ہوتے ہیں۔

React ای میل پہلے سے بنائے گئے اجزاء کے ساتھ اس کا خلاصہ کرتا ہے: کنٹینر (رسپانسیو چوڑائی)، سیکشن (ٹیبل پر مبنی بلاکس)، قطار/کالم (گرڈ سسٹم)، متن، سرخی، بٹن (آؤٹ لک میں کام کرتا ہے)، تصویر، لنک، Hr، اور پیش نظارہ (پوشیدہ ان باکس ٹیکسٹ)۔

پروجیکٹ سیٹ اپ

@react-email/components اور react-email انسٹال کریں۔ templates/، components/، اور ایک render.ts فائل کے ساتھ پیکجز/ای میل ٹیمپلیٹس ڈائرکٹری میں ٹیمپلیٹس کو منظم کریں جو رینڈر فنکشنز کو برآمد کرتی ہے۔

بلڈنگ ٹیمپلیٹس

مشترکہ لے آؤٹ اجزاء

اپنی برانڈنگ کے ساتھ دوبارہ قابل استعمال EmailHeader اور EmailFooter اجزاء بنائیں۔ یہ تمام ٹرانزیکشن ای میلز میں مستقل مزاجی کو یقینی بناتے ہیں۔

ٹیمپلیٹ کا ڈھانچہ

ہر ای میل ٹیمپلیٹ ایک React جزو ہے جو ٹائپ شدہ پرپس وصول کرتا ہے:

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 کمپائلیشن کے چلتا ہے، اس لیے React اجزاء کو درآمد کرنے سے براہ راست خرابیاں پیدا ہوتی ہیں۔

ایک 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 چلائیں۔ تبدیلیاں فوری طور پر ظاہر ہوتی ہیں، تکرار تیز ہوتی ہیں۔

کراس کلائنٹ ٹیسٹنگ

تیزاب پر لٹمس یا ای میل کا استعمال کرتے ہوئے کلائنٹس کے درمیان ٹیسٹ کریں۔ کم از کم ٹیسٹ میں: Gmail (Chrome)، Outlook (Windows)، Apple Mail، Gmail (iOS)، Apple Mail (iOS)، Yahoo Mail، اور Outlook.com۔

اسٹائل کرنے کے بہترین طریقے

صرف ان لائن اسٹائل: کلائنٹ کی مطابقت کے لیے خود بخود ای میل ان لائن اسٹائل پر رد عمل ظاہر کریں۔
سسٹم فونٹس: ایریل، جارجیا، ورڈانا استعمال کریں۔ اپنی مرضی کے فونٹس کو محدود سپورٹ حاصل ہے۔
600px زیادہ سے زیادہ چوڑائی: ڈیسک ٹاپ اور موبائل کے لیے معیاری ای میل چوڑائی
ٹیبل پر مبنی ترتیب: ای میل کے اجزاء کو آؤٹ لک مطابقت کے لیے جدول کے طور پر پیش کریں
ڈارک موڈ: ایپل میل اور آؤٹ لک ڈارک موڈ سپورٹ کے لیے میٹا ٹیگز شامل کریں۔

عام ای میل ٹیمپلیٹس

آرڈر کی تصدیق

آرڈر نمبر، قیمتوں کے ساتھ اشیاء کی فہرست، شپنگ کا پتہ، تخمینہ ڈیلیوری، اور دستیاب ہونے پر ٹریکنگ لنک شامل کریں۔ آئٹم کی فہرست کے لیے ٹیبل لے آؤٹ استعمال کریں۔

پاس ورڈ دوبارہ ترتیب دیں۔

اسے کم سے کم رکھیں: مختصر وضاحت، وقت کے محدود لنک کے ساتھ نمایاں ری سیٹ بٹن، لنک کا اشتراک نہ کرنے کے بارے میں سیکیورٹی نوٹس، اور سپورٹ رابطہ۔

انوائس ای میل

پی ڈی ایف انوائس منسلک کریں اور ای میل کے باڈی میں ایک خلاصہ شامل کریں: انوائس نمبر، تاریخ، مقررہ تاریخ، کل رقم، اور آن لائن دیکھنے/ادائیگی کرنے کے لیے ایک بٹن۔

شپنگ کی اطلاع

آرڈر نمبر، کیریئر کا نام، کلک کرنے کے قابل لنک کے ساتھ ٹریکنگ نمبر، ڈیلیوری کی تخمینی تاریخ، اور بھیجی جانے والی اشیاء شامل کریں۔

اکثر پوچھے گئے سوالات

س: ڈریگ اینڈ ڈراپ ای میل بلڈر کیوں نہیں استعمال کرتے؟

ڈریگ اینڈ ڈراپ بنانے والے ای میلز کی مارکیٹنگ کے لیے کام کرتے ہیں لیکن لین دین کی ای میلز کے لیے متحرک مواد کی صلاحیتوں کا فقدان ہے۔ آرڈر کی تصدیق اور رسیدوں کے لیے ڈیٹا سے چلنے والے ٹیمپلیٹس کی ضرورت ہوتی ہے جو کوڈ بہتر طریقے سے ہینڈل کرتا ہے۔

س: کیا ری ایکٹ ای میل بھیجنے کی کسی سروس کے ساتھ کام کرتی ہے؟

جی ہاں یہ نوڈ میلر، SendGrid، پوسٹ مارک، AWS SES، دوبارہ بھیجیں، یا کسی SMTP سرور کے ساتھ ہم آہنگ معیاری HTML سٹرنگز کو آؤٹ پٹ کرتا ہے۔

س: ہم ای میل لوکلائزیشن کو کیسے ہینڈل کرتے ہیں؟

ٹیمپلیٹ پروپس کے بطور لوکل اور ترجمہ شدہ تاروں کو پاس کریں۔ رینڈر فنکشن تمام متن کو پیرامیٹرز کے طور پر وصول کرتا ہے، لہذا ترجمہ کرنے سے پہلے آپ کے i18n سسٹم کے ذریعے ترجمہ کیا جاتا ہے۔

س: کیا ہم متحرک تصاویر یا چارٹ شامل کر سکتے ہیں؟

یو آر ایل پر میزبان سرور کی طرف سے تیار کردہ تصاویر استعمال کریں۔ QuickChart جیسی لائبریریاں چارٹس کو بطور تصویر پیش کرتی ہیں۔ ایمبیڈڈ تصاویر سے پرہیز کریں -- مطابقت کے لیے میزبانی شدہ یو آر ایل استعمال کریں۔

آگے کیا ہے۔

ری ایکٹ ای میل ٹرانزیکشنل ای میل کی ترقی کو مایوس کن ٹیبل لے آؤٹ مشقوں سے جدید اجزاء پر مبنی ورک فلو میں تبدیل کرتی ہے۔

ای میل ٹیمپلیٹ ڈیولپمنٹ کے لیے ECOSIRE سے رابطہ کریں، یا مربوط ای میل ورک فلوز کے لیے ہماری Odoo نفاذ کی خدمات کو دریافت کریں۔

ECOSIRE کے ذریعہ شائع کیا گیا -- انٹرپرائز سوفٹ ویئر کے حل کے ساتھ کاروبار کو پیمانے میں مدد کرنا۔

blog.posts.react-email-templates-guide.title