Começando com Email-Builder-js

A maneira recomendada de instalar a biblioteca Email-Builder-js é usando NPM. Por favor, use o comando a seguir para uma instalação tranquila.

npm install --save @usewaypoint/email-builder
 

Criar design de modelo de e‑mail baseado em componentes

No núcleo da biblioteca de código aberto Email-Builder-js está seu foco em componentes. Com essa abordagem, desenvolvedores de software podem criar partes reutilizáveis, como cabeçalhos, rodapés, seções de conteúdo e botões. Esses componentes podem ser combinados e combinados sem esforço para formar um modelo completo. Ao dividir o design dessa forma, não apenas o código fica melhor organizado, mas também se torna mais simples atualizar e gerenciar seus modelos. No exemplo a seguir, cada componente é criado individualmente, permitindo composição flexível e atualizações futuras sem mudar toda a estrutura.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Bem-vindo à nossa plataforma!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Estamos empolgados em tê-lo a bordo. Aproveite nossos recursos!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

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

Aplicar estilos personalizados e branding aos modelos

Para garantir que os modelos de e‑mail estejam alinhados com a identidade visual de um aplicativo, a biblioteca Email-Builder-js permite ampla personalização através do atributo style para cada componente. Isso inclui ajustar cores, fontes, tamanhos e layouts dos modelos. Os desenvolvedores de software podem usar estilos inline, o que é fundamental para garantir que os clientes de e‑mail renderizem os designs conforme o esperado. O trecho de código a seguir cria um botão com cor de fundo, preenchimento e cantos arredondados, estilizado para se assemelhar a um típico botão de call‑to‑action que está alinhado com as cores da marca.

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

Injeção de conteúdo dinâmico em e‑mails no Node.js

Para aplicativos que enviam e‑mails personalizados, como confirmações de pedido ou notificações específicas ao usuário, a biblioteca de código aberto Email-Builder-js suporta injeção de conteúdo dinâmico. Os desenvolvedores de software podem inserir programaticamente informações específicas do usuário (como nomes, endereço ou detalhes da compra) nos modelos, permitindo a criação de e‑mails mais envolventes e relevantes. Ao usar template literals, os desenvolvedores podem substituir facilmente os marcadores de posição por conteúdo dinâmico. Essa abordagem é altamente eficaz para e‑mails transacionais e qualquer situação em que a personalização seja essencial, como mostrado no exemplo a seguir.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Olá ${userName},
Obrigado por comprar nosso ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);