482 lines
14 KiB
Markdown
482 lines
14 KiB
Markdown
# EmailJS Template Code for Pottery Website
|
|
|
|
Copy and paste these templates into your EmailJS dashboard.
|
|
|
|
## Template 1: Main Order Template (ID: template_qf9hvwa)
|
|
|
|
**Template Name:** `pottery_order_confirmation`
|
|
**Template ID:** `template_qf9hvwa` (matches your script.js config)
|
|
|
|
### Subject Line:
|
|
```
|
|
New Pottery Order #{{order_id}} - {{customer_name}}
|
|
```
|
|
|
|
### HTML Email Body:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f4f4f4;
|
|
}
|
|
.email-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, #8B4513, #D2691E);
|
|
color: white;
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
.header p {
|
|
margin: 10px 0 0 0;
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
}
|
|
.content {
|
|
padding: 30px 20px;
|
|
}
|
|
.order-details {
|
|
background: #FAF8F5;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #8B4513;
|
|
}
|
|
.order-details h3 {
|
|
margin-top: 0;
|
|
color: #8B4513;
|
|
font-size: 18px;
|
|
}
|
|
.order-details p {
|
|
margin: 8px 0;
|
|
font-size: 14px;
|
|
}
|
|
.items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
background: white;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.items-table th {
|
|
background: #8B4513;
|
|
color: white;
|
|
padding: 15px 10px;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.items-table td {
|
|
padding: 12px 10px;
|
|
border-bottom: 1px solid #eee;
|
|
font-size: 13px;
|
|
}
|
|
.items-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.items-table tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
.total-row {
|
|
background: #8B4513 !important;
|
|
color: white !important;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
.total-row td {
|
|
border-bottom: none !important;
|
|
padding: 15px 10px !important;
|
|
}
|
|
.next-steps {
|
|
background: #e8f4f8;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #2980b9;
|
|
margin: 25px 0;
|
|
}
|
|
.next-steps h3 {
|
|
color: #2980b9;
|
|
margin-top: 0;
|
|
}
|
|
.next-steps ol {
|
|
margin: 15px 0;
|
|
padding-left: 20px;
|
|
}
|
|
.next-steps li {
|
|
margin: 8px 0;
|
|
font-size: 14px;
|
|
}
|
|
.highlight {
|
|
background: #fff3cd;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #ffc107;
|
|
margin: 15px 0;
|
|
font-weight: bold;
|
|
color: #856404;
|
|
}
|
|
.footer {
|
|
background: #2C1810;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.footer a {
|
|
color: #D2691E;
|
|
text-decoration: none;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.content {
|
|
padding: 20px 15px;
|
|
}
|
|
.items-table th,
|
|
.items-table td {
|
|
padding: 8px 6px;
|
|
font-size: 12px;
|
|
}
|
|
.header h1 {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-container">
|
|
<div class="header">
|
|
<h1>🏺 New Order Received</h1>
|
|
<p>Artisan Pottery Studio</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h2 style="color: #8B4513; margin-bottom: 20px;">Order Information</h2>
|
|
|
|
<div class="order-details">
|
|
<h3>📋 Order Summary</h3>
|
|
<p><strong>Order ID:</strong> {{order_id}}</p>
|
|
<p><strong>Order Date:</strong> {{order_date}}</p>
|
|
<p><strong>Total Amount:</strong> ${{order_total}}</p>
|
|
<p><strong>Items Count:</strong> {{items_count}} items</p>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<h3>👤 Customer Information</h3>
|
|
<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 Method:</strong> {{preferred_contact}}</p>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<h3>📍 Shipping Address</h3>
|
|
<p style="white-space: pre-line;">{{shipping_address}}</p>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<h3>💳 Payment Information</h3>
|
|
<p><strong>Preferred Payment Method:</strong> {{payment_preference}}</p>
|
|
</div>
|
|
|
|
{{#if order_notes}}
|
|
<div class="order-details">
|
|
<h3>📝 Special Instructions</h3>
|
|
<p style="white-space: pre-line;">{{order_notes}}</p>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<h3 style="color: #8B4513; margin: 30px 0 15px 0;">🛍️ Ordered Items</h3>
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Item Name</th>
|
|
<th>Category</th>
|
|
<th>Color</th>
|
|
<th>Unit Price</th>
|
|
<th>Qty</th>
|
|
<th>Subtotal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{{items_table}}}
|
|
<tr class="total-row">
|
|
<td colspan="5"><strong>TOTAL</strong></td>
|
|
<td><strong>${{order_total}}</strong></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="highlight">
|
|
⚠️ This order requires payment confirmation before processing.
|
|
</div>
|
|
|
|
<div class="next-steps">
|
|
<h3>📞 Next Steps</h3>
|
|
<ol>
|
|
<li><strong>Contact customer within 24 hours</strong> at {{customer_email}} or {{customer_phone}}</li>
|
|
<li><strong>Confirm order details</strong> and answer any questions</li>
|
|
<li><strong>Arrange secure payment</strong> using customer's preferred method: {{payment_preference}}</li>
|
|
<li><strong>Confirm shipping details</strong> and delivery timeline</li>
|
|
<li><strong>Begin pottery creation</strong> and update customer on progress</li>
|
|
<li><strong>Send shipping notification</strong> when order is ready</li>
|
|
</ol>
|
|
|
|
<p><strong>💡 Customer Communication:</strong></p>
|
|
<p>A confirmation email copy has been sent to the customer at: <strong>{{customer_email}}</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>🏺 <strong>Artisan Pottery Studio</strong></p>
|
|
<p>Order Management System | <a href="mailto:{{customer_email}}">Reply to Customer</a></p>
|
|
<p>Generated on {{formatted_date}} at {{formatted_time}}</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## Template 2: Contact Form Template
|
|
|
|
**Template Name:** `pottery_contact_form`
|
|
|
|
### Subject Line:
|
|
```
|
|
💬 New Contact Message from {{from_name}} - Pottery Studio
|
|
```
|
|
|
|
### HTML Email Body:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f4f4f4;
|
|
}
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
|
}
|
|
.header {
|
|
background: #8B4513;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.message-box {
|
|
background: #FAF8F5;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #8B4513;
|
|
margin: 15px 0;
|
|
}
|
|
.contact-info {
|
|
background: #e8f4f8;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 15px 0;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #eee;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h2>💬 New Contact Form Message</h2>
|
|
<p>Artisan Pottery Studio Website</p>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<h3>👤 Contact Details</h3>
|
|
<p><strong>Name:</strong> {{from_name}}</p>
|
|
<p><strong>Email:</strong> {{from_email}}</p>
|
|
<p><strong>Date Received:</strong> {{contact_date}}</p>
|
|
</div>
|
|
|
|
<div class="message-box">
|
|
<h3>📝 Message Content</h3>
|
|
<p style="white-space: pre-line; font-size: 14px; line-height: 1.6;">{{message}}</p>
|
|
</div>
|
|
|
|
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; border-left: 4px solid #ffc107; margin: 20px 0;">
|
|
<p><strong>💡 To Reply:</strong> Simply reply to this email or contact {{from_name}} directly at {{from_email}}</p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>🏺 This message was sent through the Artisan Pottery Studio contact form</p>
|
|
<p>Received: {{contact_date}}</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## Template 3: Newsletter Subscription Template
|
|
|
|
**Template Name:** `pottery_newsletter_subscription`
|
|
|
|
### Subject Line:
|
|
```
|
|
📧 New Newsletter Subscription - Pottery Studio
|
|
```
|
|
|
|
### HTML Email Body:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f4f4f4;
|
|
}
|
|
.container {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
|
}
|
|
.header {
|
|
background: #8B4513;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.info-box {
|
|
background: #FAF8F5;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #8B4513;
|
|
margin: 15px 0;
|
|
text-align: center;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #eee;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h2>📧 New Newsletter Subscription</h2>
|
|
<p>Artisan Pottery Studio</p>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h3>📝 Subscriber Information</h3>
|
|
<p><strong>Email Address:</strong> {{subscriber_email}}</p>
|
|
<p><strong>Subscription Date:</strong> {{subscribe_date}}</p>
|
|
</div>
|
|
|
|
<div style="background: #e8f4f8; padding: 15px; border-radius: 5px; margin: 20px 0;">
|
|
<h4>📋 Action Required:</h4>
|
|
<p>Please add <strong>{{subscriber_email}}</strong> to your newsletter mailing list.</p>
|
|
<p>Consider sending a welcome email to the new subscriber!</p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>🏺 Newsletter subscription from Artisan Pottery Studio website</p>
|
|
<p>Subscribed: {{subscribe_date}}</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## How to Use These Templates:
|
|
|
|
1. **Log into your EmailJS dashboard**
|
|
2. **Go to Email Templates**
|
|
3. **Create New Template** for each one above
|
|
4. **Copy and paste** the HTML code into the template editor
|
|
5. **Set the Subject Line** as shown above
|
|
6. **Save each template** and note the Template IDs
|
|
7. **Update your script.js** if template IDs are different
|
|
|
|
## Template Variables Reference:
|
|
|
|
**Order Template Variables:**
|
|
- `{{order_id}}` - Unique order number
|
|
- `{{order_date}}` - Full date and time
|
|
- `{{order_total}}` - Total amount
|
|
- `{{customer_name}}` - Customer's full name
|
|
- `{{customer_email}}` - Customer's email
|
|
- `{{customer_phone}}` - Customer's phone
|
|
- `{{preferred_contact}}` - Contact preference
|
|
- `{{shipping_address}}` - Full shipping address
|
|
- `{{payment_preference}}` - Payment method choice
|
|
- `{{order_notes}}` - Special instructions
|
|
- `{{{items_table}}}` - HTML table of items (note: triple braces)
|
|
- `{{items_count}}` - Number of items
|
|
|
|
**Contact Template Variables:**
|
|
- `{{from_name}}` - Contact form sender name
|
|
- `{{from_email}}` - Contact form sender email
|
|
- `{{message}}` - Contact form message
|
|
- `{{contact_date}}` - When message was sent
|
|
|
|
**Newsletter Template Variables:**
|
|
- `{{subscriber_email}}` - Newsletter subscriber email
|
|
- `{{subscribe_date}}` - When they subscribed
|
|
|
|
These templates will create professional, branded emails that match your pottery website's aesthetic and provide all the information you need to process orders and customer communications!
|