Kom i gang med Email-Builder-js

Den anbefalede måde at installere Email-Builder-js biblioteket på er ved at bruge NPM. Brug venligst følgende kommando for en problemfri installation.

npm install --save @usewaypoint/email-builder
 

Opret komponentbaseret e-mailskabelondesign

I kernen af det open source Email-Builder-js bibliotek ligger fokus på komponenter. Med denne tilgang kan softwareudviklere skabe genanvendelige dele såsom overskrifter, sidefødder, indholdssektioner og knapper. Disse komponenter kan blandes og matches ubesværet for at danne en komplet skabelon. Ved at opdele designet på denne måde er koden ikke kun bedre organiseret, men det bliver også enklere at opdatere og administrere dine skabeloner. I det følgende eksempel oprettes hver komponent individuelt, hvilket muliggør fleksibel sammensætning og fremtidige opdateringer uden at ændre hele strukturen.

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

const email = new EmailBuilder();

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

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Vi er glade for at have dig med ombord. Nyd vores funktioner!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Med venlig hilsen,
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);
 

Anvend tilpasset styling & branding på skabeloner

For at sikre, at e‑mail‑skabeloner stemmer overens med en applikations branding, giver Email-Builder-js‑biblioteket mulighed for omfattende tilpasning via style‑attributten for hver komponent. Dette inkluderer justering af farver, skrifttyper, størrelser og layout af skabelonerne. Softwareudviklere kan bruge inline‑styling, hvilket er kritisk for at sikre, at e‑mail‑klienter gengiver designene som tilsigtet. Følgende kodeudsnit opretter en knap med en baggrundsfarve, polstring og afrundede hjørner, stylet til at ligne en typisk call‑to‑action‑knap, der stemmer overens med brandfarverne.

 
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 indholdsinjektion i e-mails i Node.js

For applikationer, der sender personlige e‑mails, såsom ordrebekræftelser eller brugerspecifikke meddelelser, understøtter det open source Email-Builder-js‑bibliotek dynamisk indholdsindsprøjtning. Softwareudviklere kan programmatisk indsætte brugerspecifik information (som navne, adresse eller købsdetaljer) i skabeloner, hvilket muliggør oprettelsen af mere engagerende, relevante e‑mails. Ved at bruge template‑literals kan udviklere nemt erstatte pladsholdere med dynamisk indhold. Denne tilgang er yderst effektiv for transaktionelle e‑mails og enhver situation, hvor personalisering er afgørende, som vist i følgende eksempel.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Hej ${userName},
Tak for at du har købt vores ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);