Memulai dengan Email-Builder-js

Cara yang disarankan untuk menginstal pustaka Email-Builder-js adalah menggunakan NPM. Silakan gunakan perintah berikut untuk instalasi yang lancar.

npm install --save @usewaypoint/email-builder
 

Buat Desain Template Email Berbasis Komponen

Di inti perpustakaan open source Email-Builder-js terletak fokusnya pada komponen. Dengan pendekatan ini, pengembang perangkat lunak dapat membuat bagian yang dapat digunakan kembali seperti header, footer, bagian konten, dan tombol. Komponen-komponen ini dapat digabungkan dengan mudah untuk membentuk template lengkap. Dengan memecah desain seperti ini, tidak hanya kode menjadi lebih terorganisir, tetapi juga menjadi lebih sederhana untuk memperbarui dan mengelola template Anda. Pada contoh berikut, setiap komponen dibuat secara terpisah, memungkinkan komposisi yang fleksibel dan pembaruan di masa depan tanpa mengubah seluruh struktur.

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

const email = new EmailBuilder();

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

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Kami senang Anda bergabung. Nikmati fitur kami!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Salam Hormat,
Tim
',
  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 Kustom & Branding pada Template

Untuk memastikan templat email selaras dengan merek aplikasi, pustaka Email-Builder-js memungkinkan kustomisasi ekstensif melalui atribut style untuk setiap komponen. Ini mencakup penyesuaian warna, font, ukuran, dan tata letak templat. Pengembang perangkat lunak dapat menggunakan styling inline, yang penting untuk memastikan klien email menampilkan desain sebagaimana dimaksud. Potongan kode berikut membuat tombol dengan warna latar belakang, padding, dan sudut melengkung, yang distilir agar menyerupai tombol call-to-action khas yang selaras dengan warna merek.

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

Penyuntikan Konten Dinamis ke Email di Node.js

Untuk aplikasi yang mengirim email dipersonalisasi, seperti konfirmasi pesanan atau notifikasi khusus pengguna, pustaka sumber terbuka Email-Builder-js mendukung penyisipan konten dinamis. Pengembang perangkat lunak dapat secara programatis menyisipkan informasi spesifik pengguna (seperti nama, alamat, atau detail pembelian) ke dalam templat, memungkinkan pembuatan email yang lebih menarik dan relevan. Dengan menggunakan literal template, pengembang dapat dengan mudah mengganti placeholder dengan konten dinamis. Pendekatan ini sangat efektif untuk email transaksional dan situasi apa pun di mana personalisasi menjadi 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 telah membeli ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);