web-drone/emailjs-setup-guide.md

# EmailJS Setup Guide for PTSAerial

I've switched your website back to EmailJS, which is much easier and more reliable than AWS SES for frontend forms. Here's how to set it up:

## 1. Create EmailJS Account

1. Go to [EmailJS.com](https://www.emailjs.com/)
2. Sign up for a free account (200 emails/month)
3. Verify your email address

## 2. Add Email Service

1. In your EmailJS dashboard, click "Email Services"
2. Click "Add New Service"
3. Choose "Gmail" (recommended) or your email provider
4. For Gmail:
   - Enter your Gmail email (could be oli@ptslondon.co.uk if it's Gmail)
   - Or create a dedicated Gmail account for website emails
5. Follow the OAuth setup process
6. **Copy your Service ID** (you'll need this)

## 3. Create Email Templates

### Template 1: Quote Request Template
1. Go to "Email Templates" → "Create New Template"
2. **Template ID**: `quote_template`
3. **Subject**: `New Quote Request - PTSAerial - {{service_type}}`
4. **Content**:
```
New Quote Request from PTSAerial Website

Customer Details:
Name: {{customer_name}}
Email: {{customer_email}}
Phone: {{customer_phone}}
Company: {{customer_company}}

Project Details:
Service Type: {{service_type}}
Location: {{project_location}}
Preferred Date: {{preferred_date}}
Budget Range: {{budget_range}}

Project Description:
{{project_description}}

---
Reply to this email to respond directly to the customer.
Website: PTSAerial.co.uk
```

### Template 2: Contact Form Template
1. Create another template
2. **Template ID**: `contact_template`
3. **Subject**: `New Contact Message - PTSAerial - {{message_subject}}`
4. **Content**:
```
New Contact Message from PTSAerial Website

From: {{customer_name}}
Email: {{customer_email}}
Subject: {{message_subject}}

Message:
{{message_content}}

---
Reply to this email to respond directly to the customer.
Website: PTSAerial.co.uk
```

## 4. Get Your Configuration

1. In EmailJS dashboard, go to "Account"
2. Copy your **Public Key** (also called User ID)
3. You'll also need your **Service ID** from step 2

## 5. Update Your Website

In your `script.js` file, replace these values:

```javascript
// Line ~69: Replace YOUR_PUBLIC_KEY
emailjs.init("YOUR_PUBLIC_KEY"); // Replace with your actual public key

// Line ~83 and ~127: Replace YOUR_SERVICE_ID  
sendEmail('quote_template', templateParams)
// Should become:
emailjs.send('YOUR_SERVICE_ID', 'quote_template', templateParams)
```

**Example:**
```javascript
emailjs.init("user_abc123def456"); // Your public key
// and
return emailjs.send('service_gmail_xyz789', templateId, templateParams)
```

## 6. Test Your Setup

1. Save your script.js file with the correct keys
2. Open your website
3. Fill out both forms (quote and contact)
4. Check oli@ptslondon.co.uk for emails
5. Check browser console (F12) for any errors

## 7. EmailJS Dashboard Monitoring

After testing, check your EmailJS dashboard:
- "History" tab shows sent emails
- Monitor your monthly usage
- Check for any failed sends

## Configuration Summary

**What you need to replace in script.js:**

```javascript
// Replace this line:
emailjs.init("YOUR_PUBLIC_KEY");
// With:
emailjs.init("your_actual_public_key");

// And replace this line:
return emailjs.send('YOUR_SERVICE_ID', templateId, templateParams)
// With:
return emailjs.send('your_actual_service_id', templateId, templateParams)
```

## Email Template Variables

The website sends these variables to your templates:

### Quote Form (`quote_template`):
- `{{customer_name}}` - Customer's name
- `{{customer_email}}` - Customer's email  
- `{{customer_phone}}` - Phone number
- `{{customer_company}}` - Company name
- `{{service_type}}` - Selected service
- `{{project_location}}` - Project location
- `{{preferred_date}}` - Preferred date
- `{{budget_range}}` - Budget range
- `{{project_description}}` - Project description

### Contact Form (`contact_template`):
- `{{customer_name}}` - Customer's name
- `{{customer_email}}` - Customer's email
- `{{message_subject}}` - Message subject
- `{{message_content}}` - Message content

## Troubleshooting

### Common Issues:

1. **"EmailJS not loaded"** - Check the script tag in index.html
2. **"Template not found"** - Ensure template IDs match exactly
3. **"Service not found"** - Check your Service ID is correct
4. **Emails not arriving** - Check spam folder first

### Testing in Console:

Open browser console (F12) and run:
```javascript
emailjs.send('your_service_id', 'quote_template', {
    customer_name: 'Test User',
    customer_email: 'test@example.com',
    service_type: 'Aerial Photography'
});
```

## Benefits of EmailJS vs AWS SES

✅ **Easier Setup**: No AWS account or IAM configuration needed  
✅ **Frontend Friendly**: Designed for browser use  
✅ **No CORS Issues**: Works directly from any website  
✅ **Free Tier**: 200 emails/month is usually sufficient  
✅ **Template Management**: Easy visual template editor  
✅ **Reliable Delivery**: Built-in email service integration  

## Free Tier Limits

- **200 emails per month**
- **Basic templates**
- **Email history tracking**

For higher volume, upgrade to paid plans starting at $15/month.

---

**Quick Setup Checklist:**
- [ ] Create EmailJS account
- [ ] Add Gmail service and get Service ID
- [ ] Create quote_template and contact_template
- [ ] Get Public Key from Account settings
- [ ] Update script.js with your keys
- [ ] Test both forms
- [ ] Check oli@ptslondon.co.uk for emails

The setup should take about 15 minutes and is much more reliable than AWS SES for website forms!