# 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

Hello {{to_name}}!

We've received your order and we're excited to create something special for you! Here are your order details:

📋 Order Summary

Order Number: {{order_number}}

Event Date: {{event_date}}

Delivery Method: {{delivery_method}}

Items Ordered:

{{order_items}}

Total Amount: ${{order_total}}

Special Requests: {{special_requests}}

🎯 What's Next?

Within 24 hours: We'll contact you to confirm details
Design consultation: Discuss any customizations
Payment arrangement: Flexible payment options
Final confirmation: Before we start baking!

Have questions? Reply to this email or call us at (555) 123-CAKE

``` ### **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

🎂 NEW CAKE ORDER RECEIVED!

Order Time: {{order_time}}

👤 Customer Information

Name: {{customer_name}}

Email: {{customer_email}}

Phone: {{customer_phone}}

🛍️ Complete Order Details

{{order_details}}

⚡ Action Required: Contact customer within 24 hours to confirm order details and arrange payment.

``` ### **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

🍰 New Website Inquiry

From: {{from_name}} ({{from_email}})

Phone: {{phone}}

Inquiry Type: {{inquiry_type}}

Message:

Sent from Sweet Dreams Bakery website contact form

``` ## ⚙️ 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.*

🎂 Order Confirmation