Erste Schritte mit Email-Builder-js

Die empfohlene Methode, die Email-Builder-js-Bibliothek zu installieren, ist die Verwendung von NPM. Bitte verwenden Sie den folgenden Befehl für eine reibungslose Installation.

npm install --save @usewaypoint/email-builder
 

Komponentenbasiertes E-Mail-Template-Design erstellen

Im Kern der Open-Source-Bibliothek Email-Builder-js liegt der Fokus auf Komponenten. Mit diesem Ansatz können Softwareentwickler wiederverwendbare Teile wie Header, Footer, Inhaltsabschnitte und Buttons erstellen. Diese Komponenten lassen sich mühelos kombinieren, um eine vollständige Vorlage zu bilden. Durch die Aufteilung des Designs auf diese Weise ist der Code nicht nur besser organisiert, sondern es wird auch einfacher, Ihre Vorlagen zu aktualisieren und zu verwalten. Im folgenden Beispiel wird jede Komponente einzeln erstellt, was eine flexible Zusammensetzung und zukünftige Updates ermöglicht, ohne die gesamte Struktur zu ändern.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Willkommen auf unserer Plattform!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Wir freuen uns, Sie an Bord zu haben. Viel Spaß mit unseren Funktionen!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Mit freundlichen Grüßen,
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);
 

Benutzerdefiniertes Styling & Branding auf Vorlagen anwenden

Um sicherzustellen, dass E-Mail-Vorlagen mit dem Branding einer Anwendung übereinstimmen, ermöglicht die Email-Builder-js-Bibliothek umfangreiche Anpassungen über das style-Attribut für jede Komponente. Dazu gehört das Anpassen von Farben, Schriftarten, Größen und Layouts der Vorlagen. Softwareentwickler können Inline-Styling verwenden, was entscheidend dafür ist, dass E-Mail-Clients die Designs wie beabsichtigt rendern. Das folgende Code‑Snippet erstellt einen Button mit Hintergrundfarbe, Padding und abgerundeten Ecken, der so gestaltet ist, dass er einem typischen Call-to-Action‑Button entspricht und mit den Markenfarben harmoniert.

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

Dynamisches Einfügen von Inhalten in E-Mails mit Node.js

Für Anwendungen, die personalisierte E-Mails versenden, wie Bestellbestätigungen oder benutzerspezifische Benachrichtigungen, unterstützt die Open‑Source‑Email-Builder-js‑Bibliothek die dynamische Inhaltsinjektion. Softwareentwickler können programmgesteuert benutzerspezifische Informationen (wie Namen, Adresse oder Kaufdetails) in Vorlagen einfügen, wodurch ansprechendere und relevantere E-Mails entstehen. Durch die Verwendung von Template‑Literals können Entwickler Platzhalter einfach durch dynamischen Inhalt ersetzen. Dieser Ansatz ist besonders effektiv für transaktionale E-Mails und jede Situation, in der Personalisierung entscheidend ist, wie im folgenden Beispiel gezeigt.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Hallo ${userName},
Vielen Dank für den Kauf unseres ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);