Premiers pas avec Email-Builder-js

La façon recommandée d'installer la bibliothèque Email-Builder-js est d'utiliser NPM. Veuillez utiliser la commande suivante pour une installation fluide.

npm install --save @usewaypoint/email-builder
 

Créer une conception de modèle d'e-mail basée sur les composants

Au cœur de la bibliothèque open source Email-Builder-js se trouve son accent sur les composants. Avec cette approche, les développeurs peuvent créer des parties réutilisables telles que les en-têtes, pieds de page, sections de contenu et boutons. Ces composants peuvent être combinés facilement pour former un modèle complet. En décomposant le design de cette manière, non seulement le code est mieux organisé, mais il devient également plus simple de mettre à jour et de gérer vos modèles. Dans l'exemple suivant, chaque composant est créé individuellement, permettant une composition flexible et des mises à jour futures sans changer toute la structure.

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

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Bienvenue sur notre plateforme !
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Nous sommes ravis de vous compter parmi nous. Profitez de nos fonctionnalités !
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

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

Appliquer un style personnalisé et l'image de marque aux modèles

Pour garantir que les modèles d'e-mails correspondent à l'image de marque d'une application, la bibliothèque Email-Builder-js permet une personnalisation approfondie via l'attribut style de chaque composant. Cela inclut l'ajustement des couleurs, des polices, des tailles et des mises en page des modèles. Les développeurs peuvent utiliser le style en ligne, ce qui est essentiel pour que les clients de messagerie affichent les conceptions comme prévu. Le fragment de code suivant crée un bouton avec une couleur d'arrière-plan, du remplissage et des coins arrondis, stylisé pour ressembler à un bouton d'appel à l'action typique qui s'aligne sur les couleurs de la marque.

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

Injection de contenu dynamique dans les e-mails avec Node.js

Pour les applications qui envoient des e-mails personnalisés, tels que les confirmations de commande ou les notifications spécifiques à l'utilisateur, la bibliothèque open source Email-Builder-js prend en charge l'injection de contenu dynamique. Les développeurs peuvent insérer de manière programmatique des informations propres à l'utilisateur (comme le nom, l'adresse ou les détails d'achat) dans les modèles, permettant la création d'e-mails plus engageants et pertinents. En utilisant des littéraux de modèle, les développeurs peuvent facilement remplacer les espaces réservés par du contenu dynamique. Cette approche est très efficace pour les e-mails transactionnels et toute situation où la personnalisation est essentielle, comme le montre l'exemple suivant.

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

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Bonjour ${userName},
Merci d'avoir acheté notre ${product} !
`,
  style: { color: '#333', fontSize: '16px' },
});

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

console.log(template);