Primeros pasos con Email-Builder-js

La forma recomendada de instalar la biblioteca Email-Builder-js es usando NPM. Por favor, utilice el siguiente comando para una instalación sin problemas.

npm install --save @usewaypoint/email-builder
 

Crear diseño de plantilla de correo electrónico basado en componentes

En el núcleo de la biblioteca de código abierto Email-Builder-js se encuentra su enfoque en los componentes. Con este enfoque, los desarrolladores de software pueden crear partes reutilizables como encabezados, pies de página, secciones de contenido y botones. Estos componentes pueden combinarse sin esfuerzo para formar una plantilla completa. Al desglosar el diseño de esta manera, no solo el código queda mejor organizado, sino que también se vuelve más sencillo actualizar y gestionar tus plantillas. En el siguiente ejemplo, cada componente se crea individualmente, lo que permite una composición flexible y actualizaciones futuras sin cambiar toda la estructura.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
¡Bienvenido a nuestra plataforma!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
¡Estamos emocionados de tenerte a bordo! ¡Disfruta de nuestras funciones!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Saludos cordiales,
Equipo
',
  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 estilo y marca personalizados a las plantillas

Para garantizar que las plantillas de correo electrónico se alineen con la identidad de marca de una aplicación, la biblioteca Email-Builder-js permite una personalización extensa mediante el atributo style de cada componente. Esto incluye ajustar colores, fuentes, tamaños y diseños de las plantillas. Los desarrolladores de software pueden usar estilos en línea, lo cual es fundamental para asegurar que los clientes de correo rendericen los diseños como se pretende. El siguiente fragmento de código crea un botón con un color de fondo, relleno y esquinas redondeadas, estilizado para asemejarse a un típico botón de llamado a la acción que se alinea con los colores de la 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);
 

Inyección de contenido dinámico en correos electrónicos con Node.js

Para aplicaciones que envían correos electrónicos personalizados, como confirmaciones de pedidos o notificaciones específicas para el usuario, la biblioteca de código abierto Email-Builder-js admite la inyección de contenido dinámico. Los desarrolladores de software pueden insertar programáticamente información específica del usuario (como nombres, direcciones o detalles de compra) en las plantillas, lo que permite crear correos más atractivos y relevantes. Al usar literales de plantilla, los desarrolladores pueden reemplazar fácilmente los marcadores de posición con contenido dinámico. Este enfoque es muy eficaz para correos transaccionales y cualquier situación en la que la personalización sea clave, como se muestra en el siguiente ejemplo.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Hola ${userName},
¡Gracias por comprar nuestro ${product}!
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);