421 lines
12 KiB
Markdown
421 lines
12 KiB
Markdown
# EmailJS Setup Guide for Sweet Dreams Bakery
|
|
|
|
This guide will walk you through setting up EmailJS to enable professional email functionality for order processing, contact forms, and customer communications.
|
|
|
|
## 📧 What is EmailJS?
|
|
|
|
EmailJS allows you to send emails directly from your frontend application without needing a backend server. It's perfect for:
|
|
- Order confirmations
|
|
- Contact form submissions
|
|
- Newsletter subscriptions
|
|
- Business notifications
|
|
|
|
## 🚀 Quick Setup (5 minutes)
|
|
|
|
### **Step 1: Create EmailJS Account**
|
|
|
|
1. Go to [emailjs.com](https://www.emailjs.com)
|
|
2. Click "Sign Up" and create a free account
|
|
3. Verify your email address
|
|
4. Log in to your EmailJS dashboard
|
|
|
|
### **Step 2: Set Up Email Service**
|
|
|
|
1. **Add Email Service:**
|
|
- In your EmailJS dashboard, click "Email Services"
|
|
- Click "Add New Service"
|
|
- Choose your email provider:
|
|
- **Gmail** (recommended for personal/small business)
|
|
- **Outlook/Hotmail**
|
|
- **Yahoo Mail**
|
|
- **Other SMTP services**
|
|
|
|
2. **Configure Gmail Service (Most Common):**
|
|
- Select "Gmail"
|
|
- Click "Connect Account"
|
|
- Sign in with your Gmail account
|
|
- Allow EmailJS permissions
|
|
- Your service will be created with an ID like `service_abc123`
|
|
|
|
3. **Configure Custom SMTP (Business Email):**
|
|
- Select "Other"
|
|
- Enter your SMTP settings:
|
|
```
|
|
SMTP Server: mail.yourdomain.com
|
|
Port: 587 (or 465 for SSL)
|
|
Username: orders@yourbakery.com
|
|
Password: your-email-password
|
|
```
|
|
- Test the connection
|
|
- Save the service
|
|
|
|
### **Step 3: Create Email Templates**
|
|
|
|
You'll need to create these templates in your EmailJS dashboard:
|
|
|
|
#### **Template 1: Customer Order Confirmation**
|
|
|
|
1. Go to "Email Templates" → "Create New Template"
|
|
2. Template Name: `Customer Order Confirmation`
|
|
3. Template ID: `customer_order_confirmation` (you'll need this)
|
|
4. Configure the template (see detailed template code below)
|
|
|
|
#### **Template 2: Business Order Notification**
|
|
|
|
1. Create another template
|
|
2. Template Name: `Business Order Notification`
|
|
3. Template ID: `business_order_notification`
|
|
4. Configure for internal notifications
|
|
|
|
#### **Template 3: Contact Form**
|
|
|
|
1. Create a third template
|
|
2. Template Name: `Contact Form Inquiry`
|
|
3. Template ID: `contact_form_inquiry`
|
|
4. For general inquiries and consultations
|
|
|
|
### **Step 4: Get Your Credentials**
|
|
|
|
1. **Service ID**: Found in Email Services (e.g., `service_abc123`)
|
|
2. **Template IDs**: From your created templates
|
|
3. **User ID (Public Key)**: Account → API Keys → Public Key
|
|
|
|
### **Step 5: Update Website Configuration**
|
|
|
|
Edit `script.js` and update the EmailJS configuration:
|
|
|
|
```javascript
|
|
// Update these values with your actual EmailJS credentials
|
|
const emailJSConfig = {
|
|
serviceID: 'service_abc123', // Your service ID
|
|
templateID: 'customer_order_confirmation', // Your main template ID
|
|
userID: 'user_xyz789' // Your public key
|
|
};
|
|
```
|
|
|
|
## 📝 Email Template Configurations
|
|
|
|
### **Customer Order Confirmation Template**
|
|
|
|
**Template Settings:**
|
|
- **To Email**: `{{to_email}}`
|
|
- **From Name**: Sweet Dreams Bakery
|
|
- **From Email**: orders@sweetdreamsbakery.com (or your business email)
|
|
- **Subject**: Order Confirmation - Thank You {{to_name}}!
|
|
|
|
**Email Template Body** (copy this HTML):
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; }
|
|
.header { background: linear-gradient(135deg, #F4B8C3, #E8A2AE); padding: 30px; text-align: center; }
|
|
.header h1 { color: white; margin: 0; font-size: 28px; }
|
|
.content { padding: 30px; background: #fff; }
|
|
.order-details { background: #FAF8F5; padding: 20px; border-radius: 8px; margin: 20px 0; }
|
|
.footer { background: #4A2C2A; color: white; padding: 20px; text-align: center; }
|
|
.btn { background: #8B4B73; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block; margin: 10px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>🎂 Order Confirmation</h1>
|
|
<p>Thank you for choosing Sweet Dreams Bakery!</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h2>Hello {{to_name}}!</h2>
|
|
|
|
<p>We've received your order and we're excited to create something special for you! Here are your order details:</p>
|
|
|
|
<div class="order-details">
|
|
<h3>📋 Order Summary</h3>
|
|
<p><strong>Order Number:</strong> {{order_number}}</p>
|
|
<p><strong>Event Date:</strong> {{event_date}}</p>
|
|
<p><strong>Delivery Method:</strong> {{delivery_method}}</p>
|
|
|
|
<h4>Items Ordered:</h4>
|
|
<pre>{{order_items}}</pre>
|
|
|
|
<p><strong>Total Amount:</strong> ${{order_total}}</p>
|
|
|
|
{{#special_requests}}
|
|
<p><strong>Special Requests:</strong> {{special_requests}}</p>
|
|
{{/special_requests}}
|
|
</div>
|
|
|
|
<h3>🎯 What's Next?</h3>
|
|
<ul>
|
|
<li><strong>Within 24 hours:</strong> We'll contact you to confirm details</li>
|
|
<li><strong>Design consultation:</strong> Discuss any customizations</li>
|
|
<li><strong>Payment arrangement:</strong> Flexible payment options</li>
|
|
<li><strong>Final confirmation:</strong> Before we start baking!</li>
|
|
</ul>
|
|
|
|
<p>Have questions? Reply to this email or call us at <strong>(555) 123-CAKE</strong></p>
|
|
|
|
<a href="#contact" class="btn">Contact Us</a>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p><strong>Sweet Dreams Bakery</strong><br>
|
|
123 Baker Street, Sweet Valley, CA 90210<br>
|
|
orders@sweetdreamsbakery.com | (555) 123-CAKE</p>
|
|
|
|
<p>Follow us: Facebook | Instagram | Pinterest</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### **Business Order Notification Template**
|
|
|
|
**Template Settings:**
|
|
- **To Email**: orders@sweetdreamsbakery.com (your business email)
|
|
- **From Name**: Website Orders
|
|
- **Subject**: 🚨 NEW ORDER: {{customer_name}} - ${{order_total}}
|
|
|
|
**Email Template Body:**
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; line-height: 1.6; }
|
|
.alert { background: #F4B8C3; padding: 20px; border-radius: 8px; }
|
|
.customer-info { background: #FAF8F5; padding: 15px; border-radius: 5px; margin: 15px 0; }
|
|
.order-details { background: #fff; border: 2px solid #E8A2AE; padding: 15px; border-radius: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="alert">
|
|
<h1>🎂 NEW CAKE ORDER RECEIVED!</h1>
|
|
<p><strong>Order Time:</strong> {{order_time}}</p>
|
|
</div>
|
|
|
|
<div class="customer-info">
|
|
<h2>👤 Customer Information</h2>
|
|
<p><strong>Name:</strong> {{customer_name}}</p>
|
|
<p><strong>Email:</strong> {{customer_email}}</p>
|
|
<p><strong>Phone:</strong> {{customer_phone}}</p>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<h2>🛍️ Complete Order Details</h2>
|
|
<pre>{{order_details}}</pre>
|
|
</div>
|
|
|
|
<p><strong>⚡ Action Required:</strong> Contact customer within 24 hours to confirm order details and arrange payment.</p>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### **Contact Form Template**
|
|
|
|
**Template Settings:**
|
|
- **To Email**: info@sweetdreamsbakery.com
|
|
- **From Name**: {{from_name}}
|
|
- **From Email**: {{from_email}}
|
|
- **Subject**: Website Inquiry: {{inquiry_type}}
|
|
|
|
**Email Template Body:**
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<body style="font-family: Arial, sans-serif; line-height: 1.6;">
|
|
<h2>🍰 New Website Inquiry</h2>
|
|
|
|
<p><strong>From:</strong> {{from_name}} ({{from_email}})</p>
|
|
<p><strong>Phone:</strong> {{phone}}</p>
|
|
<p><strong>Inquiry Type:</strong> {{inquiry_type}}</p>
|
|
|
|
<h3>Message:</h3>
|
|
<div style="background: #FAF8F5; padding: 15px; border-radius: 5px;">
|
|
{{message}}
|
|
</div>
|
|
|
|
<p><em>Sent from Sweet Dreams Bakery website contact form</em></p>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## ⚙️ Advanced Configuration
|
|
|
|
### **Multiple Template Setup**
|
|
|
|
If you want different templates for different order types:
|
|
|
|
```javascript
|
|
// In script.js, you can configure multiple templates
|
|
const emailTemplates = {
|
|
customerConfirmation: 'customer_order_confirmation',
|
|
businessNotification: 'business_order_notification',
|
|
contactInquiry: 'contact_form_inquiry',
|
|
newsletterWelcome: 'newsletter_welcome'
|
|
};
|
|
|
|
// Use different templates based on context
|
|
await emailjs.send(
|
|
emailJSConfig.serviceID,
|
|
emailTemplates.customerConfirmation,
|
|
emailData
|
|
);
|
|
```
|
|
|
|
### **Custom Domain Email**
|
|
|
|
For professional appearance, use your own domain:
|
|
|
|
1. **Set up business email** (e.g., orders@yourbakery.com)
|
|
2. **Configure SMTP** in EmailJS with your business email settings
|
|
3. **Update templates** to use your business email as sender
|
|
|
|
### **Email Deliverability**
|
|
|
|
To ensure emails don't go to spam:
|
|
|
|
1. **SPF Record**: Add EmailJS to your domain's SPF record
|
|
2. **DKIM**: Enable DKIM signing in EmailJS settings
|
|
3. **Reply-To**: Set up proper reply-to addresses
|
|
4. **Test thoroughly**: Send test emails to different providers
|
|
|
|
## 🧪 Testing Your Setup
|
|
|
|
### **Test Mode (No Real Emails)**
|
|
|
|
The website includes demo mode when EmailJS isn't configured:
|
|
|
|
```javascript
|
|
// This runs when EmailJS credentials aren't set up
|
|
console.log('Demo mode: Order would be processed via EmailJS');
|
|
showNotification('Demo mode: Order would be sent via EmailJS', 'info');
|
|
```
|
|
|
|
### **Send Test Emails**
|
|
|
|
1. **Use EmailJS Test Mode:**
|
|
- Go to your EmailJS dashboard
|
|
- Select your template
|
|
- Click "Test Template"
|
|
- Fill in sample data
|
|
- Send test email
|
|
|
|
2. **Test Through Website:**
|
|
- Fill out contact form with your email
|
|
- Place a test order
|
|
- Check both customer and business emails
|
|
|
|
### **Debug Common Issues**
|
|
|
|
```javascript
|
|
// Add this to script.js for debugging
|
|
emailjs.send(serviceID, templateID, emailData)
|
|
.then(function(response) {
|
|
console.log('SUCCESS!', response.status, response.text);
|
|
}, function(error) {
|
|
console.log('FAILED...', error);
|
|
// Common error codes:
|
|
// 400: Bad request (check template variables)
|
|
// 403: Forbidden (check service configuration)
|
|
// 412: Template not found
|
|
});
|
|
```
|
|
|
|
## 🔒 Security Best Practices
|
|
|
|
### **Public Key Security**
|
|
|
|
- EmailJS public keys are safe to include in frontend code
|
|
- They only allow sending emails, not accessing your account
|
|
- Rate limiting is automatically applied
|
|
|
|
### **Template Validation**
|
|
|
|
- Always validate form data before sending
|
|
- Use template variables to prevent email injection
|
|
- Never include sensitive data in email templates
|
|
|
|
### **Spam Prevention**
|
|
|
|
- Implement client-side rate limiting
|
|
- Add honeypot fields to forms
|
|
- Consider adding basic captcha for high-traffic sites
|
|
|
|
## 📊 Monitoring & Analytics
|
|
|
|
### **EmailJS Dashboard**
|
|
|
|
Monitor your email activity:
|
|
- **Sent emails count**
|
|
- **Success/failure rates**
|
|
- **Monthly usage limits**
|
|
- **Template performance**
|
|
|
|
### **Usage Limits**
|
|
|
|
**Free Plan:**
|
|
- 200 emails/month
|
|
- Basic templates
|
|
- Standard support
|
|
|
|
**Paid Plans:**
|
|
- Higher email limits
|
|
- Advanced features
|
|
- Priority support
|
|
|
|
## ❓ Troubleshooting
|
|
|
|
### **Common Issues**
|
|
|
|
**"Service not found" Error:**
|
|
```javascript
|
|
// Check your service ID is correct
|
|
const emailJSConfig = {
|
|
serviceID: 'service_XXXXXXX', // Must match EmailJS dashboard
|
|
// ...
|
|
};
|
|
```
|
|
|
|
**"Template not found" Error:**
|
|
```javascript
|
|
// Verify template ID matches exactly
|
|
templateID: 'customer_order_confirmation', // Case-sensitive!
|
|
```
|
|
|
|
**Emails going to spam:**
|
|
- Check sender email reputation
|
|
- Verify SPF/DKIM setup
|
|
- Use professional from addresses
|
|
- Avoid spam trigger words
|
|
|
|
**Template variables not working:**
|
|
```javascript
|
|
// Ensure variable names match exactly
|
|
const emailData = {
|
|
to_name: customerName, // Must match {{to_name}} in template
|
|
to_email: customerEmail, // Must match {{to_email}} in template
|
|
// ...
|
|
};
|
|
```
|
|
|
|
### **Getting Help**
|
|
|
|
1. **EmailJS Documentation**: [docs.emailjs.com](https://www.emailjs.com/docs/)
|
|
2. **EmailJS Support**: Available through your dashboard
|
|
3. **Community Forums**: Stack Overflow with `emailjs` tag
|
|
|
|
## 🎉 Success!
|
|
|
|
Once configured, your bakery website will:
|
|
- ✅ Send professional order confirmations to customers
|
|
- ✅ Notify you immediately of new orders
|
|
- ✅ Handle contact form inquiries automatically
|
|
- ✅ Support newsletter subscriptions
|
|
- ✅ Work without any backend infrastructure
|
|
|
|
**Your customers will receive beautiful, professional emails that match your bakery's branding!**
|
|
|
|
---
|
|
|
|
*Need help? Check the troubleshooting section above or refer to the main README.md file.* |