mailgen

A Node.js package that generates clean, responsive HTML e-mails for sending...

eladnava/mailgenmailgen

README

mailgen npm version


A Node.js package that generates clean, responsive HTML e-mails for sending transactional mail.

Programmatically create beautiful e-mails using plain old JavaScript.


Demo



These e-mails were generated using the built-in salted theme.


Usage


First, install the package using npm:

  1. ``` sh
  2. npm install mailgen --save
  3. ```

Then, start using the package by importing and configuring it:

  1. ``` js
  2. var Mailgen = require('mailgen');

  4. // Configure mailgen by setting a theme and your product info
  5. var mailGenerator = new Mailgen({
  6.     theme: 'default',
  7.     product: {
  8.         // Appears in header & footer of e-mails
  9.         name: 'Mailgen',
  10.         link: 'https://mailgen.js/'
  11.         // Optional product logo
  12.         // logo: 'https://mailgen.js/img/logo.png'
  13.     }
  14. });
  15. ```

Next, generate an e-mail using the following code:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         name: 'John Appleseed',
  5.         intro: 'Welcome to Mailgen! We\'re very excited to have you on board.',
  6.         action: {
  7.             instructions: 'To get started with Mailgen, please click here:',
  8.             button: {
  9.                 color: '#22BC66', // Optional action button color
  10.                 text: 'Confirm your account',
  11.                 link: 'https://mailgen.js/confirm?s=d9729feb74992cc3482b350163a1a010'
  12.             }
  13.         },
  14.         outro: 'Need help, or have questions? Just reply to this email, we\'d love to help.'
  15.     }
  16. };

  18. // Generate an HTML email with the provided contents
  19. var emailBody = mailGenerator.generate(email);

  21. // Generate the plaintext version of the e-mail (for clients that do not support HTML)
  22. var emailText = mailGenerator.generatePlaintext(email);

  24. // Optionally, preview the generated HTML e-mail by writing it to a local file
  25. require('fs').writeFileSync('preview.html', emailBody, 'utf8');

  27. // `emailBody` now contains the HTML body,
  28. // and `emailText` contains the textual version.
  29. //
  30. // It's up to you to send the e-mail.
  31. // Check out nodemailer to accomplish this:
  32. // https://nodemailer.com/
  33. ```

This code would output the following HTML template:


More Examples


Receipt
Password Reset

Plaintext E-mails


To generate a plaintext version of the e-mail, simply callgeneratePlaintext():

  1. ``` js
  2. // Generate plaintext email using mailgen
  3. var emailText = mailGenerator.generatePlaintext(email);
  4. ```

Supported Themes


The following open-source themes are bundled with this package:

default by Postmark Transactional Email Templates


neopolitan by Send With Us


salted by Jason Rodriguez


cerberus by Ted Goas


We thank the contributing authors for creating these themes.

Custom Themes


If you want to supply your own custom theme or add a new built-in theme, check out THEME.md for instructions.

RTL Support


To change the default text direction (left-to-right), simply override it as follows:

  1. ``` js
  2. var mailGenerator = new Mailgen({
  3.     theme: 'salted',
  4.     // Custom text direction
  5.     textDirection: 'rtl',
  6. });
  7. ```

Custom Logo Height


To change the default product logo height, set it as follows:

  1. ``` js
  2. var mailGenerator = new Mailgen({
  3.     product: {
  4.         // Custom product logo URL
  5.         logo: 'https://mailgen.js/img/logo.png',
  6.         // Custom logo height
  7.         logoHeight: '30px'
  8.     }
  9. });
  10. ```

Language Customizations


To customize the e-mail greeting (Hi) or signature (Yours truly), supply custom strings within the e-mail body:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         greeting: 'Dear',
  5.         signature: 'Sincerely'
  6.     }
  7. };
  8. ```

