Започнете с Email-Builder-js

Препоръчителният начин за инсталиране на библиотеката Email-Builder-js е чрез NPM. Моля, използвайте следната команда за гладка инсталация.

npm install --save @usewaypoint/email-builder
 

Създаване на дизайн на имейл шаблон, базиран на компоненти

В сърцето на отворения код на библиотеката Email-Builder-js се намира фокусът върху компонентите. С този подход софтуерните разработчици могат да създават многократно използваеми части като заглавки, футъри, секции със съдържание и бутони. Тези компоненти могат лесно да се комбинират, за да образуват пълен шаблон. Като разбиваме дизайна по този начин, не само кодът е по-добре организиран, но също така става по-лесно да се актуализират и управляват вашите шаблони. В следващия пример всеки компонент се създава поотделно, което позволява гъвкаво съставяне и бъдещи актуализации без промяна на цялата структура.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Добре дошли в нашата платформа!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Вълнуваме се, че сте с нас. Насладете се на нашите функции!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
С най-добри пожелания,
Екип
',
  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);
 

Прилагане на персонализирано стилизиране и брандиране към шаблоните

За да се гарантира, че имейл шаблоните съответстват на бранда на приложението, библиотеката Email-Builder-js позволява обширно персонализиране чрез атрибута style за всеки компонент. Това включва настройване на цветове, шрифтове, размери и оформления на шаблоните. Софтуерните разработчици могат да използват вградено стилизиране, което е критично за осигуряване на правилното рендериране на дизайните от имейл клиентите. Следният кодов фрагмент създава бутон с фон, отстъп и заоблени ъгли, стилизиран да наподобява типичен бутон за действие, който съответства на цветовете на бранда.

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

Динамично вмъкване на съдържание в имейли в Node.js

За приложения, които изпращат персонализирани имейли, като потвърждения за поръчки или известия, специфични за потребителя, отворената библиотека Email-Builder-js поддържа динамично вмъкване на съдържание. Софтуерните разработчици могат програмистки да вмъкват потребителско специфична информация (като имена, адрес или детайли за покупка) в шаблоните, което позволява създаването на по-ангажиращи и релевантни имейли. Чрез използване на шаблонни литерали, разработчиците лесно заменят плейсхолдъри с динамично съдържание. Този подход е изключително ефективен за транзакционни имейли и всяка ситуация, където персонализацията е от съществено значение, както е показано в следния пример.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Здравей ${userName},
Благодарим ви, че закупихте нашия ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);