เริ่มต้นใช้งาน 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 สำหรับแต่ละคอมโพเนนต์ ซึ่งรวมถึงการปรับสี, ฟอนต์, ขนาด และการจัดวางของเทมเพลต นักพัฒนาซอฟต์แวร์สามารถใช้การจัดรูปแบบแบบอินไลน์ ซึ่งสำคัญสำหรับการทำให้ไคลเอนต์อีเมลแสดงผลการออกแบบตามที่ต้องการ โค้ดตัวอย่างต่อไปนี้สร้างปุ่มที่มีสีพื้นหลัง, การเว้นระยะ, และมุมโค้งมน โดยออกแบบให้คล้ายกับปุ่มเรียกการกระทำทั่วไปที่สอดคล้องกับสีแบรนด์

 
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 รองรับการแทรกเนื้อหาแบบไดนามิก นักพัฒนาซอฟต์แวร์สามารถใส่ข้อมูลเฉพาะผู้ใช้ (เช่น ชื่อ, ที่อยู่ หรือรายละเอียดการซื้อ) ลงในเทมเพลตได้โดยโปรแกรม ทำให้สร้างอีเมลที่น่าสนใจและเกี่ยวข้องมากขึ้น ด้วยการใช้ template literals นักพัฒนาสามารถแทนที่ตัวแสดงตำแหน่งด้วยเนื้อหาแบบไดนามิกได้อย่างง่ายดาย วิธีการนี้มีประสิทธิภาพสูงสำหรับอีเมลเชิงธุรกรรมและสถานการณ์ใด ๆ ที่การปรับให้เป็นส่วนบุคคลเป็นกุญแจสำคัญตามตัวอย่างต่อไปนี้

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