To not include the signature or greeting at all, set the signature or greeting fields to false:

  1. ``` js
  2. var email = {
  3.     body: {
  4.       signature: false,
  5.       greeting: false // This will override and disable name & title options
  6.     }
  7. };
  8. ```

To use a custom title string rather than a greeting/name introduction, provide it instead of name:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         // Title will override `name`
  5.         title: 'Welcome to Mailgen!'
  6.     }
  7. };
  8. ```

To customize the copyright, override it when initializing Mailgen within your product as follows:

  1. ``` js
  2. // Configure mailgen
  3. var mailGenerator = new Mailgen({
  4.     theme: 'salted',
  5.     product: {
  6.         name: 'Mailgen',
  7.         link: 'https://mailgen.js/',
  8.         // Custom copyright notice
  9.         copyright: 'Copyright © 2016 Mailgen. All rights reserved.',
  10.     }
  11. });
  12. ```

Multiline Support


To inject multiple lines of text for the intro or outro, simply supply an array of strings:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         intro: ['Welcome to Mailgen!', 'We\'re very excited to have you on board.'],
  5.         outro: ['Need help, or have questions?', 'Just reply to this email, we\'d love to help.'],
  6.     }
  7. };
  8. ```

Elements


Mailgen supports injecting custom elements such as dictionaries, tables and action buttons into e-mails.

Action


To inject an action button in to the e-mail, supply the action object as follows:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         action: {
  5.             instructions: 'To get started with Mailgen, please click here:',
  6.             button: {
  7.                 color: '#48cfad', // Optional action button color
  8.                 text: 'Confirm your account',
  9.                 link: 'https://mailgen.js/confirm?s=d9729feb74992cc3482b350163a1a010'
  10.             }
  11.         }
  12.     }
  13. };
  14. ```

To inject multiple action buttons in to the e-mail, supply the action object as follows:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         action: [
  5.             {
  6.                 instructions: 'To get started with Mailgen, please click here:',
  7.                 button: {
  8.                     color: '#22BC66',
  9.                     text: 'Confirm your account',
  10.                     link: 'https://mailgen.js/confirm?s=d9729feb74992cc3482b350163a1a010'
  11.                 }
  12.             },
  13.             {
  14.                 instructions: 'To read our frequently asked questions, please click here:',
  15.                 button: {
  16.                     text: 'Read our FAQ',
  17.                     link: 'https://mailgen.js/faq'
  18.                 }
  19.             }
  20.         ]
  21.     }
  22. };
  23. ```

You can enable a fallback link and instructions for action buttons in case e-mail clients don't render them properly. This can be achieved by setting button.fallback to true, or  by specifying custom fallback text as follows:
  1. ``` js
  2. var email = {
  3.     body: {
  4.         action: [
  5.             {
  6.                 instructions: 'To get started with Mailgen, please click here:',
  7.                 button: {
  8.                     color: '#22BC66',
  9.                     text: 'Confirm your account',
  10.                     link: 'https://mailgen.js/confirm?s=d9729feb74992cc3482b350163a1a010',
  11.                     fallback: true
  12.                 }
  13.             },
  14.             {
  15.                 instructions: 'To read our frequently asked questions, please click here:',
  16.                 button: {
  17.                     text: 'Read our FAQ',
  18.                     link: 'https://mailgen.js/faq',
  19.                     fallback: {
  20.                         text: 'This is my custom text for fallback'
  21.                     }
  22.                 }
  23.             }
  24.         ]
  25.     }
  26. };
  27. ```

Table


