> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/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

<span>
  <a href="https://www.emailjs.com/" target="_blank">
    EmailJS
  </a>

  {` `}lets you send emails directly from client-side code. You can create
  dynamic templates and trigger emails with just a few lines of JavaScript.
</span>

## 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.

<Steps>
  <Step title="Create an EmailJS Account">
    Create an EmailJS account and connect your email service.

    <img height="200" src="https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/integrations/images/emailjs-email-services.png?fit=max&auto=format&n=dyhr1UMzzXl3NtrZ&q=85&s=60ecfaedc5b141cec6fd961cd294ad96" data-path="documentation/integrations/images/emailjs-email-services.png" />

    <Steps>
      <Step title="Go to EmailJS and create a free account.">
        Create a free EmailJS account.
      </Step>

      <Step title="Add new email service.">
        Navigate to Email Services and click *Add New Service*.
      </Step>

      <Step title="Choose your email provider.">
        Choose from services like Gmail, Outlook, or a custom SMTP server.
      </Step>
    </Steps>
  </Step>

  <Step title="Create an Email Template">
    <img height="200" src="https://cdn.magicpatterns.com/emailJS-content-2.gif" />

    <Steps>
      <Step title="Go to the Email Templates section and create a new template." />

      <Step title="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.
        </Tip>
      </Step>
    </Steps>
  </Step>

  <Step title="Add your Domain">
    Go to *Account → Security* and add an approved domain for email sending (e.g. yourdomain.com).

    <img height="200" src="https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/integrations/images/emailjs-domain.png?fit=max&auto=format&n=dyhr1UMzzXl3NtrZ&q=85&s=eec16c24091f60217032bf6583c37d15" data-path="documentation/integrations/images/emailjs-domain.png" />
  </Step>

  <Step title="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*.
  </Step>

  <Step title="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.
    ```
  </Step>
</Steps>

## FAQ

<AccordionGroup>
  <Accordion title="Can I use EmailJS for free?">
    EmailJS' Free plan offers 200 monthly emails a month.
  </Accordion>

  <Accordion title="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 <a href="https://react.email/" target="_blank">React Email</a> with templates.
  </Accordion>

  <Accordion title="I have more questions about EmailJS.">
    Please visit the <a href="https://www.emailjs.com/docs" target="_blank">EmailJS documentation</a> for more information.
  </Accordion>
</AccordionGroup>