MailComposer/EMAILJS_SETUP.md

Quick Email Setup with EmailJS

🚀 Get Real Email Sending in 5 Minutes!

EmailJS is the fastest way to get your mail composer sending real emails without server setup.

Step 1: Create EmailJS Account

1. Go to https://www.emailjs.com/
2. Sign up for a free account
3. Verify your email

Step 2: Create Email Service

1. In EmailJS dashboard, go to Email Services
2. Click Add New Service
3. Choose your email provider:
   • Gmail (easiest for personal use)
   • Outlook
   • Yahoo
   • Custom SMTP

For Gmail:

1. Select "Gmail"
2. Click "Connect Account"
3. Sign in with your Gmail account
4. Allow EmailJS access
5. Copy the Service ID (e.g., service_abc123)

Step 3: Create Email Template

1. Go to Email Templates
2. Click Create New Template
3. Use this template content:

Subject:

{{subject}}

Content:

<p><strong>From:</strong> {{from_name}}</p>
<p><strong>To:</strong> {{to_email}}</p>
<p><strong>CC:</strong> {{cc_email}}</p>
<p><strong>Priority:</strong> {{priority}}</p>

<hr>

<div>
{{{message}}}
</div>

<hr>
<p><em>Sent via Mail Composer App</em></p>

4. Save the template and copy the Template ID (e.g., template_xyz789)

Step 4: Get Public Key

1. Go to Account → General
2. Copy your Public Key (e.g., user_abcd1234)

Step 5: Configure Your App

1. Open emailjs-config.js
2. Replace the placeholder values:

const EMAILJS_CONFIG = {
  SERVICE_ID: 'service_abc123',        // Your Service ID
  TEMPLATE_ID: 'template_xyz789',      // Your Template ID  
  PUBLIC_KEY: 'user_abcd1234'          // Your Public Key
};

Step 6: Test Email Sending

1. Start your app: npm run dev
2. Open http://localhost:5173
3. Compose and send a test email
4. Check your recipient's inbox!

✅ That's It!

Your mail composer can now send real emails!

Free Plan Limits:

• 200 emails/month
• EmailJS branding in emails
• Basic support

Need More?

• Upgrade to paid plan for higher limits
• Or set up Firebase for unlimited sending

Troubleshooting

Common Issues:

1. "Service not found" error

   • Double-check your Service ID
   • Make sure the service is active in EmailJS dashboard

2. "Template not found" error

   • Verify your Template ID
   • Ensure template is published

3. "Invalid public key" error

   • Check your Public Key in Account settings
   • Make sure it's the correct format

4. Emails not delivered

   • Check spam/junk folder
   • Verify recipient email addresses
   • Check EmailJS dashboard for send logs

Test Mode

If you haven't configured EmailJS yet, the app runs in demo mode with simulated sending.

Next Steps

Once EmailJS is working:

• Customize the email template with your branding
• Add more email services as backups
• Set up Firebase for advanced features (unlimited sending, analytics)
• Add user authentication for multi-user support

Happy emailing! 📧