DEV Community

Cover image for How to Send Email with JavaScript: Complete Guide with SendLayer API
David Ozokoye
David Ozokoye

Posted on • Originally published at sendlayer.com

How to Send Email with JavaScript: Complete Guide with SendLayer API

#javascript #email #webdev #sendlayer

I've built several websites that rely heavily on JavaScript. One feature I often get asked about is implementing email-sending functionality. If you're looking to learn how to send emails using JavaScript, you've found the right guide.

Almost all modern websites use JavaScript to handle browser interactions, so using JavaScript for email functionality is a natural choice. In this post, I'll cover how to send emails with JavaScript through backend servers and client-side methods.

Table of Contents

How to Send Email with JavaScript

As I mentioned earlier, you can send emails in JavaScript through the client side as well as a backend server. I'll cover both methods in this tutorial, with a focus on the recommended API approach.

Prerequisites

Below are some requirements you'll need to meet to follow along with this guide:

  • Node.js installed on your machine. Download the latest version here
  • Code editor (I recommend Visual Studio Code)
  • Basic knowledge of HTML and JavaScript
  • A SendLayer account. You can get started with the trial account that lets you send up to 200 emails for free

Start your free trial at SendLayer

After creating your SendLayer account, make sure to authorize your domain. This step is essential to improve your site's email deliverability.

Send an Email via SendLayer API (Recommended)

Sending emails through an API is faster and more secure than using SMTP. Transactional email services like SendLayer provide APIs for sending emails programmatically with advanced features built-in.

I'll use SendLayer's SDK for this guide. The SDK includes features like email validation, error handling, and file attachment encoding out of the box.

Getting Your API Key

To use the SendLayer SDK, you'll need an active API key. Log in to your SendLayer account and navigate to Settings » API Keys.

SendLayer API Keys

Copy your API key – we'll use it in the next steps.

Installing the SendLayer SDK

First, install the sendlayer library in your project:

npm install sendlayer
Enter fullscreen mode Exit fullscreen mode

Sending Your First Email

Create a new JavaScript file (e.g., emailService.js) and add the following code:

import { SendLayer } from 'sendlayer';

const apiKey = 'your-sendlayer-api-key'

// Initialize the SendLayer package with your API key
const sendlayer = new SendLayer(apiKey)

const sendEmail = async () => { 

   // Email data
    const params = { 
             from: 'paulie@example.com',
             to: 'recipient@example.com',
             subject: 'Test Email via SendLayer API', 
             text: 'This is a test email sent via the SendLayer API.' 
         }; 

   // email sending function with error handling
    try { 
       const response = await sendlayer.Emails.send(params); 
       console.log('Email sent successfully:', response); 
      } 
    catch (error) { 
       console.error('Error sending email:', error.message); 
      } 
}; 

sendEmail();
Enter fullscreen mode Exit fullscreen mode

Code Breakdown

In the code above, I'm creating the sendEmail() asynchronous function. The params variable holds the email data. SendLayer SDK requires 4 parameters:

  • from: The sender email address
  • to: Recipient email address or list of recipients
  • subject: The email subject line
  • text or html: The email content (plain text or HTML)

Tip: The From email address needs to be at the domain you've authorized. For instance, if you authorized example.com in your SendLayer account, the sender email needs to include @example.com.

After specifying the email parameters, we call the sendlayer.Emails.send() method to send the email. The entire logic is wrapped in a try...catch block to handle any errors.

Running Your Code

After updating the script with your details, run the code:

node emailService.js
Enter fullscreen mode Exit fullscreen mode

If successful, you'll see a confirmation message:

Email sent successfully: { MessageID: '62e09048-039f-4fce-a744-b096981e4990' }
Enter fullscreen mode Exit fullscreen mode

Email sent via SendLayer API

Sending HTML Emails

To send HTML-formatted emails, simply add the html parameter instead of text:

const params = {
  from: 'paulie@example.com',
  to: 'recipient@example.com',
  subject: 'Test HTML Email',
  html: '<h1>Hello!</h1><p>This is an <b>HTML email</b> sent via the SendLayer API.</p>'
};
Enter fullscreen mode Exit fullscreen mode

Sending to Multiple Recipients

To send emails to multiple recipients, update the to field with an array of email addresses:

const params = {
  from: { 
    name: "Sender Name", 
    email: "sender@example.com" 
  },
  to: [
    { name: "Recipient 1", email: "recipient1@example.com" },
    { name: "Recipient 2", email: "recipient2@example.com" },
  ],
  subject: "Test Email to Multiple Recipients",
  html: "<p>This email is sent to multiple recipients.</p>",
};
Enter fullscreen mode Exit fullscreen mode

SendLayer's SDK also supports CC and BCC recipients:

const params = {
  from: { name: "Sender Name", email: "sender@example.com" },
  to: [
    { name: "Recipient 1", email: "recipient1@example.com" },
  ],
  subject: "Test Email",
  html: "<p>This email includes CC and BCC recipients.</p>",
  cc: ["cc@example.com"],
  bcc: [{ name: "BCC", email: "bcc@example.com" }],
};
Enter fullscreen mode Exit fullscreen mode

