Rozpoczęcie pracy z Email-Builder-js

Zalecany sposób instalacji biblioteki Email-Builder-js to użycie NPM. Proszę użyć poniższego polecenia, aby przeprowadzić płynną instalację.

npm install --save @usewaypoint/email-builder
 

Tworzenie projektów szablonów e-mail opartych na komponentach

W samym rdzeniu otwartoźródłowej biblioteki Email-Builder-js leży jej skupienie na komponentach. Dzięki temu podejściu programiści mogą tworzyć wielokrotnego użytku części, takie jak nagłówki, stopki, sekcje treści i przyciski. Te komponenty można łatwo łączyć i dopasowywać, aby stworzyć kompletny szablon. Rozbijając projekt w ten sposób, kod jest nie tylko lepiej zorganizowany, ale także prostszy w aktualizacji i zarządzaniu szablonami. W poniższym przykładzie każdy komponent jest tworzony osobno, co umożliwia elastyczną kompozycję i przyszłe aktualizacje bez zmiany całej struktury.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Witamy na naszej platformie!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Cieszymy się, że dołączasz do nas. Ciesz się naszymi funkcjami!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Pozdrawiam serdecznie,
Zespół
',
  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);
 

Zastosuj własne style i branding w szablonach

Aby zapewnić, że szablony e‑maili są zgodne z identyfikacją wizualną aplikacji, biblioteka Email-Builder-js umożliwia rozbudowaną personalizację poprzez atrybut style dla każdego komponentu. Obejmuje to dostosowywanie kolorów, czcionek, rozmiarów i układów szablonów. Programiści mogą używać stylów inline, co jest kluczowe dla zapewnienia, że klienci poczty renderują projekty zgodnie z zamierzeniami. Poniższy fragment kodu tworzy przycisk z kolorem tła, wypełnieniem i zaokrąglonymi rogami, stylizowany tak, aby przypominał typowy przycisk wezwania do działania, zgodny z kolorami marki.

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

Dynamiczne wstawianie treści do e-maili w Node.js

W aplikacjach, które wysyłają spersonalizowane e‑maile, takie jak potwierdzenia zamówień czy powiadomienia skierowane do konkretnego użytkownika, otwarto‑źródłowa biblioteka Email-Builder-js obsługuje dynamiczne wstawianie treści. Programiści mogą programowo wstawiać informacje specyficzne dla użytkownika (takie jak imiona, adresy czy szczegóły zakupu) do szablonów, umożliwiając tworzenie bardziej angażujących i istotnych e‑maili. Korzystając z literałów szablonowych, deweloperzy mogą łatwo zamieniać symbole zastępcze na dynamiczną treść. To podejście jest bardzo skuteczne w przypadku e‑maili transakcyjnych i wszelkich sytuacji, w których personalizacja ma kluczowe znaczenie, jak pokazano w poniższym przykładzie.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Cześć ${userName},
Dziękujemy za zakup naszego ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);