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 लाइब्रेरी डायनामिक कंटेंट इन्जेक्शन का समर्थन करती है। सॉफ़्टवेयर डेवलपर्स प्रोग्रामेटिकली उपयोगकर्ता-विशिष्ट जानकारी (जैसे नाम, पता या खरीद विवरण) को टेम्पलेट्स में डाल सकते हैं, जिससे अधिक आकर्षक और प्रासंगिक ईमेल बनते हैं। टेम्पलेट लिटेरल्स का उपयोग करके, डेवलपर्स आसानी से प्लेसहोल्डर्स को डायनामिक कंटेंट से बदल सकते हैं। यह दृष्टिकोण ट्रांज़ैक्शनल ईमेल्स और किसी भी स्थिति में जहाँ व्यक्तिगतकरण महत्वपूर्ण है, अत्यधिक प्रभावी है, जैसा कि निम्नलिखित उदाहरण में दिखाया गया है।

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