Aan de slag met Email-Builder-js

De aanbevolen manier om de Email-Builder-js bibliotheek te installeren is via NPM. Gebruik alstublieft het volgende commando voor een soepele installatie.

npm install --save @usewaypoint/email-builder
 

Maak componentgebaseerd e-mail sjabloonontwerp

In de kern van de open source Email-Builder-js bibliotheek ligt de focus op componenten. Met deze aanpak kunnen softwareontwikkelaars herbruikbare onderdelen maken, zoals kopteksten, voetteksten, inhoudssecties en knoppen. Deze componenten kunnen moeiteloos worden gecombineerd om een volledige sjabloon te vormen. Door het ontwerp op deze manier op te delen, is de code niet alleen beter georganiseerd, maar wordt het ook eenvoudiger om je sjablonen bij te werken en te beheren. In het volgende voorbeeld wordt elk component afzonderlijk gemaakt, waardoor flexibele samenstelling en toekomstige updates mogelijk zijn zonder de volledige structuur te wijzigen.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Welkom op ons platform!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
We zijn enthousiast dat je aan boord bent. Geniet van onze functies!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Met vriendelijke groet,
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);
 

Pas aangepaste styling & branding toe op sjablonen

Om ervoor te zorgen dat e-mailtemplates overeenkomen met de branding van een applicatie, biedt de Email-Builder-js bibliotheek uitgebreide aanpassingsmogelijkheden via het style-attribuut voor elk component. Dit omvat het aanpassen van kleuren, lettertypen, groottes en lay-outs van de templates. Softwareontwikkelaars kunnen inline styling gebruiken, wat cruciaal is om ervoor te zorgen dat e-mailclients ontwerpen weergeven zoals bedoeld. De volgende codefragment maakt een knop met een achtergrondkleur, padding en afgeronde hoeken, gestyled om te lijken op een typische call-to-action knop die overeenkomt met de merkkleuren.

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

Dynamische inhoud injectie in e-mails in Node.js

Voor applicaties die gepersonaliseerde e-mails verzenden, zoals orderbevestigingen of gebruikersspecifieke meldingen, ondersteunt de open source Email-Builder-js bibliotheek dynamische contentinjectie. Softwareontwikkelaars kunnen programmatisch gebruikersspecifieke informatie (zoals namen, adressen of aankoopdetails) in templates invoegen, waardoor meer boeiende, relevante e-mails kunnen worden gemaakt. Door gebruik te maken van template literals kunnen ontwikkelaars eenvoudig placeholders vervangen door dynamische content. Deze aanpak is zeer effectief voor transactionele e-mails en elke situatie waarin personalisatie cruciaal is, zoals getoond in het volgende voorbeeld.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Hallo ${userName},
Bedankt voor het kopen van onze ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);