Email-Builder-js ile Başlarken

Email-Builder-js kütüphanesini kurmanın önerilen yolu NPM kullanmaktır. Sorunsuz bir kurulum için lütfen aşağıdaki komutu kullanın.

npm install --save @usewaypoint/email-builder
 

Bileşen Tabanlı E-posta Şablonu Tasarımı Oluşturun

Açık kaynak Email-Builder-js kütüphanesinin çekirdeğinde bileşenlere odaklanması yatar. Bu yaklaşımla, yazılım geliştiricileri başlıklar, altbilgiler, içerik bölümleri ve düğmeler gibi yeniden kullanılabilir parçalar oluşturabilir. Bu bileşenler sorunsuz bir şekilde karıştırılıp eşleştirilerek tam bir şablon oluşturulabilir. Tasarımı bu şekilde parçalayarak, kod sadece daha iyi organize olmakla kalmaz, aynı zamanda şablonlarınızı güncellemek ve yönetmek de daha basit hale gelir. Aşağıdaki örnekte, her bileşen ayrı ayrı oluşturulmuş, böylece tüm yapıyı değiştirmeden esnek bir kompozisyon ve gelecekteki güncellemeler mümkün olur.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Platformumuza Hoş Geldiniz!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Sizi aramızda görmekten heyecan duyuyoruz. Özelliklerimizin tadını çıkarın!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Saygılarımızla,
Takım
',
  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);
 

Şablonlara Özel Stil ve Markalaşma Uygulayın

Uygulamanın marka kimliğine uygun e-posta şablonlarının olmasını sağlamak için Email-Builder-js kütüphanesi, her bileşen için style özniteliği aracılığıyla kapsamlı özelleştirme imkanı sunar. Bu, şablonların renklerini, yazı tiplerini, boyutlarını ve düzenlerini ayarlamayı içerir. Yazılım geliştiricileri, e-posta istemcilerinin tasarımları amaçlandığı gibi render etmesini sağlamak için kritik olan satır içi stil kullanabilir. Aşağıdaki kod parçacığı, arka plan rengi, iç boşluk ve yuvarlatılmış köşelere sahip bir düğme oluşturur; bu düğme, marka renkleriyle uyumlu tipik bir eylem çağrısı düğmesini taklit edecek şekilde stil verilmiştir.

 
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'te E-postalara Dinamik İçerik Enjeksiyonu

Kişiselleştirilmiş e-postalar gönderen uygulamalar için, örneğin sipariş onayları veya kullanıcıya özel bildirimler gibi, açık kaynaklı Email-Builder-js kütüphanesi dinamik içerik enjeksiyonunu destekler. Yazılım geliştiricileri, şablonlara kullanıcıya özgü bilgileri (isimler, adres veya satın alma detayları gibi) programlı olarak ekleyebilir ve böylece daha ilgi çekici, ilgili e-postalar oluşturulabilir. Şablon dizileri kullanılarak, geliştiriciler yer tutucuları dinamik içerikle kolayca değiştirebilir. Bu yaklaşım, işlem e-postaları ve kişiselleştirmenin kritik olduğu her durumda son derece etkilidir; aşağıdaki örnekte gösterildiği gibi.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Merhaba ${userName},
Ürünümüz ${product} satın aldığınız için teşekkür ederiz!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);