Mula Menggunakan Email-Builder-js

Cara yang disyorkan untuk memasang perpustakaan Email-Builder-js ialah menggunakan NPM. Sila gunakan perintah berikut untuk pemasangan yang lancar.

npm install --save @usewaypoint/email-builder
 

Cipta Reka Bentuk Templat E-mel Berasaskan Komponen

Di teras perpustakaan sumber terbuka Email-Builder-js terletak fokusnya pada komponen. Dengan pendekatan ini, pembangun perisian dapat mencipta bahagian yang boleh digunakan semula seperti tajuk, kaki, bahagian kandungan, dan butang. Komponen-komponen ini boleh digabungkan dan dipadankan dengan mudah untuk membentuk templat lengkap. Dengan memecahkan reka bentuk dengan cara ini, bukan sahaja kod menjadi lebih teratur, tetapi juga menjadi lebih mudah untuk mengemas kini dan mengurus templat anda. Dalam contoh berikut, setiap komponen dicipta secara individu, membolehkan komposisi yang fleksibel dan kemas kini masa depan tanpa mengubah keseluruhan struktur.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Selamat datang ke Platform Kami!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Kami teruja mempunyai anda bersama kami. Nikmati ciri-ciri kami!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Salam Hormat,
Pasukan
',
  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);
 

Terapkan Gaya & Penjenamaan Tersuai pada Templat

Untuk memastikan templat e-mel selaras dengan penjenamaan aplikasi, perpustakaan Email-Builder-js membenarkan penyesuaian meluas melalui atribut style bagi setiap komponen. Ini termasuk menyesuaikan warna, fon, saiz, dan susun atur templat. Pembangun perisian boleh menggunakan gaya dalam baris, yang penting untuk memastikan klien e-mel memaparkan reka bentuk seperti yang dimaksudkan. Snippet kod berikut mencipta butang dengan warna latar belakang, padding, dan sudut bulat, yang digayakan untuk menyerupai butang panggilan kepada tindakan biasa yang selaras dengan warna jenama.

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

Suntikan Kandungan Dinamik ke E-mel dalam Node.js

Bagi aplikasi yang menghantar e-mel peribadi, seperti pengesahan pesanan atau notifikasi khusus pengguna, perpustakaan sumber terbuka Email-Builder-js menyokong suntikan kandungan dinamik. Pembangun Perisian boleh secara programatik memasukkan maklumat khusus pengguna (seperti nama, alamat atau butiran pembelian) ke dalam templat, membolehkan penciptaan e-mel yang lebih menarik dan relevan. Dengan menggunakan literal templat, pembangun dapat dengan mudah menggantikan tempat letak dengan kandungan dinamik. Pendekatan ini sangat berkesan untuk e-mel transaksi dan apa-apa situasi di mana peribadi adalah kunci seperti yang ditunjukkan dalam contoh berikut.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Hai ${userName},
Terima kasih kerana membeli ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);