How to Send Emails Easily using SmtpJS.com

How to Send Emails Easily using SmtpJS.com

Building an app with a feature to send emails can be tedious work if it involves server-side code, as seen in both my Nodemailer with React and Nodemailer with vanilla JS tutorial articles.

In this article, let's take a look at a front-end only way to design and send emails using SmtpJS.com.

About SmtpJS.com

It is a free-to-use, simple script with no usage restrictions that can be embedded into your webpage for you to be able to send emails via JavaScript, given the provided credentials.

Step 1: Getting Started

First, include the script in the your webpage like so:

Step 2: Create Form

Next, we can create a simple form to get the recipient's email. Let's say your website wants to send an emoji email to the provided email by the user.

For this example, I have created a very simple form.

Here's the code I use for this example. I use TailwindCSS for the styling, you may style any way you want.

    
Please Input Your Email to Receive an Emoji

                class="mt-4 border border-gray-300 w-1/3 px-5 py-2" />
    Get Emoji

Step 3: Send Email

Now, we can simply send an email using the following code:

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

Let me explain the what each attribute in the send method is.
#### 1. Host
The host you will provide depends on your (the sender) email service provider. Here are some common values for the most common email services.

| Email Service | Host |
|----------------|-----------------------|
| Gmail | smtp.gmail.com |
| Outlook | smtp-mail.outlook.com |
| Office365 | smtp.office365.com |
| Hotmail | smtp.live.com |

For more host values, please readhttps://www.arclab.com/en/kb/email/list-of-smtp-and-imap-servers-mailserver-list.html

#### 2. Username + Password
This is pretty intuitive. These attributes refer to your email credentials. You can use environment variables to securely hide these from view or encrypt them as a secure token.

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

The instructions for encrypting can be found at the official documentation here.

#### 3. To + From + Subject
The 'To' will be the recipient's email address or an array of email addresses that we retrieve from our simple website's form in Step 2.

The 'From' will be your email address. The recipient will be able to see this address when the email arrives in their inbox.

'Subject' is simply the email's subject that the recipient will see.

#### 4. Body
This is the content of the email. It can be a string or HTML or any accepted format for emails. You can also add attachments to the body.

So here's the final script to send the email.

let recipientForm = document.getElementById("form");
    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData(recipientForm);
        const recipient = Object.fromEntries(formData.entries()).email;

        //Send Email
        Email.send({
            Host: "smtp.gmail.com",
            Username: "username", //your email address
            Password: "password", //your email password
            To: recipient,
            From: "example@gmail.com",
            Subject: "Here's your Emoji!",
            Body: "❤️"
        }).then(
            message => alert(message)
        );
    }
    recipientForm.addEventListener("submit", handleSubmit);

Note: Gmail users need to allow third party access to let SmtpJS.com send emails. So turn on the 'Less Secure Apps' settings by following instructions here.

Result

If you test it, you should get an email sent to your inbox!

Conclusion

And there you have it! A very simple way to send emails in a webpage without a server. It is very convenient if you need a quick email-sending feature in your app, or for testing purposes.

Please take a look at the official documentation for more details. Thanks for reading. I hope you have found it helpful. If it is, do give a like and share. Cheers!

----------

References

- https://smtpjs.com/