Kom igång med Email-Builder-js

Det rekommenderade sättet att installera Email-Builder-js-biblioteket är att använda NPM. Använd följande kommando för en smidig installation.

npm install --save @usewaypoint/email-builder
 

Skapa komponentbaserad e-postmalldesign

I kärnan av det öppna källkods-biblioteket Email-Builder-js ligger fokus på komponenter. Med detta tillvägagångssätt kan mjukvaruutvecklare skapa återanvändbara delar såsom rubriker, sidfötter, innehållsavsnitt och knappar. Dessa komponenter kan enkelt blandas och matchas för att bilda en komplett mall. Genom att bryta ner designen på detta sätt blir koden inte bara bättre organiserad, utan det blir också enklare att uppdatera och hantera dina mallar. I det följande exemplet skapas varje komponent individuellt, vilket möjliggör flexibel sammansättning och framtida uppdateringar utan att ändra hela strukturen.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Välkommen till vår plattform!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Vi är glada att ha dig med ombord. Njut av våra funktioner!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Med vänliga hälsningar,
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);
 

Applicera anpassad styling & varumärkesprofil på mallar

För att säkerställa att e‑postmallar överensstämmer med en applikations varumärke tillåter Email-Builder-js-biblioteket omfattande anpassning via style‑attributet för varje komponent. Detta inkluderar justering av färger, typsnitt, storlekar och layouter för mallarna. Mjukvaruutvecklare kan använda inline‑styling, vilket är kritiskt för att e‑postklienter ska rendera designen som avsett. Följande kodsnutt skapar en knapp med bakgrundsfärg, padding och rundade hörn, stylad för att likna en typisk call‑to‑action‑knapp som matchar varumärkets färger.

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

Dynamisk innehållsinjektion i e-postmeddelanden i Node.js

För applikationer som skickar personliga e‑postmeddelanden, såsom orderbekräftelser eller användarspecifika notiser, stödjer det öppna källkods‑biblioteket Email-Builder-js dynamisk innehållsinjektion. Mjukvaruutvecklare kan programatiskt infoga användarspecifik information (som namn, adress eller köpinformation) i mallar, vilket möjliggör skapandet av mer engagerande, relevanta e‑postmeddelanden. Genom att använda mall‑litteraler kan utvecklare enkelt ersätta platshållare med dynamiskt innehåll. Detta tillvägagångssätt är mycket effektivt för transaktions‑e‑post och alla situationer där personalisering är nyckeln, som visas i följande exempel.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Hej ${userName},
Tack för att du köpte vår ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);