Első lépések az Email-Builder-js használatával

Az Email-Builder-js könyvtár telepítésének ajánlott módja az NPM használata. Kérjük, használja a következő parancsot a zökkenőmentes telepítéshez.

npm install --save @usewaypoint/email-builder
 

Komponens-alapú e-mail sablon tervezés létrehozása

A nyílt forráskódú Email-Builder-js könyvtár középpontjában a komponensekre való fókusz áll. Ezzel a megközelítéssel a szoftverfejlesztők újrahasználható részeket hozhatnak létre, mint például fejlécek, láblécek, tartalmi szakaszok és gombok. Ezeket a komponenseket könnyedén kombinálhatják, hogy egy teljes sablont alkossanak. A tervezés ilyen lebontásával nem csak a kód jobban szervezett, hanem egyszerűbbé válik a sablonok frissítése és kezelése is. Az alábbi példában minden komponens külön-külön jön létre, lehetővé téve a rugalmas összetételt és a jövőbeli frissítéseket anélkül, hogy az egész struktúrát meg kellene változtatni.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Üdvözöljük platformunkon!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Örülünk, hogy csatlakoztál. Élvezd a funkcióinkat!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Üdvözlettel,
Csapat
',
  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);
 

Egyedi stílus és márkázás alkalmazása a sablonokra

Annak érdekében, hogy az e‑mail sablonok összhangban legyenek egy alkalmazás márkázásával, az Email-Builder-js könyvtár kiterjedt testreszabást tesz lehetővé az egyes komponensek style attribútumán keresztül. Ez magában foglalja a színek, betűtípusok, méretek és elrendezések beállítását a sablonokban. A szoftverfejlesztők használhatnak beágyazott stílusokat, ami kritikus ahhoz, hogy az e‑mail kliensek a terveket a tervezett módon jelenítsék meg. Az alábbi kódrészlet egy gombot hoz létre háttérszínnel, belső margóval és lekerekített sarkokkal, amely úgy van stílusozva, hogy egy tipikus cselekvésre ösztönző gombot idézzen, és illeszkedjen a márkaszínekhez.

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

Dinamikus tartalom befecskendezése e-mailekbe Node.js-ben

A személyre szabott e‑mailt küldő alkalmazások, például rendelésmegerősítések vagy felhasználó‑specifikus értesítések esetén, az nyílt forráskódú Email-Builder-js könyvtár támogatja a dinamikus tartalombefecskendezést. A szoftverfejlesztők programozottan beilleszthetik a felhasználó‑specifikus információkat (például neveket, címet vagy vásárlási adatokat) a sablonokba, lehetővé téve vonzóbb, relevánsabb e‑mailek létrehozását. A sablon literálok használatával a fejlesztők könnyen helyettesíthetik a helyőrzőket dinamikus tartalommal. Ez a megközelítés rendkívül hatékony tranzakciós e‑mailekhez és minden olyan helyzetben, ahol a személyre szabás kulcsfontosságú, ahogyan az alábbi példában látható.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Szia ${userName},
Köszönjük, hogy megvásárolta a(z) ${product} termékünket!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);