Kā sākt darbu ar Email-Builder-js

Ieteicamais veids, kā instalēt Email-Builder-js bibliotēku, ir izmantot NPM. Lūdzu, izmantojiet šādu komandu, lai veiktu gludu instalāciju.

npm install --save @usewaypoint/email-builder
 

Izveidojiet komponentu balstītu e-pasta veidņu dizainu

Atvērtā koda Email-Builder-js bibliotēkas kodolā ir tās koncentrēšanās uz komponentēm. Ar šo pieeju programmatūras izstrādātāji var izveidot atkārtoti lietojamas daļas, piemēram, galvenes, kājenes, satura sekcijas un pogas. Šīs komponentes var viegli sajaukt un kombinēt, lai izveidotu pilnīgu veidni. Šādā veidā sadalot dizainu, ne tikai kods kļūst labāk organizēts, bet arī vienkāršāk atjaunināt un pārvaldīt jūsu veidnes. Turpmākajā piemērā katra komponente tiek izveidota atsevišķi, ļaujot elastīgi komponēt un veikt turpmākus atjauninājumus, nemainot visu struktūru.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Laipni lūdzam mūsu platformā!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Mēs esam priecīgi, ka esat pievienojies. Izbaudiet mūsu funkcijas!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Ar cieņu,
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);
 

Pielietojiet pielāgotu stilizāciju un zīmola izskatu veidnēm

Lai nodrošinātu, ka e-pasta veidnes atbilst lietojumprogrammas zīmolam, Email-Builder-js bibliotēka ļauj veikt plašu pielāgošanu, izmantojot katra komponenta style atribūtu. Tas ietver krāsu, fontu, izmēru un izkārtojuma pielāgošanu veidnēs. Programmatūras izstrādātāji var izmantot iekļauto stilu, kas ir būtiski, lai e-pasta klienti attēlotu dizainu kā paredzēts. Zemāk esošais koda fragments izveido pogu ar fona krāsu, iekšējo atstarpi un noapaļotiem stūriem, stilizētu, lai atgādinātu tipisku aicinājumu uz darbību, kas atbilst zīmola krāsām.

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

Dinamisks satura injicēšana e-pastos ar Node.js

Lietojumprogrammām, kas sūta personalizētus e-pastus, piemēram, pasūtījumu apstiprinājumus vai lietotājam specifiskus paziņojumus, atvērtā koda Email-Builder-js bibliotēka atbalsta dinamisku satura injekciju. Programmatūras izstrādātāji var programmatiski ievietot lietotājam specifisku informāciju (piemēram, vārdus, adresi vai pirkuma detaļas) veidnēs, ļaujot izveidot iesaistošākus, atbilstošākus e-pastus. Izmantojot veidņu literālus, izstrādātāji var viegli aizstāt vietturi ar dinamisku saturu. Šī pieeja ir ļoti efektīva darījumu e-pastiem un jebkurai situācijai, kur personalizācija ir būtiska, kā parādīts turpmākajā piemērā.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Sveiki ${userName},
Paldies, ka nopirkāt mūsu ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);