olipassey/web-bakery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
DESKTOP-G4D78VI\Oli
2025-09-27 23:46:54 +01:00
commit 7fa743760d
11 changed files with 4856 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
EMAILJS_SETUP.md Normal file
View File

@@ -0,0 +1,421 @@
# 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.*