initial
This commit is contained in:
199
emailjs-setup-guide.md
Normal file
199
emailjs-setup-guide.md
Normal file
@@ -0,0 +1,199 @@
|
||||
# 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!
|
||||
Reference in New Issue
Block a user