התחלה עם 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 עבור כל רכיב. זה כולל התאמת צבעים, גופנים, גדלים ופריסות של התבניות. מפתחי תוכנה יכולים להשתמש בעיצוב inline, שהוא קריטי כדי לוודא שלקוחות האימייל יציגו את העיצובים כפי שהתכוונו. הקטע הקוד הבא יוצר כפתור עם צבע רקע, ריפוד ופינות מעוגלות, מעוצב כך שייראה כמו כפתור קריאה לפעולה טיפוסי המתאים לצבעי המותג.

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