Începeți cu Email-Builder-js

Modul recomandat pentru instalarea bibliotecii Email-Builder-js este utilizarea NPM. Vă rugăm să folosiți comanda următoare pentru o instalare fără probleme.

npm install --save @usewaypoint/email-builder
 

Creați design de șabloane de e-mail bazat pe componente

La baza bibliotecii open source Email-Builder-js se află accentul pe componente. Prin această abordare, dezvoltatorii de software pot crea părți reutilizabile, cum ar fi antete, subsoluri, secțiuni de conținut și butoane. Aceste componente pot fi combinate cu ușurință pentru a forma un șablon complet. Prin descompunerea designului în acest mod, nu doar că codul este mai bine organizat, ci devine și mai simplu de actualizat și gestionat șabloanele tale. În exemplul următor, fiecare componentă este creată individual, permițând o compoziție flexibilă și actualizări viitoare fără a schimba întreaga structură.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Bine ați venit pe platforma noastră!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Suntem încântați să te avem alături. Bucură-te de funcționalitățile noastre!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Cu stimă,
Echipa
',
  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);
 

Aplicați stiluri personalizate și branding la șabloane

Pentru a asigura că șabloanele de e-mail se aliniază cu brandingul unei aplicații, biblioteca Email-Builder-js permite o personalizare extensivă prin atributul style pentru fiecare componentă. Aceasta include ajustarea culorilor, fonturilor, dimensiunilor și layout-urilor șabloanelor. Dezvoltatorii software pot folosi stiluri inline, ceea ce este esențial pentru a garanta că clienții de e-mail redau designurile așa cum este intenționat. Fragmentul de cod de mai jos creează un buton cu o culoare de fundal, padding și colțuri rotunjite, stilizat pentru a semăna cu un buton tip call-to-action tipic care se aliniază cu culorile brandului.

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

Injectare dinamică de conținut în e-mailuri în Node.js

Pentru aplicațiile care trimit e‑mailuri personalizate, cum ar fi confirmările de comandă sau notificările specifice utilizatorului, biblioteca open source Email-Builder-js suportă injectarea de conținut dinamic. Dezvoltatorii software pot insera programatic informații specifice utilizatorului (cum ar fi nume, adresă sau detalii de achiziție) în șabloane, permițând crearea de e‑mailuri mai atractive și relevante. Folosind șiruri de șabloane, dezvoltatorii pot înlocui cu ușurință marcajele cu conținut dinamic. Această abordare este extrem de eficientă pentru e‑mailurile tranzacționale și orice situație în care personalizarea este esențială, așa cum se arată în exemplul de mai jos.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Salut ${userName},
Vă mulțumim pentru achiziționarea ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);