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 লাইব্রেরি প্রতিটি কম্পোনেন্টের স্টাইল অ্যাট্রিবিউটের মাধ্যমে ব্যাপক কাস্টমাইজেশন অনুমোদন করে। এতে টেমপ্লেটের রঙ, ফন্ট, সাইজ এবং লেআউট সমন্বয় করা অন্তর্ভুক্ত। সফটওয়্যার ডেভেলপাররা ইনলাইন স্টাইলিং ব্যবহার করতে পারেন, যা ইমেল ক্লায়েন্টগুলি ডিজাইনগুলি ইচ্ছামতো রেন্ডার করে তা নিশ্চিত করার জন্য গুরুত্বপূর্ণ। নিম্নলিখিত কোড স্নিপেটটি একটি বাটন তৈরি করে যার ব্যাকগ্রাউন্ড রঙ, প্যাডিং এবং গোলাকার কোণ রয়েছে, যা ব্র্যান্ডের রঙের সাথে সামঞ্জস্যপূর্ণ একটি সাধারণ কল-টু-অ্যাকশন বাটনের মতো স্টাইল করা হয়েছে।

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