Ξεκινώντας με το Email-Builder-js

Ο προτεινόμενος τρόπος εγκατάστασης της βιβλιοθήκης Email-Builder-js είναι μέσω NPM. Παρακαλώ χρησιμοποιήστε την παρακάτω εντολή για ομαλή εγκατάσταση.

npm install --save @usewaypoint/email-builder
 

Δημιουργία Σχεδίου Προτύπου Email με Βάση Συστατικά

Στον πυρήνα της ανοιχτής βιβλιοθήκης 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);
 

Εφαρμογή Προσαρμοσμένου Στυλ & Branding στα Πρότυπα

Για να διασφαλιστεί ότι τα πρότυπα email ευθυγραμμίζονται με την επωνυμία μιας εφαρμογής, η βιβλιοθήκη Email-Builder-js επιτρέπει εκτενή προσαρμογή μέσω του χαρακτηριστικού style για κάθε στοιχείο. Αυτό περιλαμβάνει την προσαρμογή χρωμάτων, γραμματοσειρών, μεγεθών και διατάξεων των προτύπων. Οι προγραμματιστές λογισμικού μπορούν να χρησιμοποιούν ενσωματωμένο στυλ, το οποίο είναι κρίσιμο για τη διασφάλιση ότι οι πελάτες email αποδίδουν τα σχέδια όπως προβλέπεται. Το παρακάτω απόσπασμα κώδικα δημιουργεί ένα κουμπί με χρώμα φόντου, περιθώριο και στρογγυλεμένες γωνίες, στυλιζαρισμένο ώστε να μοιάζει με ένα τυπικό κουμπί κλήσης σε δράση που ευθυγραμμίζεται με τα χρώματα της μάρκας.

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

Δυναμική Ένθεση Περιεχομένου σε Emails στο Node.js

Για εφαρμογές που στέλνουν εξατομικευμένα email, όπως επιβεβαιώσεις παραγγελιών ή ειδοποιήσεις προσαρμοσμένες σε χρήστη, η ανοιχτού κώδικα βιβλιοθήκη Email-Builder-js υποστηρίζει δυναμική ένεση περιεχομένου. Οι προγραμματιστές λογισμικού μπορούν προγραμματιστικά να εισάγουν πληροφορίες συγκεκριμένες για τον χρήστη (όπως ονόματα, διεύθυνση ή λεπτομέρειες αγοράς) στα πρότυπα, επιτρέποντας τη δημιουργία πιο ελκυστικών, σχετικών email. Χρησιμοποιώντας κυριολεκτικά πρότυπα, οι προγραμματιστές μπορούν εύκολα να αντικαταστήσουν τα σύμβολα κράτησης θέσης με δυναμικό περιεχόμενο. Αυτή η προσέγγιση είναι ιδιαίτερα αποτελεσματική για συναλλακτικά email και οποιαδήποτε κατάσταση όπου η εξατομίκευση είναι κλειδί, όπως φαίνεται στο παρακάτω παράδειγμα.

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