Pradžia su Email-Builder-js

Rekomenduojamas būdas įdiegti Email-Builder-js biblioteką – naudoti NPM. Prašome naudoti šią komandą sklandžiam įdiegimui.

npm install --save @usewaypoint/email-builder
 

Kurti komponentų pagrindu sukurtą el. laiškų šablono dizainą

Atviro kodo Email-Builder-js bibliotekos esmėje yra jos dėmesys komponentams. Naudodami šį požiūrį, programinės įrangos kūrėjai gali kurti pakartotinai naudojamus elementus, tokius kaip antraštės, poraštės, turinio sekcijos ir mygtukai. Šiuos komponentus galima lengvai derinti ir kombinuoti, kad susidarytų pilnas šablonas. Skaldant dizainą šiuo būdu, ne tik kodas tampa geriau organizuotas, bet taip pat paprasčiau atnaujinti ir tvarkyti jūsų šablonus. Tolimesniame pavyzdyje kiekvienas komponentas sukuriamas atskirai, leidžiant lankstų komponavimą ir būsimas atnaujinimus be visos struktūros keitimo.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Sveiki atvykę į mūsų platformą!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Džiaugiamės, kad prisijungėte. Mėgaukitės mūsų funkcijomis!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

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

Taikyti pasirinktinius stilius ir prekės ženklo elementus šablonams

Kad el. laiškų šablonai atitiktų programos prekės ženklo įvaizdį, Email-Builder-js biblioteka leidžia plačiai pritaikyti stilių per style atributą kiekvienam komponentui. Tai apima spalvų, šriftų, dydžių ir išdėstymo koregavimą šablonuose. Programuotojai gali naudoti įterptinį (inline) stilių, kuris yra esminis, kad el. pašto klientai atvaizduotų dizainą taip, kaip numatyta. Žemiau pateiktas kodo fragmentas sukuria mygtuką su fono spalva, tarpu ir suapvalintais kampais, stilizuotą taip, kad primintų įprastą skatinimo veiksmą (call‑to‑action) mygtuką, atitinkantį prekės ženklo spalvas.

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

Dinaminis turinio įterpimas į el. laiškus Node.js aplinkoje

Programoms, kurios siunčia personalizuotus el. laiškus, pvz., užsakymų patvirtinimus ar vartotojui skirtus pranešimus, atviro kodo Email-Builder-js biblioteka palaiko dinaminį turinio įterpimą. Programuotojai gali programiškai įdėti vartotojui specifinę informaciją (pvz., vardus, adresą ar pirkimo detales) į šablonus, leidžiančią kurti patrauklesnius, aktualius laiškus. Naudojant šablono literales, kūrėjai lengvai pakeičia vietos žymeklius dinaminiais duomenimis. Šis metodas ypač efektyvus transakciniams el. laiškams ir bet kuriai situacijai, kurioje svarbi personalizacija, kaip parodyta toliau pateiktame pavyzdyje.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Sveiki ${userName},
Dėkojame, kad įsigijote mūsų ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);