# 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](https://www.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**: ```html Subject: New Pottery Order #{{order_id}} - {{customer_name}}

🏺 New Order - Artisan Pottery Studio

Order Details

Order ID: {{order_id}}

Order Date: {{order_date}}

Total Amount: ${{order_total}}

Customer Information

Name: {{customer_name}}

Email: {{customer_email}}

Phone: {{customer_phone}}

Preferred Contact: {{preferred_contact}}

Shipping Address

{{shipping_address}}

Order Items

{{{items_table}}}
Item Category Color Price Qty Subtotal

Total: ${{order_total}}

Payment Information

Preferred Payment Method: {{payment_preference}}

{{#if order_notes}}

Special Instructions

{{order_notes}}

{{/if}}

📋 Next Steps:

  1. Contact customer within 24 hours to confirm order
  2. Arrange secure payment processing
  3. Confirm shipping details and timeline
  4. Update order status in system

This order requires payment confirmation before processing.

Customer copy sent to: {{customer_email}}

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

New Contact Form Submission

From: {{from_name}}

Email: {{from_email}}

Date: {{contact_date}}

Message:

{{message}}

Sent from Artisan Pottery Studio website contact form

``` ### Template 3: Newsletter Subscription 1. Create new template: `pottery_newsletter_subscription` 2. **Template Content**: ```html Subject: New Newsletter Subscription

New Newsletter Subscription

Email: {{subscriber_email}}

Date: {{subscribe_date}}

Please add this email to your newsletter mailing list.

Sent from Artisan Pottery Studio website

``` ## 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: ```javascript 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: ```javascript // 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 - EmailJS Documentation: https://www.emailjs.com/docs/ - EmailJS Support: support@emailjs.com - Community: https://github.com/emailjs 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!