Official EmailJS SDK for Browsers

SDK for EmailJS.com customers.
Use your EmailJS account for sending emails.

Disclaimer

This is a browser platform, otherwise use

• Node.js
• React Native
• Flutter
• REST API

Links

Official SDK Docs

Intro

EmailJS helps you send emails directly from code with one command. No server is required – just connect EmailJS to one of the supported email services, create an email template, and use our SDK to trigger an email.

Usage

Install EmailJS SDK using npm:

$ npm install @emailjs/browser

Or manually:

<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({
      publicKey: 'YOUR_PUBLIC_KEY',
    });
  })();
</script>

Examples

Send the email using the customized send method

var templateParams = {
  name: 'James',
  notes: 'Check this out!',
};

emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams).then(
  function (response) {
    console.log('SUCCESS!', response.status, response.text);
  },
  function (err) {
    console.log('FAILED...', err);
  },
);

Send the email from a form using the sendForm method

emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', '#myForm').then(
  function (response) {
    console.log('SUCCESS!', response.status, response.text);
  },
  function (err) {
    console.log('FAILED...', err);
  },
);

Using Angular / VueJS / ReactJS / Svelte / any other modern framework

import emailjs from '@emailjs/browser';

const templateParams = {
  name: 'James',
  notes: 'Check this out!',
};

emailjs
  .send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams, {
    publicKey: 'YOUR_PUBLIC_KEY',
  })
  .then(
    (response) => {
      console.log('SUCCESS!', response.status, response.text);
    },
    (err) => {
      console.log('FAILED...', err);
    },
  );

await/async with EmailJS error handler

import emailjs, { EmailJSResponseStatus } from '@emailjs/browser';

try {
  await emailjs.send(
    'YOUR_SERVICE_ID',
    'YOUR_TEMPLATE_ID',
    {},
    {
      publicKey: 'YOUR_PUBLIC_KEY',
    },
  );
  console.log('SUCCESS!');
} catch (err) {
  if (err instanceof EmailJSResponseStatus) {
    console.log('EMAILJS FAILED...', err);
    return;
  }

  console.log('ERROR', err);
}

Configuration

Options

Options can be declared globally using the init method or locally as the fourth parameter of a function.
The local parameter will have higher priority than the global one.

BlockList

Allows to ignore a method call if the watched variable contains a value from the block list.
The method will return the error 403 if the request is blocked.

LimitRate

Allows to set the limit rate for calling a method.
If the request hits the limit rate, the method will return the error 429.

StorageProvider

Allows to provide a custom key value storage. By default, localStorage is used if available.
The custom provider must match the interface.

interface StorageProvider {
  get: (key: string) => Promise<string | null | undefined>;
  set: (key: string, value: string) => Promise<void>;
  remove: (key: string) => Promise<void>;
}

Declare global settings

import emailjs from '@emailjs/browser';

emailjs.init({
  publicKey: 'YOUR_PUBLIC_KEY',
  blockHeadless: true,
  blockList: {
    list: ['foo@emailjs.com', 'bar@emailjs.com'],
  },
  limitRate: {
    throttle: 10000, // 10s
  },
});

Overwrite settings locally

import emailjs from '@emailjs/browser';

const templateParams = {
  name: 'James',
  notes: 'Check this out!',
};

emailjs
  .send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams, {
    publicKey: 'YOUR_PUBLIC_KEY',
    blockList: {
      watchVariable: 'userEmail',
    },
    limitRate: {
      throttle: 0, // turn off the limit rate for these requests
    },
  })
  .then(
    (response) => {
      console.log('SUCCESS!', response.status, response.text);
    },
    (err) => {
      console.log('FAILED...', err);
    },
  );