Note: There's a limit to the number of recipients per email request. See our developer documentation for details.

Sending Emails with Attachments

SendLayer SDK handles attachment encoding automatically. Add the attachments field to your params:

const params = { 
    from: { name: 'Sender Name', email: 'sender@example.com' },
    to: [{ name: 'Recipient Name', email: 'recipient@example.com' }], 
    subject: 'Test Email with Attachment', 
    html: '<p>This email includes an attachment.</p>', 
    attachments: [ 
        { 
         path: 'path/to/file.pdf', 
         type: 'application/pdf',   
        } 
    ] 
};

const response = await sendlayer.Emails.send(params);
Enter fullscreen mode Exit fullscreen mode

You can attach multiple files, including remote URLs:

attachments: [ 
    { 
     path: 'path/to/file.pdf', 
     type: 'application/pdf',   
    },
    { 
     path: 'https://example.com/image.png', 
     type: 'image/png',   
    } 
]
Enter fullscreen mode Exit fullscreen mode

Pro Tip: The type field should be the MIME type of the file. Check Mozilla's MIME types guide if you're unsure.

To learn more about using SendLayer's SDK, check its developer documentation.

Alternative: Send Email Through Backend Server with Nodemailer

If you prefer using SMTP over API, you can use the popular Nodemailer library. However, I recommend using the API method above for better performance and security.

Installing Nodemailer:

npm install nodemailer
Enter fullscreen mode Exit fullscreen mode

Basic Implementation:
Create a new JavaScript file (e.g., sendEmail.js). Then copy and paste the snippet below:

const nodemailer = require('nodemailer'); 

// Create a transporter object
const transporter = nodemailer.createTransport({ 
   host: 'smtp.sendlayer.net', 
   port: 587, 
   secure: false,
   auth: { 
     user: 'your-sendlayer-username', 
     pass: 'your-sendlayer-password' 
   } 
}); 

// Configure email options 
const mailOptions = { 
    from: 'paulie@example.com',
    to: 'recipient@example.com',
    subject: 'Test Email from JavaScript',
    text: 'This is a plain text email sent from JavaScript using Nodemailer.' 
}; 

// Send email 
transporter.sendMail(mailOptions, (error, info) => { 
      if (error) { 
           console.error('Error sending email:', error); 
      } else { 
           console.log('Email sent:', info.response); 
      } 
   }
);
Enter fullscreen mode Exit fullscreen mode

Pro Tip: See SendLayer's tutorial for details on retrieving SMTP credentials.

Run the script:

node sendEmail.js
Enter fullscreen mode Exit fullscreen mode

Plain text email via Nodemailer

Best Practices for Sending Emails with JavaScript

1. Secure Sensitive Credentials

Never hardcode API keys or SMTP credentials. Use environment variables instead. Here's a brief overview of how to add it:

Start by creating a .env file:

SENDLAYER_API_KEY=your-api-key
SMTP_USER=your-smtp-username
SMTP_PASS=your-smtp-password
Enter fullscreen mode Exit fullscreen mode

We'll use an external library to access the environment variables. Go ahead and install the dotenv package:

npm install dotenv
Enter fullscreen mode Exit fullscreen mode

Finally, load environment variables in your script:

require('dotenv').config();

const apiKey = process.env.SENDLAYER_API_KEY;
Enter fullscreen mode Exit fullscreen mode

2. Implement Error Handling

Always include error handling in your email logic:

try {
  const response = await sendlayer.Emails.send(params);
  console.log('Email sent:', response);
} catch (error) {
  console.error('Error sending email:', error.message);
}
Enter fullscreen mode Exit fullscreen mode

Frequently Asked Questions

These are answers to some of the top questions we see on how to send emails using JavaScript.

What are the different ways to send emails using JavaScript?

There are several methods:

  • Client-side: Using mailto: links or services like EmailJS
  • Server-side: Using Node.js with libraries like Nodemailer
  • Third-party APIs: Using services like SendLayer, Mailgun, or AWS SES (recommended)
  • Frontend frameworks: Integration with React or Next.js

What's the most reliable way to send emails in production?

The most reliable approach is using a server-side solution with an API-based email provider like SendLayer. This offers better security, deliverability, and features compared to SMTP.

Can I use SMTP instead of an API?

Yes, you can use SMTP with Nodemailer as shown in the alternative method above. However, API-based solutions offer better performance, security, and features like automatic retry logic and detailed analytics.

Can JavaScript be used in emails?

Yes, JavaScript can be included in emails, but most email clients block or strip it out due to security concerns. It's not recommended to use JavaScript in email content.

Wrapping Up

In this comprehensive tutorial, we've explored multiple ways to send emails using JavaScript.

Have questions or want to share your implementation? Drop a comment below. I'd love to hear how you're handling email in your JavaScript projects!

Top comments (0)