Files

DESKTOP-G4D78VI\Oli 7fa743760d initial

2025-09-27 23:46:54 +01:00

12 KiB

Raw Permalink Blame History

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

Go to emailjs.com
Click "Sign Up" and create a free account
Verify your email address
Log in to your EmailJS dashboard

Step 2: Set Up Email Service

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
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

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

Go to "Email Templates" → "Create New Template"
Template Name: Customer Order Confirmation
Template ID: customer_order_confirmation (you'll need this)
Configure the template (see detailed template code below)

Template 2: Business Order Notification

Create another template
Template Name: Business Order Notification
Template ID: business_order_notification
Configure for internal notifications

Template 3: Contact Form

Create a third template
Template Name: Contact Form Inquiry
Template ID: contact_form_inquiry
For general inquiries and consultations

Step 4: Get Your Credentials

Service ID: Found in Email Services (e.g., service_abc123)
Template IDs: From your created templates
User ID (Public Key): Account → API Keys → Public Key

Step 5: Update Website Configuration

Edit script.js and update the EmailJS configuration:

// 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):

<!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:

<!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:

<!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:

// 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:

Set up business email (e.g., orders@yourbakery.com)
Configure SMTP in EmailJS with your business email settings
Update templates to use your business email as sender

Email Deliverability

To ensure emails don't go to spam:

SPF Record: Add EmailJS to your domain's SPF record
DKIM: Enable DKIM signing in EmailJS settings
Reply-To: Set up proper reply-to addresses
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:

// 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

Use EmailJS Test Mode:
- Go to your EmailJS dashboard
- Select your template
- Click "Test Template"
- Fill in sample data
- Send test email
Test Through Website:
- Fill out contact form with your email
- Place a test order
- Check both customer and business emails

Debug Common Issues

// 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:

// Check your service ID is correct
const emailJSConfig = {
    serviceID: 'service_XXXXXXX', // Must match EmailJS dashboard
    // ...
};

"Template not found" Error:

// 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:

// 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

EmailJS Documentation: docs.emailjs.com
EmailJS Support: Available through your dashboard
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.

12 KiB Raw Permalink Blame History

EmailJS Setup Guide for Sweet Dreams Bakery

📧 What is EmailJS?

🚀 Quick Setup (5 minutes)

Step 1: Create EmailJS Account

Step 2: Set Up Email Service

Step 3: Create Email Templates

Template 1: Customer Order Confirmation

Template 2: Business Order Notification

Template 3: Contact Form

Step 4: Get Your Credentials

Step 5: Update Website Configuration

📝 Email Template Configurations

Customer Order Confirmation Template

Business Order Notification Template

Contact Form Template

⚙️ Advanced Configuration

Multiple Template Setup

Custom Domain Email

Email Deliverability

🧪 Testing Your Setup

Test Mode (No Real Emails)

Send Test Emails

Debug Common Issues

🔒 Security Best Practices

Public Key Security

Template Validation

Spam Prevention

📊 Monitoring & Analytics

EmailJS Dashboard

Usage Limits

❓ Troubleshooting

Common Issues

Getting Help

🎉 Success!

12 KiB

Raw Permalink Blame History