To inject a table into the e-mail, supply the table object as follows:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         table: {
  5.             data: [
  6.                 {
  7.                     item: 'Node.js',
  8.                     description: 'Event-driven I/O server-side JavaScript environment based on V8.',
  9.                     price: '$10.99'
  10.                 },
  11.                 {
  12.                     item: 'Mailgen',
  13.                     description: 'Programmatically create beautiful e-mails using plain old JavaScript.',
  14.                     price: '$1.99'
  15.                 }
  16.             ],
  17.             columns: {
  18.                 // Optionally, customize the column widths
  19.                 customWidth: {
  20.                     item: '20%',
  21.                     price: '15%'
  22.                 },
  23.                 // Optionally, change column text alignment
  24.                 customAlignment: {
  25.                     price: 'right'
  26.                 }
  27.             }
  28.         }
  29.     }
  30. };
  31. ```

To inject multiple tables into the e-mail, supply the table property with an array of objects as follows:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         table: [
  5.             {
  6.                 // Optionally, add a title to each table.
  7.                 title: 'Order 1',
  8.                 data: [
  9.                     {
  10.                         item: 'Item 1',
  11.                         description: 'Item 1 description',
  12.                         price: '$1.99'
  13.                     },
  14.                     {
  15.                         item: 'Item 2',
  16.                         description: 'Item 2 description',
  17.                         price: '$2.99'
  18.                     }
  19.                 ],
  20.                 columns: {
  21.                     // Optionally, customize the column widths
  22.                     customWidth: {
  23.                         item: '20%',
  24.                         price: '15%'
  25.                     },
  26.                     // Optionally, change column text alignment
  27.                     customAlignment: {
  28.                         price: 'right'
  29.                     }
  30.                 }
  31.             },
  32.             {
  33.                 // Optionally, add a title to each table.
  34.                 title: 'Order 2',
  35.                 data: [
  36.                     {
  37.                         item: 'Item 1',
  38.                         description: 'Item 1 description',
  39.                         price: '$2.99'
  40.                     },
  41.                     {
  42.                         item: 'Item 2',
  43.                         description: 'Item 2 description',
  44.                         price: '$1.99'
  45.                     }
  46.                 ],
  47.                 columns: {
  48.                     // Optionally, customize the column widths
  49.                     customWidth: {
  50.                         item: '20%',
  51.                         price: '15%'
  52.                     },
  53.                     // Optionally, change column text alignment
  54.                     customAlignment: {
  55.                         price: 'right'
  56.                     }
  57.                 }
  58.             }
  59.         ]
  60.     }
  61. };
  62. ```

Note: Tables are currently not supported in plaintext versions of e-mails.


Dictionary


To inject key-value pairs of data into the e-mail, supply the dictionary object as follows:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         dictionary: {
  5.             date: 'June 11th, 2016',
  6.             address: '123 Park Avenue, Miami, Florida'
  7.         }
  8.     }
  9. };
  10. ```

Go-To Actions


You can make use of Gmail's Go-To Actions within your e-mails by suppling thegoToAction object as follows:

  1. ``` js
  2. var email = {
  3.     body: {
  4.         // Optionally configure a Go-To Action button
  5.         goToAction: {
  6.             text: 'Go to Dashboard',
  7.             link: 'https://mailgen.com/confirm?s=d9729feb74992cc3482b350163a1a010',
  8.             description: 'Check the status of your order in your dashboard'
  9.         }
  10.     }
  11. };
  12. ```

Note that you need to get your sender address whitelisted before your Go-To Actions will show up in Gmail.


Troubleshooting


1. After sending multiple e-mails to the same Gmail / Inbox address, they become grouped and truncated since they contain similar text, breaking the responsive e-mail layout.

Simply sending the X-Entity-Ref-ID header with your e-mails will prevent grouping / truncation.


Contributing


Thanks so much for wanting to help! We really appreciate it.

Have an idea for a new feature?
Want to add a new built-in theme?

Excellent! You've come to the right place.

1. If you find a bug or wish to suggest a new feature, please create an issue first
2. Make sure your code & comment conventions are in-line with the project's style
3. Make your commits and PRs as tiny as possible - one feature or bugfix at a time
4. Write detailed commit messages, in-line with the project's commit naming conventions

Check out THEME.md if you want to add a new built-in theme to Mailgen.


License


Apache 2.0