> ## Documentation Index
> Fetch the complete documentation index at: https://www.magicpatterns.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# EmailJS

> Learn how to integrate EmailJS to send emails directly from your Magic Patterns design

## Introduction to EmailJS

[EmailJS](https://www.emailjs.com/)

 lets you send emails directly from client-side code. You can create
dynamic templates and trigger emails with just a few lines of JavaScript.

## Step by Step Tutorial

This tutorial walks you through setting up EmailJS to send emails directly from your Magic Patterns design with no database required.

**1. Create an EmailJS Account**

Create an EmailJS account and connect your email service.

![](https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/integrations/images/emailjs-email-services.png?fit=max\&auto=format\&n=dyhr1UMzzXl3NtrZ\&q=85\&s=60ecfaedc5b141cec6fd961cd294ad96)

**1. Go to EmailJS and create a free account.**

Create a free EmailJS account.

**2. Add new email service.**

Navigate to Email Services and click *Add New Service*.

**3. Choose your email provider.**

Choose from services like Gmail, Outlook, or a custom SMTP server.

**2. Create an Email Template**

![](https://cdn.magicpatterns.com/emailJS-content-2.gif)

**1. Go to the Email Templates section and create a new template.**

**2. Navigate to Code Editor and edit your content.**

Click Edit Content and then Code Editor. We recommend replacing the body of the message with the following code, which is a placeholder that will be replaced with the content of the email:

```
{{content}}
```

> [!TIP]
>
> Ask Magic Patterns to design an email template to customize the look and feel of your emails.

**3. Add your Domain**

Go to *Account → Security* and add an approved domain for email sending (e.g. yourdomain.com).

![](https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/integrations/images/emailjs-domain.png?fit=max\&auto=format\&n=dyhr1UMzzXl3NtrZ\&q=85\&s=eec16c24091f60217032bf6583c37d15)

**4. Collect Required Credentials**

* **EmailJS Public Key**: can be found under *Account → API Keys*.
* **Service ID**: can be found under *Email Services*.
* **Template ID**: can be found under *Email Templates → Settings*.

**5. Prompt Magic Patterns to integrate EmailJS**

Use the Select tool to click on your call to action button if applicable. Then, enter the following prompt:

```
Implement the "Try Beta" email sign up form using EmailJS to send an email.

EmailJS Public Key: {{emailjs_public_key}}
Service ID: {{service_id}}
Template ID: {{template_id}}

Inside my email template, it just takes a body with the parameter "{{content}}". Please just send me the user inputted email.
```

## FAQ

> [accordion] Can I use EmailJS for free?
>
> EmailJS' Free plan offers 200 monthly emails a month.

> [accordion] Can I customize the design of the emails I send?
>
> You can design your own on Magic Patterns or use a open-source library like [React Email](https://react.email/) with templates.

> [accordion] I have more questions about EmailJS.
>
> Please visit the [EmailJS documentation](https://www.emailjs.com/docs) for more information.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.