Начало работы с 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);