شروع کار با Email-Builder-js

روش پیشنهادی برای نصب کتابخانه Email-Builder-js استفاده از NPM است. لطفاً برای نصب بدون مشکل از دستور زیر استفاده کنید.

npm install --save @usewaypoint/email-builder
 

ایجاد طراحی قالب ایمیل مبتنی بر مؤلفه‌ها

در هسته کتابخانه منبع باز Email-Builder-js تمرکز آن بر روی مؤلفه‌ها قرار دارد. با این رویکرد، توسعه‌دهندگان نرم‌افزار می‌توانند بخش‌های قابل استفاده مجددی مانند سرصفحه‌ها، پاورقی‌ها، بخش‌های محتوا و دکمه‌ها را ایجاد کنند. این مؤلفه‌ها می‌توانند به راحتی ترکیب و ترکیب شوند تا یک قالب کامل تشکیل دهند. با تقسیم طراحی به این شکل، نه تنها کد بهتر سازماندهی می‌شود، بلکه به‌روزرسانی و مدیریت قالب‌های شما نیز ساده‌تر می‌شود. در مثال زیر، هر مؤلفه به‌صورت جداگانه ایجاد می‌شود، که امکان ترکیب انعطاف‌پذیر و به‌روزرسانی‌های آینده بدون تغییر ساختار کلی را فراهم می‌کند.

 
const EmailBuilder = require('email-builder-js');

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
به پلتفرم ما خوش آمدید!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
ما خوشحالیم که شما را در تیم داریم. از ویژگی‌های ما لذت ببرید!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
با احترام,
تیم
',
  style: { color: '#999', textAlign: 'center', padding: '10px' },
});

// Combine components into a template
const template = email.buildTemplate({
  components: [header, mainContent, footer],
});

// Output the complete HTML template
console.log(template);
 

اعمال استایل سفارشی و برندینگ به قالب‌ها

برای اطمینان از اینکه قالب‌های ایمیل با برندینگ برنامه هم‌راستا باشند، کتابخانه Email-Builder-js امکان سفارشی‌سازی گسترده از طریق ویژگی style برای هر مؤلفه را فراهم می‌کند. این شامل تنظیم رنگ‌ها، فونت‌ها، اندازه‌ها و چیدمان‌های قالب‌ها می‌شود. توسعه‌دهندگان نرم‌افزار می‌توانند از استایل‌گذاری درون‌خطی استفاده کنند، که برای اطمینان از رندر صحیح طرح‌ها توسط کلاینت‌های ایمیل حیاتی است. قطعه کد زیر یک دکمه با رنگ پس‌زمینه، حاشیه داخلی و گوشه‌های گرد ایجاد می‌کند که به‌صورت یک دکمه فراخوانی به عمل (call‑to‑action) معمولی است و با رنگ‌های برند هم‌راستا است.

 
const button = email.createComponent({
  tag: 'a',
  content: 'Click Here to Get Started',
  attributes: { href: 'https://example.com/get-started' },
  style: {
    display: 'inline-block',
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: '#fff',
    textDecoration: 'none',
    borderRadius: '5px',
    textAlign: 'center'
  },
});

const template = email.buildTemplate({
  components: [button],
});

console.log(template);
 

تزریق محتوای پویا به ایمیل‌ها در Node.js

برای برنامه‌هایی که ایمیل‌های شخصی‌سازی‌شده ارسال می‌کنند، مانند تأییدیه‌های سفارش یا اعلان‌های مخصوص کاربر، کتابخانه منبع باز Email-Builder-js از تزریق محتوای پویا پشتیبانی می‌کند. توسعه‌دهندگان نرم‌افزار می‌توانند به‌صورت برنامه‌نویسی اطلاعات مخصوص کاربر (مانند نام‌ها، آدرس یا جزئیات خرید) را در قالب‌ها وارد کنند و به ایجاد ایمیل‌های جذاب‌تر و مرتبط‌تر کمک کنند. با استفاده از قالب‌های متنی (template literals)، توسعه‌دهندگان می‌توانند به‌راحتی مکان‌نگهدارها را با محتوای پویا جایگزین کنند. این رویکرد برای ایمیل‌های تراکنشی و هر موقعیتی که شخصی‌سازی کلید است، به‌طور مؤثری عمل می‌کند همان‌طور که در مثال زیر نشان داده شده است.

 
const userName = 'John Doe';
const product = 'Premium Subscription';

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
سلام ${userName}،
از خرید ${product} شما سپاسگزاریم!
`,
  style: { color: '#333', fontSize: '16px' },
});

const template = email.buildTemplate({
  components: [personalizedContent],
});

console.log(template);