Email-Builder-js ilə Başlamaq

Tövsiyə olunan Email-Builder-js kitabxanasını quraşdırma üsulu NPM istifadə etməkdir. Zəhmət olmasa, problemsiz quraşdırma üçün aşağıdakı əmri işlədin.

npm install --save @usewaypoint/email-builder
 

Komponent-əsaslı E-poçt Şablonu Dizaynı Yaradın

Open source Email-Builder-js kitabxanasının nüvəsində komponentlərə yönəlmiş yanaşma dayanır. Bu yanaşma ilə proqramçılar başlıqlar, altbilgilər, məzmun bölmələri və düymələr kimi təkrar istifadə oluna bilən hissələri yarada bilərlər. Bu komponentlər asanlıqla qarışdırılıb tam şablon yaratmaq üçün birləşdirilə bilər. Dizaynı bu cür parçalayaraq, kod yalnız daha yaxşı təşkil olunmur, həm də şablonlarınızı yeniləmək və idarə etmək daha sadə olur. Aşağıdakı nümunədə, hər bir komponent ayrıca yaradılır, bu da bütöv strukturu dəyişdirmədən elastik tərkib və gələcək yeniləmələrə imkan verir.

 
const EmailBuilder = require('email-builder-js');

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
Platformamıza xoş gəlmişsiniz!
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
Sizi komandamızda görməkdən məmnunuq. Xüsusiyyətlərimizdən həzz alın!
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
Ən xoş arzularla,
Komanda
',
  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);
 

Şablonlara Özəl Stil və Brendinq Tətbiq edin

Email şablonlarının tətbiqin brendinqi ilə uyğun olmasını təmin etmək üçün Email-Builder-js kitabxanası hər komponent üçün style atributu vasitəsilə geniş özelleştirməyə imkan verir. Bu, şablonların rənglərini, şriftlərini, ölçülərini və tərtibatını tənzimləmək deməkdir. Proqram təminatı inkişaf etdiriciləri e‑poçt müştərilərinin dizaynları istənilən kimi göstərməsini təmin etmək üçün inline stilizasiya istifadə edə bilərlər. Aşağıdakı kod nümunəsi fon rəngi, padding və yuvarlaq künclərə sahib bir düymə yaradır, bu da brend rənglərinə uyğun tipik bir call-to-action düyməsi kimi stilizə olunur.

 
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-də E-poçtlara Dinamik Məzmun İnjektsiyası

Şəxsi e‑poçtlar göndərən tətbiqlər üçün, məsələn, sifariş təsdiqləri və ya istifadəçi‑spesifik bildirişlər, açıq mənbəli Email-Builder-js kitabxanası dinamik məzmun daxil etməsini dəstəkləyir. Proqram təminatı inkişaf etdiriciləri şablonlara istifadəçi‑spesifik məlumatları (adlar, ünvan və ya alış‑veriş detalları kimi) proqram vasitəsilə daxil edə bilərlər, bu da daha cəlbedici və əlaqəli e‑poçtların yaradılmasını təmin edir. Şablon ədədlərindən (template literals) istifadə edərək, inkişaf etdiricilər placeholder‑ları asanlıqla dinamik məzmunla əvəz edə bilərlər. Bu yanaşma tranzaksiya e‑poçtları və şəxsilaşmanın vacib olduğu hər hansı bir vəziyyət üçün son dərəcə təsirli olur, aşağıdakı nümunədə göstərildiyi kimi.

 
const userName = 'John Doe';
const product = 'Premium Subscription';

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
Salam ${userName},
Bizim ${product} məhsulunu satın aldığınız üçün təşəkkür edirik!
`,
  style: { color: '#333', fontSize: '16px' },
});

const template = email.buildTemplate({
  components: [personalizedContent],
});

console.log(template);