300 lines
8.7 KiB
Markdown
300 lines
8.7 KiB
Markdown
# 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}}
|
|
|
|
<!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**:
|
|
|
|
```html
|
|
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**:
|
|
|
|
```html
|
|
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:
|
|
|
|
```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!
|