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