Getting started overview

EmailJS is a service designed to enable direct email sending from client-side applications, eliminating the need for a dedicated server. This getting started guide outlines the process of establishing an EmailJS account, obtaining necessary credentials, and performing an initial email transmission. The typical workflow involves signing up for an account, configuring an email service and template within the EmailJS dashboard, and then integrating the provided JavaScript SDK into a web application to trigger email sends.

The primary advantage of EmailJS is its simplification of transactional email for front-end developers, particularly for static sites or applications where server-side logic is intentionally minimized. It handles the secure relay of emails through pre-configured email services, abstracting away server-side API keys and SMTP configurations from the client.

Quick Reference: EmailJS Getting Started

Step What to do Where
1. Sign Up Create your EmailJS account. EmailJS registration page
2. Add Email Service Connect an existing email provider (e.g., Gmail, Outlook, SMTP). EmailJS Dashboard > Email Services
3. Create Email Template Define the structure and content of your email. EmailJS Dashboard > Email Templates
4. Get API Keys Locate your Service ID, Template ID, and Public Key. EmailJS Dashboard > Email Services / Email Templates / Account
5. Install SDK Include the EmailJS JavaScript SDK in your project. Your web application's HTML or JavaScript file
6. Send Email Call the emailjs.send method with your details. Your web application's JavaScript code

Create an account and get keys

To begin using EmailJS, establishing an account is the first prerequisite. EmailJS offers a free tier that permits sending up to 200 emails per month, suitable for initial development and small-scale applications. Paid plans commence at $9 per month for 2,000 emails.

  1. Account Registration: Navigate to the EmailJS sign-up page and complete the registration process. This typically involves providing an email address and creating a password.
  2. Add an Email Service: After logging in, proceed to the 'Email Services' section of your EmailJS dashboard. Click 'Add New Service' and select your preferred email provider (e.g., Gmail, Outlook, or a generic SMTP service). You will need to provide authentication details for this service, such as your email address and an app-specific password or OAuth consent, depending on the provider. For example, if using Gmail, you might need to generate an app password through your Google Account settings if 2-Factor Authentication is enabled. This step connects EmailJS to your sending infrastructure. Note the Service ID generated by EmailJS for this service; it will be required later.
  3. Create an Email Template: Go to the 'Email Templates' section. Click 'Create New Template'. Define the subject, body, and recipient fields using template variables (e.g., {{from_name}}, {{message}}). These templates allow dynamic content to be inserted when an email is sent. Save the template and note its Template ID.
  4. Retrieve Public Key: Your Public Key (also known as User ID) is available in the 'Account' section of your EmailJS dashboard. This key identifies your EmailJS account and is used to initialize the EmailJS SDK in your client-side application.

You will now have three critical pieces of information for sending emails:

  • Service ID: Identifies the email service (e.g., Gmail) configured in EmailJS.
  • Template ID: Identifies the specific email template to be used.
  • Public Key: Identifies your EmailJS account for client-side operations.

Your first request

With your EmailJS account configured and credentials obtained, the next step involves integrating the EmailJS SDK into your web application and making your first email sending request. This example uses plain JavaScript, demonstrating the core functionality.

1. Include the EmailJS SDK

Add the EmailJS JavaScript SDK to your HTML file. It's recommended to place this script tag just before the closing </body> tag for optimal page loading performance.

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>

2. Initialize EmailJS

Before sending any emails, initialize the SDK with your EmailJS Public Key. This should be done once when your application loads. Replace 'YOUR_PUBLIC_KEY' with the Public Key obtained from your EmailJS account settings.

(function() {
   emailjs.init('YOUR_PUBLIC_KEY');
})();

3. Send an Email

To send an email, use the emailjs.send() method. This method requires three arguments: your Service ID, your Template ID, and an object containing the template parameters. The template parameters are key-value pairs that correspond to the variables defined in your EmailJS template (e.g., {{from_name}}, {{message}}, {{reply_to}}).

// Replace with your actual IDs
const serviceID = 'YOUR_SERVICE_ID';
const templateID = 'YOUR_TEMPLATE_ID';

// These parameters correspond to variables in your EmailJS template
const templateParams = {
    from_name: 'John Doe',
    to_name: 'Recipient Name',
    message: 'Hello, this is a test email sent from EmailJS!',
    reply_to: '[email protected]'
};

emailjs.send(serviceID, templateID, templateParams)
    .then(function(response) {
       console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
       console.log('FAILED...', error);
    });

When this code executes in a web browser, EmailJS will securely process the request using your configured service and template, sending an email to the specified recipient with the dynamic content.

Common next steps

After successfully sending your first email with EmailJS, consider these common next steps to further integrate and secure your implementation:

  • Integrate with HTML Forms: Most EmailJS use cases involve sending form submissions. You can integrate the emailjs.send() call into a form's submit event handler. This typically involves preventing the default form submission, collecting form data, and then passing it as templateParams to the EmailJS send function. Refer to the EmailJS form integration examples for detailed guidance.
  • Environment Variables: To avoid hardcoding sensitive IDs (Service ID, Template ID, Public Key) directly in your client-side code, especially in production, consider using build-time environment variables. Tools like Webpack, Vite, or a simple server-side templating engine can inject these values during deployment. While EmailJS keys are generally designed for client-side exposure, this practice enhances maintainability and security in larger projects.
  • Error Handling and Feedback: Implement robust error handling for the emailjs.send() promise. Provide user feedback (e.g., success messages, error alerts) based on the promise resolution. This improves the user experience and helps diagnose issues.
  • Rate Limiting and Abuse Prevention: EmailJS includes built-in rate limiting based on your plan. For public-facing forms, consider adding client-side validation and server-side verification (if you have one) or reCAPTCHA integration to mitigate spam and abuse. While EmailJS provides some spam protection, additional measures can enhance security.
  • Custom SMTP Integration: If your organization uses a specific email sending infrastructure or requires higher sending limits, you can configure EmailJS to use a custom SMTP service rather than a common provider like Gmail. This offers greater control over sending behavior and potentially better deliverability.

Troubleshooting the first call

When encountering issues with your initial EmailJS integration, consider the following common troubleshooting steps:

  • Check Console Errors: Open your browser's developer console (F12) and look for any JavaScript errors. Common issues include incorrect function calls, undefined variables, or network errors.
  • Verify IDs: Double-check that your Public Key, Service ID, and Template ID are correctly copied and pasted into your JavaScript code. A single typo will prevent the email from sending. These values are case-sensitive.
  • Service Configuration: Ensure your email service in the EmailJS dashboard is correctly configured and authenticated. If using Gmail, confirm that "less secure app access" is enabled (though app passwords are now preferred for 2FA-enabled accounts) or an app password is correctly set up. Test the service directly from the EmailJS dashboard if possible.
  • Template Variables: Verify that the keys in your templateParams object in JavaScript exactly match the variable names (e.g., from_name) defined in your EmailJS email template. Mismatched names will result in empty fields in the sent email.
  • Network Issues: Ensure there are no network blockers (e.g., ad blockers, corporate firewalls) preventing the EmailJS SDK from loading or making API requests. Check the 'Network' tab in your browser's developer tools for failed requests to api.emailjs.com.
  • Rate Limits: If you are on the free tier, you are limited to 200 emails per month. Exceeding this limit will cause send failures. Check your EmailJS dashboard for usage statistics.
  • Re-initialize SDK: Ensure emailjs.init('YOUR_PUBLIC_KEY'); is called only once and before any emailjs.send() calls. Calling it multiple times or after a send attempt can lead to unexpected behavior.