mirror of
https://github.com/Gowtham-Darkseid/MailComposer.git
synced 2026-04-15 16:08:27 +02:00
gowtham-darkseid
44ea4d2e64
- Rich email composer with formatting tools (bold, italic, underline, links) - Multi-recipient support (To, CC, BCC fields) - File attachments with drag & drop support - Priority levels and email validation - Draft management with auto-save and cloud sync - Real email sending via EmailJS integration - Responsive design for mobile and desktop - Comprehensive error handling and fallback modes - Complete documentation and setup guides - Firebase integration ready for advanced features Features: ✅ Real email sending (EmailJS) ✅ Rich text editor ✅ File attachments ✅ Draft management ✅ Form validation ✅ Responsive UI ✅ Error handling ✅ Documentation
131 lines
3.0 KiB
Markdown
131 lines
3.0 KiB
Markdown
# 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/](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:**
|
|
```html
|
|
<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:
|
|
|
|
```javascript
|
|
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! 📧
|