Початок роботи з 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);