olipassey/web-pottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8bacf3b2bbb5d3ad2ab55cdb2d70f80642dddd99
web-pottery/EMAILJS_SETUP.md
DESKTOP-G4D78VI\Oli 8bacf3b2bb Initial
2025-09-27 01:46:37 +01:00

8.7 KiB
Raw Blame History

EmailJS Setup Guide for Pottery Website

This guide will help you set up EmailJS to enable real email sending from your pottery website.

Step 1: Create EmailJS Account

  1. Go to EmailJS.com
  2. Sign up for a free account
  3. Verify your email address

Step 2: Connect Email Service

  1. In your EmailJS dashboard, go to Email Services
  2. Click Add New Service
  3. Choose your email provider:
    • Gmail (recommended for personal/small business)
    • Outlook/Hotmail
    • Yahoo
    • Custom SMTP (for business email)

For Gmail Setup:

  1. Select Gmail
  2. Click Connect Account
  3. Authorize EmailJS to access your Gmail
  4. Your Gmail service will be created

For Business Email (SMTP):

  1. Select Custom SMTP
  2. Enter your email server settings:
    • SMTP Server: (e.g., mail.yourdomain.com)
    • Port: Usually 587 or 465
    • Username: Your email address
    • Password: Your email password
    • Security: TLS/SSL

Step 3: Create Email Templates

You need to create 3 email templates:

Template 1: Order Confirmation (Main Template)

  1. Go to Email Templates → Create New Template
  2. Template Name: pottery_order_confirmation
  3. Template Content:
