@emailjs/browser

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.

Name	Type	Default	Description
publicKey	String		The public key is required to invoke the method.
blockHeadless	Boolean	False	Method will return error 451 if the browser is headless.
blockList	BlockList		Block list settings.
limitRate	LimitRate		Limit rate configuration.
storageProvider	StorageProvider		Provider for a custom key-value storage.

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.

Name	Type	Description
list	String[]	The array of strings contains values for blocking.
watchVariable	String	A name of the variable to be watched.

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.

Name	Type	Default	Description
id	String	page path	The limit rate is per page by default. To override the behavior, set the ID. It can be a custom ID for each page, group, or application.
throttle	Number		(ms) After how many milliseconds a next request is allowed.

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: ['[e-mail]', '[e-mail]'],
  },
  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);
    },
  );