31 KiB
31 KiB
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:
- Customer Order Confirmation - Sent to customers after placing orders
- Business Order Notification - Internal notification for new orders
- Contact Form Auto-Reply - Response to contact form submissions
- 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:
<!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:
<!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:
<!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:
<!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
- Create Service in EmailJS dashboard
- Copy each template above into EmailJS
- Test each template with sample data
- Update script.js with your service and template IDs
- Customize branding (colors, business info, social links)
- 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! 🎉