1023 lines
31 KiB
Markdown
1023 lines
31 KiB
Markdown
# EmailJS Template Code for Sweet Dreams Bakery
|
|
|
|
This document contains the complete email template code for your bakery website's EmailJS integration. Copy and paste these templates directly into your EmailJS dashboard.
|
|
|
|
## 📧 Template Overview
|
|
|
|
You'll need to create these 4 templates in your EmailJS dashboard:
|
|
|
|
1. **Customer Order Confirmation** - Sent to customers after placing orders
|
|
2. **Business Order Notification** - Internal notification for new orders
|
|
3. **Contact Form Auto-Reply** - Response to contact form submissions
|
|
4. **Newsletter Welcome** - Welcome email for newsletter subscribers
|
|
|
|
---
|
|
|
|
## 🛍️ Template 1: Customer Order Confirmation
|
|
|
|
**Template ID:** `customer_order_confirmation`
|
|
|
|
### Template Settings:
|
|
- **To Email:** `{{to_email}}`
|
|
- **From Name:** `Sweet Dreams Bakery`
|
|
- **From Email:** `orders@sweetdreamsbakery.com`
|
|
- **Subject:** `🎂 Order Confirmation #{{order_number}} - Thank You {{to_name}}!`
|
|
|
|
### HTML Template:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Order Confirmation - Sweet Dreams Bakery</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
line-height: 1.6;
|
|
color: #3D3530;
|
|
background-color: #FAF8F5;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: #FFFFFF;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(61, 53, 48, 0.1);
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #F4B8C3 0%, #E8A2AE 100%);
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header p {
|
|
font-size: 16px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.content {
|
|
padding: 40px 30px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 20px;
|
|
color: #4A2C2A;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.order-card {
|
|
background: #FAF8F5;
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
margin: 25px 0;
|
|
border-left: 4px solid #8B4B73;
|
|
}
|
|
|
|
.order-card h3 {
|
|
color: #4A2C2A;
|
|
font-size: 18px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.order-info {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.order-info p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.order-info strong {
|
|
color: #4A2C2A;
|
|
display: inline-block;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.order-items {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 15px 0;
|
|
border: 1px solid #E5E1DC;
|
|
}
|
|
|
|
.order-items pre {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
color: #3D3530;
|
|
}
|
|
|
|
.total-amount {
|
|
font-size: 20px;
|
|
color: #8B4B73;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 15px;
|
|
background: white;
|
|
border-radius: 5px;
|
|
border: 2px solid #F4B8C3;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.next-steps {
|
|
background: #FFF5E6;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.next-steps h4 {
|
|
color: #4A2C2A;
|
|
font-size: 16px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.next-steps ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.next-steps li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #F4B8C3;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.next-steps li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.next-steps li strong {
|
|
color: #8B4B73;
|
|
}
|
|
|
|
.contact-info {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: #FAF8F5;
|
|
border-radius: 8px;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #8B4B73, #A65D8A);
|
|
color: white;
|
|
padding: 12px 25px;
|
|
text-decoration: none;
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
margin: 10px 5px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.footer {
|
|
background: #4A2C2A;
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer h4 {
|
|
color: #F4B8C3;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.footer p {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.social-links {
|
|
margin: 20px 0 10px;
|
|
}
|
|
|
|
.social-links a {
|
|
color: #F4B8C3;
|
|
text-decoration: none;
|
|
margin: 0 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.email-container {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.header, .content, .footer {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.order-card {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-container">
|
|
<div class="header">
|
|
<h1>🎂 Order Confirmation</h1>
|
|
<p>Your sweet dreams are coming true!</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="greeting">
|
|
Hello {{to_name}}! 👋
|
|
</div>
|
|
|
|
<p>Thank you for choosing Sweet Dreams Bakery! We've received your order and our talented bakers are excited to create something truly special for your upcoming event.</p>
|
|
|
|
<div class="order-card">
|
|
<h3>📋 Your Order Details</h3>
|
|
|
|
<div class="order-info">
|
|
<p><strong>Order Number:</strong> {{order_number}}</p>
|
|
<p><strong>Event Date:</strong> {{event_date}}</p>
|
|
<p><strong>Event Time:</strong> {{event_time}}</p>
|
|
<p><strong>Delivery Method:</strong> {{delivery_method}}</p>
|
|
{{#delivery_address}}
|
|
<p><strong>Delivery Address:</strong> {{delivery_address}}</p>
|
|
{{/delivery_address}}
|
|
</div>
|
|
|
|
<h4 style="color: #4A2C2A; margin: 15px 0 10px;">🍰 Items Ordered:</h4>
|
|
<div class="order-items">
|
|
<pre>{{order_items}}</pre>
|
|
</div>
|
|
|
|
<div class="total-amount">
|
|
Total: ${{order_total}}
|
|
</div>
|
|
|
|
{{#special_requests}}
|
|
<div style="background: white; padding: 15px; border-radius: 5px; margin-top: 15px;">
|
|
<strong style="color: #8B4B73;">✨ Special Requests:</strong><br>
|
|
<em>{{special_requests}}</em>
|
|
</div>
|
|
{{/special_requests}}
|
|
</div>
|
|
|
|
<div class="next-steps">
|
|
<h4>🎯 What Happens Next?</h4>
|
|
<ul>
|
|
<li><strong>Within 24 hours:</strong> Our team will contact you to confirm all order details and discuss any customizations</li>
|
|
<li><strong>Design Consultation:</strong> We'll review your cake design preferences and make suggestions if needed</li>
|
|
<li><strong>Payment Arrangement:</strong> We'll arrange convenient payment options that work for you</li>
|
|
<li><strong>Production Schedule:</strong> Your cake will be freshly made close to your event date</li>
|
|
<li><strong>Final Confirmation:</strong> We'll confirm pickup/delivery details 48 hours before your event</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p><strong>Questions about your order?</strong></p>
|
|
<p>We're here to help! Contact us anytime:</p>
|
|
<p>📞 <strong>(555) 123-CAKE</strong></p>
|
|
<p>✉️ <strong>orders@sweetdreamsbakery.com</strong></p>
|
|
|
|
<a href="mailto:orders@sweetdreamsbakery.com" class="btn">Email Us</a>
|
|
<a href="tel:+15551232253" class="btn">Call Us</a>
|
|
</div>
|
|
|
|
<p style="text-align: center; color: #8B4B73; font-style: italic; margin-top: 30px;">
|
|
"Thank you for letting us be part of your special celebration. We can't wait to create something beautiful for you!"
|
|
<br><br>
|
|
<strong>- The Sweet Dreams Bakery Team 🍰</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<h4>Sweet Dreams Bakery</h4>
|
|
<p>123 Baker Street, Sweet Valley, CA 90210</p>
|
|
<p>📞 (555) 123-CAKE | ✉️ orders@sweetdreamsbakery.com</p>
|
|
|
|
<div class="social-links">
|
|
<a href="#">Facebook</a> |
|
|
<a href="#">Instagram</a> |
|
|
<a href="#">Pinterest</a>
|
|
</div>
|
|
|
|
<p style="font-size: 12px; margin-top: 15px; opacity: 0.7;">
|
|
Creating sweet memories since 2018 | Handcrafted with love ❤️
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## 🚨 Template 2: Business Order Notification
|
|
|
|
**Template ID:** `business_order_notification`
|
|
|
|
### Template Settings:
|
|
- **To Email:** `orders@sweetdreamsbakery.com` (your business email)
|
|
- **From Name:** `Website Orders`
|
|
- **From Email:** `noreply@sweetdreamsbakery.com`
|
|
- **Subject:** `🚨 NEW ORDER: {{customer_name}} - ${{order_total}} | Event: {{event_date}}`
|
|
|
|
### HTML Template:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>New Order Alert - Sweet Dreams Bakery</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background-color: #f4f4f4;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.alert-header {
|
|
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
|
|
padding: 25px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.alert-header h1 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.timestamp {
|
|
background: #4A2C2A;
|
|
color: white;
|
|
padding: 10px 25px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
padding: 25px;
|
|
}
|
|
|
|
.customer-section, .order-section {
|
|
background: #FAF8F5;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #F4B8C3;
|
|
}
|
|
|
|
.customer-section h2, .order-section h2 {
|
|
color: #4A2C2A;
|
|
margin-top: 0;
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: bold;
|
|
color: #8B4B73;
|
|
min-width: 140px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
}
|
|
|
|
.order-details {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border: 1px solid #E5E1DC;
|
|
margin: 15px 0;
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
white-space: pre-wrap;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.priority-actions {
|
|
background: #FFF5E6;
|
|
border: 2px solid #F4A261;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 25px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.priority-actions h3 {
|
|
color: #D4A574;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.btn {
|
|
background: #8B4B73;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn-call {
|
|
background: #7FB069;
|
|
}
|
|
|
|
.btn-email {
|
|
background: #457B9D;
|
|
}
|
|
|
|
.total-highlight {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #8B4B73;
|
|
text-align: center;
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 2px solid #F4B8C3;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.content {
|
|
padding: 15px;
|
|
}
|
|
|
|
.customer-section, .order-section {
|
|
padding: 15px;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-label {
|
|
min-width: auto;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="alert-header">
|
|
<h1>🎂 NEW CAKE ORDER RECEIVED!</h1>
|
|
<p>A customer has placed an order through your website</p>
|
|
</div>
|
|
|
|
<div class="timestamp">
|
|
📅 Order received: {{order_date}} at {{order_time}}
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="customer-section">
|
|
<h2>👤 Customer Information</h2>
|
|
<div class="info-grid">
|
|
<div class="info-row">
|
|
<span class="info-label">Name:</span>
|
|
<span class="info-value">{{customer_name}}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Email:</span>
|
|
<span class="info-value">
|
|
<a href="mailto:{{customer_email}}">{{customer_email}}</a>
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Phone:</span>
|
|
<span class="info-value">
|
|
<a href="tel:{{customer_phone}}">{{customer_phone}}</a>
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Event Date:</span>
|
|
<span class="info-value"><strong>{{event_date}}</strong> {{#event_time}}at {{event_time}}{{/event_time}}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Delivery:</span>
|
|
<span class="info-value">{{delivery_method}}</span>
|
|
</div>
|
|
{{#delivery_address}}
|
|
<div class="info-row">
|
|
<span class="info-label">Address:</span>
|
|
<span class="info-value">{{delivery_address}}</span>
|
|
</div>
|
|
{{/delivery_address}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-section">
|
|
<h2>🛍️ Order Details</h2>
|
|
|
|
<div class="total-highlight">
|
|
Order Total: ${{order_total}}
|
|
</div>
|
|
|
|
<h4>📝 Complete Order Information:</h4>
|
|
<div class="order-details">{{order_details}}</div>
|
|
|
|
{{#special_requests}}
|
|
<div style="background: #FFF5E6; padding: 15px; border-radius: 5px; margin: 15px 0; border-left: 4px solid #F4A261;">
|
|
<strong>✨ Special Requests:</strong><br>
|
|
{{special_requests}}
|
|
</div>
|
|
{{/special_requests}}
|
|
</div>
|
|
|
|
<div class="priority-actions">
|
|
<h3>⚡ ACTION REQUIRED</h3>
|
|
<p><strong>Contact the customer within 24 hours to:</strong></p>
|
|
<ul style="text-align: left; display: inline-block;">
|
|
<li>Confirm order details and availability</li>
|
|
<li>Discuss customization requirements</li>
|
|
<li>Arrange payment method and schedule</li>
|
|
<li>Finalize delivery/pickup logistics</li>
|
|
</ul>
|
|
|
|
<div class="action-buttons">
|
|
<a href="tel:{{customer_phone}}" class="btn btn-call">📞 Call Customer</a>
|
|
<a href="mailto:{{customer_email}}" class="btn btn-email">✉️ Email Customer</a>
|
|
<a href="#" class="btn">📋 Add to Calendar</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: #FAF8F5; padding: 15px; border-radius: 5px; text-align: center; margin-top: 20px;">
|
|
<p><em>This order was placed through your Sweet Dreams Bakery website.<br>
|
|
The customer has received an automatic confirmation email.</em></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## 💬 Template 3: Contact Form Auto-Reply
|
|
|
|
**Template ID:** `contact_form_auto_reply`
|
|
|
|
### Template Settings:
|
|
- **To Email:** `{{from_email}}`
|
|
- **From Name:** `Sweet Dreams Bakery`
|
|
- **From Email:** `info@sweetdreamsbakery.com`
|
|
- **Subject:** `Thank you for contacting Sweet Dreams Bakery! 🍰`
|
|
|
|
### HTML Template:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thank You - Sweet Dreams Bakery</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #3D3530;
|
|
background-color: #FAF8F5;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 20px auto;
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(61, 53, 48, 0.1);
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #F4B8C3 0%, #E8A2AE 100%);
|
|
padding: 30px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px;
|
|
}
|
|
|
|
.message-summary {
|
|
background: #FAF8F5;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #8B4B73;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.contact-info {
|
|
background: #FFF5E6;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.footer {
|
|
background: #4A2C2A;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
background: #8B4B73;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-container">
|
|
<div class="header">
|
|
<h1>🍰 Thank You for Contacting Us!</h1>
|
|
<p>We've received your message and will get back to you soon</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<p>Hello {{from_name}},</p>
|
|
|
|
<p>Thank you for reaching out to Sweet Dreams Bakery! We've received your inquiry about <strong>{{inquiry_type}}</strong> and our team will respond within 24 hours.</p>
|
|
|
|
<div class="message-summary">
|
|
<h3>📝 Your Message Summary:</h3>
|
|
<p><strong>Inquiry Type:</strong> {{inquiry_type}}</p>
|
|
<p><strong>Your Message:</strong></p>
|
|
<div style="background: white; padding: 15px; border-radius: 5px; font-style: italic;">
|
|
{{message}}
|
|
</div>
|
|
</div>
|
|
|
|
<p>In the meantime, feel free to:</p>
|
|
<ul>
|
|
<li>Browse our cake gallery on our website</li>
|
|
<li>Check out our latest creations on social media</li>
|
|
<li>Read about our custom cake process</li>
|
|
</ul>
|
|
|
|
<div class="contact-info">
|
|
<h4>Need immediate assistance?</h4>
|
|
<p>📞 <strong>(555) 123-CAKE</strong></p>
|
|
<p>🕒 <strong>Business Hours:</strong> Tue-Sat 8AM-6PM, Sun 9AM-4PM</p>
|
|
|
|
<a href="tel:+15551232253" class="btn">Call Us</a>
|
|
<a href="#" class="btn">Visit Website</a>
|
|
</div>
|
|
|
|
<p>We're excited to help make your sweet dreams come true!</p>
|
|
|
|
<p><strong>The Sweet Dreams Bakery Team 🎂</strong></p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p><strong>Sweet Dreams Bakery</strong><br>
|
|
123 Baker Street, Sweet Valley, CA 90210<br>
|
|
orders@sweetdreamsbakery.com</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## 📰 Template 4: Newsletter Welcome
|
|
|
|
**Template ID:** `newsletter_welcome`
|
|
|
|
### Template Settings:
|
|
- **To Email:** `{{subscriber_email}}`
|
|
- **From Name:** `Sweet Dreams Bakery`
|
|
- **From Email:** `newsletter@sweetdreamsbakery.com`
|
|
- **Subject:** `🍰 Welcome to Sweet Dreams! Here's 10% off your first order`
|
|
|
|
### HTML Template:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Welcome to Sweet Dreams Newsletter</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #3D3530;
|
|
background-color: #FAF8F5;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 20px auto;
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(61, 53, 48, 0.1);
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #8B4B73 0%, #A65D8A 100%);
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.discount-banner {
|
|
background: #F4A261;
|
|
color: white;
|
|
padding: 15px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px;
|
|
}
|
|
|
|
.welcome-section {
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.benefits {
|
|
background: #FAF8F5;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.benefits ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.benefits li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #E5E1DC;
|
|
}
|
|
|
|
.benefits li:before {
|
|
content: "🍰 ";
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.cta-section {
|
|
background: #FFF5E6;
|
|
padding: 25px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #8B4B73, #A65D8A);
|
|
color: white;
|
|
padding: 15px 30px;
|
|
text-decoration: none;
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
margin: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.footer {
|
|
background: #4A2C2A;
|
|
color: white;
|
|
padding: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.social-links a {
|
|
color: #F4B8C3;
|
|
text-decoration: none;
|
|
margin: 0 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-container">
|
|
<div class="header">
|
|
<h1>🍰 Welcome to Sweet Dreams!</h1>
|
|
<p>Thank you for joining our delicious newsletter family</p>
|
|
</div>
|
|
|
|
<div class="discount-banner">
|
|
🎉 WELCOME GIFT: Use code SWEET10 for 10% off your first order!
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="welcome-section">
|
|
<h2>Hello Sweet Friend! 👋</h2>
|
|
<p>We're thrilled to have you join our Sweet Dreams Bakery newsletter! You've just unlocked access to exclusive offers, baking tips, and first looks at our latest cake creations.</p>
|
|
</div>
|
|
|
|
<div class="benefits">
|
|
<h3>What to expect in your inbox:</h3>
|
|
<ul>
|
|
<li>Exclusive discount codes and special offers</li>
|
|
<li>First access to new cake designs and flavors</li>
|
|
<li>Seasonal baking tips and recipes</li>
|
|
<li>Behind-the-scenes bakery stories</li>
|
|
<li>Early booking for holiday cake slots</li>
|
|
<li>Birthday month surprises 🎂</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="cta-section">
|
|
<h3>Ready to place your first order?</h3>
|
|
<p>Browse our delicious collection of handcrafted cakes and use your welcome discount!</p>
|
|
|
|
<a href="#" class="btn">Shop Cakes Now</a>
|
|
|
|
<p style="font-size: 14px; margin-top: 15px;">
|
|
<strong>Discount Code:</strong> SWEET10<br>
|
|
<strong>Valid until:</strong> {{expiry_date}}<br>
|
|
<strong>Minimum order:</strong> $25
|
|
</p>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin: 25px 0;">
|
|
<h4>Follow us for daily cake inspiration!</h4>
|
|
<div class="social-links">
|
|
<a href="#">📘 Facebook</a> |
|
|
<a href="#">📷 Instagram</a> |
|
|
<a href="#">📌 Pinterest</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="text-align: center; font-style: italic; color: #8B4B73;">
|
|
"We can't wait to be part of your special celebrations!"<br>
|
|
<strong>- Sarah & The Sweet Dreams Team</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p><strong>Sweet Dreams Bakery</strong><br>
|
|
123 Baker Street, Sweet Valley, CA 90210<br>
|
|
📞 (555) 123-CAKE | ✉️ orders@sweetdreamsbakery.com</p>
|
|
|
|
<p style="font-size: 12px; margin-top: 15px; opacity: 0.8;">
|
|
You're receiving this because you subscribed to our newsletter.<br>
|
|
<a href="#" style="color: #F4B8C3;">Unsubscribe</a> |
|
|
<a href="#" style="color: #F4B8C3;">Update Preferences</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## 📋 Template Variables Reference
|
|
|
|
### Customer Order Confirmation Variables:
|
|
- `{{to_name}}` - Customer's name
|
|
- `{{to_email}}` - Customer's email
|
|
- `{{order_number}}` - Generated order number
|
|
- `{{event_date}}` - Event date
|
|
- `{{event_time}}` - Event time (optional)
|
|
- `{{delivery_method}}` - Pickup or Delivery
|
|
- `{{delivery_address}}` - Address (if delivery)
|
|
- `{{order_items}}` - Formatted list of items
|
|
- `{{order_total}}` - Total amount
|
|
- `{{special_requests}}` - Custom requests
|
|
|
|
### Business Order Notification Variables:
|
|
- `{{customer_name}}` - Customer's full name
|
|
- `{{customer_email}}` - Customer's email
|
|
- `{{customer_phone}}` - Customer's phone
|
|
- `{{order_date}}` - Order placement date
|
|
- `{{order_time}}` - Order placement time
|
|
- `{{order_total}}` - Total amount
|
|
- `{{order_details}}` - Complete order JSON
|
|
- `{{event_date}}` - Event date
|
|
- `{{delivery_method}}` - Delivery method
|
|
- `{{special_requests}}` - Special requests
|
|
|
|
### Contact Form Variables:
|
|
- `{{from_name}}` - Sender's name
|
|
- `{{from_email}}` - Sender's email
|
|
- `{{phone}}` - Phone number (optional)
|
|
- `{{inquiry_type}}` - Type of inquiry
|
|
- `{{message}}` - Message content
|
|
|
|
### Newsletter Variables:
|
|
- `{{subscriber_email}}` - Subscriber's email
|
|
- `{{expiry_date}}` - Discount expiry date
|
|
|
|
---
|
|
|
|
## 🎯 Implementation Steps
|
|
|
|
1. **Create Service** in EmailJS dashboard
|
|
2. **Copy each template** above into EmailJS
|
|
3. **Test each template** with sample data
|
|
4. **Update script.js** with your service and template IDs
|
|
5. **Customize branding** (colors, business info, social links)
|
|
6. **Test complete workflow** from website
|
|
|
|
## ⚡ Quick Tips
|
|
|
|
- **Always test templates** before going live
|
|
- **Use descriptive template names** for easy management
|
|
- **Keep mobile users in mind** - templates are responsive
|
|
- **Update business information** in all templates
|
|
- **Add your actual social media links**
|
|
- **Customize colors** to match your brand
|
|
|
|
Your professional bakery email system is now ready! 🎉 |