Bắt đầu với Email-Builder-js

Cách khuyến nghị để cài đặt thư viện Email-Builder-js là sử dụng NPM. Vui lòng sử dụng lệnh sau để cài đặt một cách suôn sẻ.

npm install --save @usewaypoint/email-builder
 

Tạo Thiết kế Mẫu Email Dựa trên Thành phần

Ở lõi của thư viện mã nguồn mở Email-Builder-js là việc tập trung vào các thành phần. Với cách tiếp cận này, các nhà phát triển phần mềm có thể tạo ra các phần tái sử dụng như tiêu đề, chân trang, các phần nội dung và nút bấm. Những thành phần này có thể được kết hợp một cách dễ dàng để tạo thành một mẫu hoàn chỉnh. Bằng cách phân tách thiết kế theo cách này, không chỉ mã nguồn được tổ chức tốt hơn, mà còn đơn giản hơn trong việc cập nhật và quản lý các mẫu của bạn. Trong ví dụ sau, mỗi thành phần được tạo riêng biệt, cho phép cấu thành linh hoạt và cập nhật trong tương lai mà không cần thay đổi toàn bộ cấu trúc.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Chào mừng đến với Nền tảng của Chúng tôi!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Chúng tôi rất vui mừng khi có bạn tham gia. Hãy tận hưởng các tính năng của chúng tôi!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Trân trọng,
Đội ngũ
',
  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);
 

Áp dụng Định dạng Tùy chỉnh & Thương hiệu cho Các mẫu

Để đảm bảo các mẫu email phù hợp với thương hiệu của ứng dụng, thư viện Email-Builder-js cho phép tùy chỉnh rộng rãi thông qua thuộc tính style cho mỗi thành phần. Điều này bao gồm việc điều chỉnh màu sắc, phông chữ, kích thước và bố cục của các mẫu. Các nhà phát triển phần mềm có thể sử dụng styling nội tuyến, điều này rất quan trọng để đảm bảo các client email hiển thị thiết kế như mong muốn. Đoạn mã dưới đây tạo một nút với màu nền, khoảng đệm và góc bo tròn, được thiết kế để giống một nút kêu gọi hành động điển hình phù hợp với màu thương hiệu.

 
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);
 

Tiêm nội dung động vào Email trong Node.js

Đối với các ứng dụng gửi email cá nhân hoá, chẳng hạn như xác nhận đơn hàng hoặc thông báo dành cho người dùng, thư viện mã nguồn mở Email-Builder-js hỗ trợ tiêm nội dung động. Các nhà phát triển phần mềm có thể chèn thông tin cụ thể của người dùng (như tên, địa chỉ hoặc chi tiết mua hàng) vào mẫu một cách lập trình, cho phép tạo ra các email hấp dẫn và phù hợp hơn. Bằng cách sử dụng template literals, các nhà phát triển có thể dễ dàng thay thế các placeholder bằng nội dung động. Cách tiếp cận này rất hiệu quả cho các email giao dịch và bất kỳ tình huống nào mà cá nhân hoá là yếu tố then chốt như được minh họa trong ví dụ sau.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Chào ${userName},
Cảm ơn bạn đã mua ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);