قوالب البريد الإلكتروني التفاعلية: أنشئ رسائل بريد إلكتروني رائعة للمعاملات

**تتمتع رسائل البريد الإلكتروني الخاصة بالمعاملات بمعدل فتح يبلغ 45% - ما يقرب من 5 أضعاف متوسط البريد الإلكتروني التسويقي - ومع ذلك ترسل معظم الشركات رسائل بريد إلكتروني بتنسيق HTML سيئة التنسيق مما يضر بإدراك العلامة التجارية. ** يجلب React Email نموذج التطوير القائم على المكونات لتصميم البريد الإلكتروني، مما يسمح للمطورين ببناء قوالب جميلة وسريعة الاستجابة باستخدام أنماط React المألوفة.

الوجبات الرئيسية

يتم تجميع مكونات React Email إلى HTML متوافق بين العملاء - Gmail وOutlook وApple Mail

تتيح البنية المبنية على المكونات إمكانية إعادة استخدام الرؤوس والتذييلات وأنماط التخطيط

يعمل خادم المعاينة المحلي مع التحديث السريع على تسريع عملية تطوير القالب

تصدير وظائف العرض (وليس المكونات الأولية) لتكامل NestJS السلس

لماذا الرد على البريد الإلكتروني

يعد البريد الإلكتروني بتنسيق HTML أمرًا صعبًا للغاية. يعرض العملاء المختلفون HTML بشكل مختلف - يستخدم Outlook Word كمحرك العرض الخاص به، ويزيل Gmail علامات الأنماط، ويختلف عملاء الأجهزة المحمولة في التعامل مع إطار العرض.

يلخص React Email ذلك باستخدام مكونات تم إنشاؤها مسبقًا: الحاوية (العرض المستجيب)، القسم (الكتل المستندة إلى الجدول)، الصف/العمود (نظام الشبكة)، النص، العنوان، الزر (يعمل في Outlook)، الصورة، الرابط، Hr، والمعاينة (نص البريد الوارد المخفي).

إعداد المشروع

قم بتثبيت @react-email/components وreact-email. قم بتنظيم القوالب في دليل الحزم/قوالب البريد الإلكتروني باستخدام القوالب/، والمكونات/، وملف 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 الذي يستورد القوالب ويصدر وظائف غير متزامنة:

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 للمعاينة المستندة إلى المتصفح مع إعادة التحميل السريع. تظهر التغييرات على الفور، مما يجعل التكرار سريعًا.

الاختبار عبر العملاء

اختبار عبر العملاء باستخدام Litmus أو Email on Acid. الحد الأدنى من الاختبار: Gmail (Chrome)، وOutlook (Windows)، وApple Mail، وGmail (iOS)، وApple Mail (iOS)، وYahoo Mail، وOutlook.com.

أفضل ممارسات التصميم

الأنماط المضمنة فقط: أنماط React للبريد الإلكتروني المضمنة تلقائيًا من أجل توافق العميل
خطوط النظام: استخدم Arial، Georgia، Verdana. الخطوط المخصصة لها دعم محدود.
600 بكسل أقصى عرض: عرض البريد الإلكتروني القياسي لسطح المكتب والهاتف المحمول
التخطيط المستند إلى الجدول: يتم عرض مكونات React Email كجداول للتوافق مع Outlook
الوضع المظلم: يتضمن العلامات الوصفية لدعم الوضع المظلم لـ Apple Mail وOutlook

قوالب البريد الإلكتروني الشائعة

تأكيد الطلب

قم بتضمين رقم الطلب وقائمة العناصر مع الأسعار وعنوان الشحن والتسليم المقدر ورابط التتبع عند توفره. استخدم تخطيط جدول لقائمة العناصر.

إعادة تعيين كلمة المرور

أبقِ الأمر بسيطًا: شرح موجز، وزر إعادة تعيين بارز مع رابط محدد المدة، وإشعار أمان حول عدم مشاركة الرابط، واتصال بالدعم.

البريد الإلكتروني الفاتورة

قم بإرفاق فاتورة PDF وقم بتضمين ملخص في نص البريد الإلكتروني: رقم الفاتورة، التاريخ، تاريخ الاستحقاق، المبلغ الإجمالي، وزر للعرض/الدفع عبر الإنترنت.

إشعار الشحن

قم بتضمين رقم الطلب واسم شركة النقل ورقم التتبع مع رابط قابل للنقر وتاريخ التسليم المقدر والعناصر التي يتم شحنها.

الأسئلة المتداولة

س: لماذا لا تستخدم أداة إنشاء البريد الإلكتروني بالسحب والإفلات؟

يعمل منشئو السحب والإفلات على رسائل البريد الإلكتروني التسويقية ولكنهم يفتقرون إلى إمكانات المحتوى الديناميكي لرسائل البريد الإلكتروني الخاصة بالمعاملات. تتطلب تأكيدات الطلب والفواتير قوالب تعتمد على البيانات والتي تتعامل معها التعليمات البرمجية بشكل أفضل.

س: هل يعمل React Email مع أي خدمة إرسال؟

نعم. يقوم بإخراج سلاسل HTML القياسية المتوافقة مع Nodemailer أو SendGrid أو Postmark أو AWS SES أو Resend أو أي خادم SMTP.

س: كيف نتعامل مع تعريب البريد الإلكتروني؟

قم بتمرير الإعدادات المحلية والسلاسل المترجمة كدعائم قالب. تستقبل وظيفة العرض كل النص كمعلمات، لذلك تتم معالجة الترجمات بواسطة نظام i18n الخاص بك قبل العرض.

س: هل يمكننا تضمين صور أو رسوم بيانية ديناميكية؟

استخدم الصور التي تم إنشاؤها من جانب الخادم والتي تتم استضافتها على عناوين URL. تعرض المكتبات مثل QuickChart المخططات كصور. تجنب الصور المضمنة - استخدم عناوين URL المستضافة لتحقيق التوافق.

ما هو التالي

يعمل React Email على تحويل تطوير البريد الإلكتروني للمعاملات من تمارين تخطيط الجدول المحبطة إلى سير عمل حديث قائم على المكونات.

اتصل بـ ECOSIRE لتطوير قالب البريد الإلكتروني، أو استكشف خدمات تنفيذ Odoo لسير عمل البريد الإلكتروني المتكامل.

تم النشر بواسطة ECOSIRE - مساعدة الشركات على التوسع باستخدام حلول برمجيات المؤسسات.

الوسوم:react-email email-templates transactional-email react nestjs

E

بقلم

ECOSIRE Research and Development Team

بناء منتجات رقمية بمستوى المؤسسات في ECOSIRE. مشاركة رؤى حول تكاملات Odoo وأتمتة التجارة الإلكترونية وحلول الأعمال المدعومة بالذكاء الاصطناعي.

عرض جميع المقالات

قوالب البريد الإلكتروني التفاعلية: إنشاء رسائل بريد إلكتروني رائعة للمعاملات