Subject: New Pottery Order #{{order_id}} - {{customer_name}}

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
        .header { background: #8B4513; color: white; padding: 20px; text-align: center; }
        .content { padding: 20px; }
        .order-details { background: #f9f9f9; padding: 15px; margin: 15px 0; border-radius: 5px; }
        .items-table { width: 100%; border-collapse: collapse; margin: 15px 0; }
        .items-table th, .items-table td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        .items-table th { background: #8B4513; color: white; }
        .total { font-size: 18px; font-weight: bold; color: #8B4513; }
        .next-steps { background: #e8f4f8; padding: 15px; border-left: 4px solid #8B4513; margin: 20px 0; }
    </style>
</head>
<body>
    <div class="header">
        <h1>🏺 New Order - Artisan Pottery Studio</h1>
    </div>
    
    <div class="content">
        <h2>Order Details</h2>
        <div class="order-details">
            <p><strong>Order ID:</strong> {{order_id}}</p>
            <p><strong>Order Date:</strong> {{order_date}}</p>
            <p><strong>Total Amount:</strong> ${{order_total}}</p>
        </div>

        <h3>Customer Information</h3>
        <div class="order-details">
            <p><strong>Name:</strong> {{customer_name}}</p>
            <p><strong>Email:</strong> {{customer_email}}</p>
            <p><strong>Phone:</strong> {{customer_phone}}</p>
            <p><strong>Preferred Contact:</strong> {{preferred_contact}}</p>
        </div>

        <h3>Shipping Address</h3>
        <div class="order-details">
            <p>{{shipping_address}}</p>
        </div>

        <h3>Order Items</h3>
        <table class="items-table">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Category</th>
                    <th>Color</th>
                    <th>Price</th>
                    <th>Qty</th>
                    <th>Subtotal</th>
                </tr>
            </thead>
            <tbody>
                {{{items_table}}}
            </tbody>
        </table>
        
        <p class="total">Total: ${{order_total}}</p>

        <h3>Payment Information</h3>
        <div class="order-details">
            <p><strong>Preferred Payment Method:</strong> {{payment_preference}}</p>
        </div>

        {{#if order_notes}}
        <h3>Special Instructions</h3>
        <div class="order-details">
            <p>{{order_notes}}</p>
        </div>
        {{/if}}

        <div class="next-steps">
            <h3>📋 Next Steps:</h3>
            <ol>
                <li>Contact customer within 24 hours to confirm order</li>
                <li>Arrange secure payment processing</li>
                <li>Confirm shipping details and timeline</li>
                <li>Update order status in system</li>
            </ol>
            <p><strong>This order requires payment confirmation before processing.</strong></p>
            <p>Customer copy sent to: {{customer_email}}</p>
        </div>
    </div>
</body>
</html>

Template 2: Contact Form

  1. Create new template: pottery_contact_form
  2. Template Content:
Subject: New Contact Form Message - {{from_name}}

<h2>New Contact Form Submission</h2>

<p><strong>From:</strong> {{from_name}}</p>
<p><strong>Email:</strong> {{from_email}}</p>
<p><strong>Date:</strong> {{contact_date}}</p>

<h3>Message:</h3>
<div style="background: #f9f9f9; padding: 15px; border-radius: 5px;">
    {{message}}
</div>

<hr>
<p><em>Sent from Artisan Pottery Studio website contact form</em></p>

Template 3: Newsletter Subscription

  1. Create new template: pottery_newsletter_subscription
  2. Template Content:
Subject: New Newsletter Subscription

<h2>New Newsletter Subscription</h2>

<p><strong>Email:</strong> {{subscriber_email}}</p>
<p><strong>Date:</strong> {{subscribe_date}}</p>

<p>Please add this email to your newsletter mailing list.</p>

<hr>
<p><em>Sent from Artisan Pottery Studio website</em></p>

Step 4: Configure Website

  1. Open script.js in your pottery website
  2. Find the EMAILJS_CONFIG section at the top
  3. Replace the placeholder values:
const EMAILJS_CONFIG = {
    PUBLIC_KEY: 'your_actual_public_key',     // From EmailJS dashboard
    SERVICE_ID: 'your_service_id',            // From your connected email service
    TEMPLATE_ID: 'pottery_order_confirmation' // Template ID from step 3
};

Getting Your Keys:

  1. Public Key:

    • Go to EmailJS dashboard → Account → General
    • Copy your Public Key

  2. Service ID:

    • Go to Email Services
    • Copy the Service ID of your connected service

  3. Template IDs:

    • Go to Email Templates
    • Copy the Template ID for each template you created

Step 5: Update Template IDs in Code

In the script.js file, update these lines with your actual template IDs:

// In handleContactFormSubmission function:
const contactTemplateId = 'pottery_contact_form'; // Your contact template ID

// In handleNewsletterSubmission function:
const newsletterTemplateId = 'pottery_newsletter_subscription'; // Your newsletter template ID

Step 6: Test the Integration

  1. Test Order Submission:

    • Add items to cart
    • Go through checkout process
    • Fill in customer details
    • Submit order
    • Check your email for order confirmation

  2. Test Contact Form:

    • Fill out contact form at bottom of website
    • Submit message
    • Check your email

  3. Test Newsletter:

    • Enter email in newsletter signup
    • Submit
    • Check your email

Step 7: Email Setup Recommendations

For Business Use:

  1. Use a dedicated business email for receiving orders
  2. Set up email filters to organize order emails
  3. Create email templates for customer responses
  4. Monitor EmailJS quota (free plan has limits)

Email Addresses to Configure:

  • orders@yourdomain.com - For order confirmations
  • info@yourdomain.com - For contact form messages
  • newsletter@yourdomain.com - For newsletter subscriptions

Troubleshooting

Common Issues:

  1. Emails not sending:

    • Check EmailJS dashboard for error logs
    • Verify service connection
    • Check template syntax

  2. Template variables not working:

    • Ensure variable names match exactly
    • Use triple braces {{{variable}}} for HTML content

  3. Gmail authentication issues:

    • Enable 2-factor authentication
    • Use app-specific password instead of regular password

  4. Quota exceeded:

    • Free plan: 200 emails/month
    • Upgrade to paid plan for more volume

Security Notes

  • Never commit your EmailJS keys to public repositories
  • Consider using environment variables for sensitive data
  • Monitor your EmailJS usage to prevent abuse
  • Set up CAPTCHA if you experience spam

Cost Information

  • Free Plan: 200 emails/month
  • Personal Plan: $15/month - 1,000 emails
  • Business Plan: $70/month - 10,000 emails

For a pottery business, the free plan should be sufficient initially.

Support

Once configured, your pottery website will send real emails for: ✅ Order confirmations to your business email ✅ Customer copies of orders ✅ Contact form messages ✅ Newsletter subscriptions

This creates a professional, automated system for managing your pottery business communications!

Reference in New Issue View Git Blame Copy Permalink