Iniziare con Email-Builder-js

Il modo consigliato per installare la libreria Email-Builder-js è utilizzare NPM. Si prega di usare il comando seguente per un'installazione senza problemi.

npm install --save @usewaypoint/email-builder
 

Crea un design di modello email basato su componenti

Nel cuore della libreria open source Email-Builder-js risiede la sua attenzione ai componenti. Con questo approccio, gli sviluppatori software possono creare parti riutilizzabili come intestazioni, piè di pagina, sezioni di contenuto e pulsanti. Questi componenti possono essere combinati e mescolati senza sforzo per formare un modello completo. Suddividendo il design in questo modo, non solo il codice è meglio organizzato, ma diventa anche più semplice aggiornare e gestire i tuoi modelli. Nell'esempio seguente, ogni componente è creato individualmente, consentendo una composizione flessibile e aggiornamenti futuri senza modificare l'intera struttura.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Benvenuti sulla nostra piattaforma!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Siamo entusiasti di averti a bordo. Goditi le nostre funzionalità!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Cordiali saluti,
Team
',
  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);
 

Applica stili personalizzati e branding ai modelli

Per garantire che i modelli di email siano in linea con il branding di un'applicazione, la libreria Email-Builder-js consente un'ampia personalizzazione tramite l'attributo style per ciascun componente. Ciò include la regolazione di colori, caratteri, dimensioni e layout dei modelli. Gli sviluppatori software possono utilizzare lo styling inline, fondamentale per assicurare che i client di posta elettronica rendano i design come previsto. Il seguente frammento di codice crea un pulsante con un colore di sfondo, padding e angoli arrotondati, stilizzato per assomigliare a un tipico pulsante call-to-action che si allinea ai colori del brand.

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

Iniezione di contenuti dinamici nelle email in Node.js

Per le applicazioni che inviano email personalizzate, come conferme d'ordine o notifiche specifiche per l'utente, la libreria open source Email-Builder-js supporta l'iniezione di contenuti dinamici. Gli sviluppatori software possono inserire programmaticamente informazioni specifiche dell'utente (come nome, indirizzo o dettagli di acquisto) nei modelli, consentendo la creazione di email più coinvolgenti e pertinenti. Utilizzando i template literal, gli sviluppatori possono facilmente sostituire i segnaposto con contenuti dinamici. Questo approccio è altamente efficace per le email transazionali e per qualsiasi situazione in cui la personalizzazione è fondamentale, come mostrato nel seguente esempio.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Ciao ${userName},
Grazie per aver acquistato il nostro ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);