SDKs overview
EmailJS primarily offers a client-side JavaScript SDK to facilitate sending emails directly from web browsers without the need for a dedicated backend server. This approach distinguishes EmailJS from server-side email APIs, which typically require an application server to handle authentication and communication with email providers. The EmailJS SDK manages the secure interaction with the EmailJS API, allowing developers to define email templates and service integrations within the EmailJS dashboard and then trigger email sending actions from client-side JavaScript code.
The SDK supports various JavaScript environments, including vanilla JavaScript, React, Angular, and Vue.js applications. Its design focuses on simplifying the process of sending transactional emails, such as contact form submissions, notifications, or confirmations, directly from static websites or single-page applications. This reduces the operational overhead associated with server management and API key security on the client-side, as sensitive credentials are not directly exposed in the browser environment but managed through the EmailJS service configuration.
Developers can integrate the SDK by including it via a CDN or installing it as an npm package, depending on their project setup. The core functionality revolves around initializing the EmailJS service with a user ID and then invoking a send method with template parameters and the target service ID. This abstraction allows developers to focus on front-end logic while EmailJS handles the routing and delivery of emails through configured third-party email services like Gmail, Outlook, or custom SMTP servers EmailJS SDK installation guide.
Official SDKs by language
EmailJS maintains an official JavaScript SDK designed for direct integration into client-side web applications. This SDK provides the necessary functions to interact with the EmailJS service, enabling email sending from browsers without server-side code. The primary official package has evolved, with @emailjs/browser being the recommended, actively maintained version for modern web development.
| Language | Package Name | Installation Command (npm) | Maturity |
|---|---|---|---|
| JavaScript | @emailjs/browser |
npm install @emailjs/browser |
Stable, Recommended |
| JavaScript | emailjs-com |
npm install emailjs-com |
Deprecated (use @emailjs/browser) |
The @emailjs/browser package is specifically optimized for browser environments, providing a streamlined API for sending emails. It handles various aspects such as service initialization, template rendering, and secure communication with the EmailJS API endpoints. The deprecation of emailjs-com signifies a move towards a more focused and performant browser-specific library EmailJS installation documentation.
Installation
The installation of the EmailJS SDK depends on the project's setup. For modern JavaScript projects using package managers, npm is the standard method. For simpler projects or direct HTML integrations, a CDN link can be used.
npm Installation
For projects managed with npm or yarn, the recommended package is @emailjs/browser. This package is compatible with frameworks like React, Angular, and Vue.js, as well as vanilla JavaScript projects that use a module bundler such as Webpack or Rollup.
npm install @emailjs/browser
or using yarn:
yarn add @emailjs/browser
CDN Integration
For projects that do not use a package manager, or for quick prototyping, the EmailJS SDK can be included directly in an HTML file via a Content Delivery Network (CDN). This method makes the emailjs object globally available in the browser's JavaScript environment.
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script type="text/javascript">
(function() {
emailjs.init('YOUR_PUBLIC_KEY');
})();
</script>
Note: Replace 'YOUR_PUBLIC_KEY' with your actual EmailJS public key, which can be found in your EmailJS dashboard EmailJS quickstart guide. This key is used to identify your account and is safe to expose in client-side code.
Quickstart example
This quickstart example demonstrates how to send an email using the @emailjs/browser SDK in a simple client-side JavaScript application. The example assumes you have an HTML form and have configured an EmailJS service and template in your EmailJS dashboard.
HTML Structure (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EmailJS Quickstart</title>
</head>
<body>
<form id="contact-form">
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name" required><br><br>
<label for="user_email">Email</label>
<input type="email" name="user_email" id="user_email" required><br><br>
<label for="message">Message</label>
<textarea name="message" id="message" required></textarea><br><br>
<input type="submit" value="Send Email">
</form>
<p id="status-message"></p>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
JavaScript Code (app.js)
window.onload = function() {
// Initialize EmailJS with your public key
// Get your public key from EmailJS dashboard > Email Services > API Keys
emailjs.init('YOUR_PUBLIC_KEY');
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission
// Replace with your Service ID and Template ID from EmailJS dashboard
const serviceID = 'YOUR_SERVICE_ID';
const templateID = 'YOUR_TEMPLATE_ID';
// Send the email
emailjs.sendForm(serviceID, templateID, this)
.then(() => {
document.getElementById('status-message').textContent = 'Email sent successfully!';
document.getElementById('status-message').style.color = 'green';
}, (error) => {
document.getElementById('status-message').textContent = 'Failed to send email. ' + JSON.stringify(error);
document.getElementById('status-message').style.color = 'red';
console.error('EmailJS Error:', error);
});
});
};
Before running this example:
- Replace
'YOUR_PUBLIC_KEY'with your actual EmailJS Public Key EmailJS SDK setup guide. - Replace
'YOUR_SERVICE_ID'with the ID of your configured email service (e.g., Gmail, Outlook) in your EmailJS dashboard. - Replace
'YOUR_TEMPLATE_ID'with the ID of your email template defined in your EmailJS dashboard. The template should expect variables likeuser_name,user_email, andmessageto match the form input names.
This setup allows the form submission to directly trigger an email send via the EmailJS service, handling the email content and recipient based on your predefined template and service configurations.
Community libraries
While EmailJS primarily provides an official JavaScript SDK for client-side integration, the nature of its HTTP API allows for integration through standard HTTP clients in any language. Consequently, community-contributed libraries are less common compared to services with complex, multi-language SDK ecosystems. This is partly because the official JavaScript SDK covers the main use case of client-side email sending, and for server-side operations, developers typically opt for more general-purpose email APIs or direct HTTP requests to the EmailJS API endpoint.
However, developers can create wrappers or utility functions in various languages to interact with the EmailJS REST API if they need to send emails from a server-side context or a different client environment. Such implementations would involve constructing HTTP POST requests to the EmailJS API endpoint (https://api.emailjs.com/api/v1.0/email/send) with the appropriate JSON payload containing the service ID, template ID, user ID, and template parameters EmailJS REST API documentation. Authentication for these requests typically involves including the user ID and API keys in the request body, which should be handled securely on the server-side to prevent exposure.
For example, a Python application could send an email via EmailJS using the requests library:
import requests
import json
url = 'https://api.emailjs.com/api/v1.0/email/send'
headers = {'Content-Type': 'application/json'}
data = {
'service_id': 'YOUR_SERVICE_ID',
'template_id': 'YOUR_TEMPLATE_ID',
'user_id': 'YOUR_PUBLIC_KEY', # This is typically your public key for client-side, or a dedicated private key for server-side
'template_params': {
'from_name': 'Server App',
'to_name': 'Recipient',
'message': 'Hello from server-side Python!'
}
}
response = requests.post(url, headers=headers, data=json.dumps(data))
if response.status_code == 200:
print('Email sent successfully!')
else:
print(f'Failed to send email: {response.status_code} - {response.text}')
This illustrates how developers can integrate EmailJS into non-JavaScript environments by directly interacting with its REST API, which aligns with common API integration patterns across various programming languages MDN HTTP Status Codes reference.