Email Templates Examples
View SourceReal-world email template examples for common use cases.
Overview
This guide provides copy-paste ready email templates for common business scenarios like welcome emails, order confirmations, password resets, and newsletters.
Welcome Email
Send a personalized welcome email to new users.
template = """
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.header { background-color: #3498db; color: white; padding: 20px; text-align: center; }
.button { background-color: #3498db; color: white; padding: 10px 20px; text-decoration: none; display: inline-block; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to {{ company_name }}!</h1>
</div>
<h2>Hi {{ user.first_name }},</h2>
<p>We're thrilled to have you join our community! Your account has been successfully created.</p>
<h3>What's Next?</h3>
<ul>
<li>Complete your profile with additional information</li>
<li>Explore our features and tools</li>
<li>Join our community forum</li>
<li>Check out our getting started guide</li>
</ul>
<p>
<a href="{{ action_url }}" class="button">Get Started</a>
</p>
<h3>Questions?</h3>
<p>If you have any questions or need help, don't hesitate to reach out to our support team at <a href="mailto:{{ support_email }}">{{ support_email }}</a></p>
<p>Best regards,<br>
The {{ company_name }} Team</p>
<hr style="margin-top: 40px; border: none; border-top: 1px solid #ddd;">
<p style="font-size: 12px; color: #666;">
{{ company_address }}<br>
<a href="{{ unsubscribe_url }}">Unsubscribe</a>
</p>
</div>
</body>
</html>
"""
context = %{
"company_name" => "TechFlow",
"company_address" => "123 Main St, San Francisco, CA 94102",
"user" => %{"first_name" => "Alice"},
"action_url" => "https://example.com/onboarding",
"support_email" => "support@example.com",
"unsubscribe_url" => "https://example.com/unsubscribe?token=xyz"
}
{:ok, email_html} = Mau.render(template, context)Order Confirmation Email
Confirm an order with details and next steps.
template = """
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; color: #333; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: #f5f5f5; font-weight: bold; }
.total { font-size: 18px; font-weight: bold; text-align: right; }
</style>
</head>
<body>
<div class="container">
<h1>Order Confirmation</h1>
<p>Hi {{ customer.name }},</p>
<p>Thank you for your order! We're processing it now.</p>
<h3>Order Details</h3>
<p><strong>Order #:</strong> {{ order.id }}</p>
<p><strong>Order Date:</strong> {{ order.date }}</p>
<p><strong>Estimated Delivery:</strong> {{ order.estimated_delivery }}</p>
<h3>Items</h3>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for item in order.items %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.quantity }}</td>
<td>${{ item.price | round(2) }}</td>
<td>${{ item.total | round(2) }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div style="text-align: right; padding: 10px 0; border-top: 2px solid #333;">
<p style="margin: 10px 0;"><strong>Subtotal:</strong> ${{ order.subtotal | round(2) }}</p>
<p style="margin: 10px 0;"><strong>Tax:</strong> ${{ order.tax | round(2) }}</p>
<p style="margin: 10px 0; font-size: 18px;"><strong>Total:</strong> ${{ order.total | round(2) }}</p>
</div>
<h3>Shipping Address</h3>
<p>
{{ order.shipping.name }}<br>
{{ order.shipping.street }}<br>
{{ order.shipping.city }}, {{ order.shipping.state }} {{ order.shipping.zip }}<br>
{{ order.shipping.country }}
</p>
<h3>Track Your Order</h3>
<p>You can track your order here: <a href="{{ tracking_url }}">{{ tracking_url }}</a></p>
<p>Thank you for your business!</p>
</div>
</body>
</html>
"""
context = %{
"customer" => %{"name" => "Bob Johnson"},
"order" => %{
"id" => "ORD-2024-001234",
"date" => "2024-10-29",
"estimated_delivery" => "2024-11-05",
"items" => [
%{"name" => "Laptop", "quantity" => 1, "price" => 999.99, "total" => 999.99},
%{"name" => "Mouse", "quantity" => 2, "price" => 29.99, "total" => 59.98}
],
"subtotal" => 1059.97,
"tax" => 84.80,
"total" => 1144.77,
"shipping" => %{
"name" => "Bob Johnson",
"street" => "456 Oak Ave",
"city" => "Portland",
"state" => "OR",
"zip" => "97205",
"country" => "USA"
}
},
"tracking_url" => "https://example.com/track/ORD-2024-001234"
}
{:ok, email_html} = Mau.render(template, context)Password Reset Email
Guide users to reset their password securely.
template = """
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; color: #333; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.warning { background-color: #fff3cd; border: 1px solid #ffc107; padding: 15px; border-radius: 4px; margin: 20px 0; }
.code-block { background-color: #f5f5f5; padding: 15px; border-radius: 4px; font-family: monospace; margin: 15px 0; }
.button { background-color: #28a745; color: white; padding: 12px 30px; text-decoration: none; display: inline-block; border-radius: 4px; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>Password Reset Request</h1>
<p>Hi {{ user.name }},</p>
<p>We received a request to reset the password for your account associated with <strong>{{ user.email }}</strong>.</p>
<div class="warning">
<strong>⚠️ Security Note:</strong> If you didn't request this password reset, you can safely ignore this email. Your password will remain unchanged.
</div>
<h3>Reset Your Password</h3>
<p>Click the button below to reset your password. This link will expire in {{ expiration_hours }} hours.</p>
<p>
<a href="{{ reset_url }}" class="button">Reset Password</a>
</p>
<h3>Or use this code:</h3>
<div class="code-block">
{{ reset_code }}
</div>
<p>If you can't click the button, copy and paste this URL into your browser:</p>
<p style="word-break: break-all; font-size: 12px; color: #666;">
{{ reset_url }}
</p>
<h3>Questions?</h3>
<p>If you didn't request a password reset or have any questions, please contact our support team at <a href="mailto:{{ support_email }}">{{ support_email }}</a></p>
<p>Stay safe!<br>
The {{ company_name }} Team</p>
</div>
</body>
</html>
"""
context = %{
"company_name" => "TechFlow",
"user" => %{
"name" => "Charlie",
"email" => "charlie@example.com"
},
"reset_url" => "https://example.com/reset-password?token=abc123def456",
"reset_code" => "ABC123DEF456",
"expiration_hours" => 24,
"support_email" => "support@example.com"
}
{:ok, email_html} = Mau.render(template, context)Newsletter Email
Send a newsletter with multiple sections and featured content.
template = """
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
.container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px 20px; text-align: center; }
.section { margin: 30px 0; padding: 20px; border: 1px solid #eee; border-radius: 4px; }
.feature-image { max-width: 100%; height: auto; }
.cta { background-color: #667eea; color: white; padding: 10px 20px; text-decoration: none; display: inline-block; border-radius: 4px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>{{ newsletter.title }}</h1>
<p>{{ newsletter.month }}</p>
</div>
<p>Hi {{ subscriber.name }},</p>
<p>{{ newsletter.intro }}</p>
{% for article in newsletter.featured_articles %}
<div class="section">
<h2>{{ article.title }}</h2>
{% if article.image_url %}
<img src="{{ article.image_url }}" alt="{{ article.title }}" class="feature-image" style="margin: 15px 0;">
{% endif %}
<p>{{ article.summary }}</p>
<p>
<a href="{{ article.url }}" class="cta">Read More →</a>
</p>
</div>
{% endfor %}
<div class="section">
<h3>✨ This Month's Highlights</h3>
<ul>
{% for highlight in newsletter.highlights %}
<li>{{ highlight }}</li>
{% endfor %}
</ul>
</div>
{% if newsletter.upcoming_events | length > 0 %}
<div class="section">
<h3>📅 Upcoming Events</h3>
{% for event in newsletter.upcoming_events %}
<p>
<strong>{{ event.name }}</strong><br>
{{ event.date }} at {{ event.time }}<br>
<a href="{{ event.url }}">Register →</a>
</p>
{% endfor %}
</div>
{% endif %}
<div class="section" style="background-color: #f9f9f9;">
<h3>Got Feedback?</h3>
<p>We'd love to hear from you! Reply to this email with your thoughts, suggestions, or questions.</p>
</div>
<hr style="margin: 20px 0; border: none; border-top: 1px solid #ddd;">
<p style="font-size: 12px; color: #666;">
You're receiving this email because you're subscribed to {{ newsletter.name }}.<br>
<a href="{{ unsubscribe_url }}">Unsubscribe</a> | <a href="{{ preferences_url }}">Update Preferences</a><br>
© {{ year }} {{ company_name }}. All rights reserved.
</p>
</div>
</body>
</html>
"""
context = %{
"company_name" => "TechFlow",
"newsletter" => %{
"name" => "TechFlow Digest",
"title" => "TechFlow Digest - October 2024",
"month" => "October 2024",
"intro" => "Your monthly roundup of the latest updates, articles, and insights from the TechFlow community.",
"featured_articles" => [
%{
"title" => "Getting Started with Advanced Templating",
"summary" => "Learn how to leverage template directives for complex data transformations.",
"image_url" => "https://example.com/articles/templating.jpg",
"url" => "https://blog.example.com/templating"
},
%{
"title" => "Performance Tips for Large-Scale Systems",
"summary" => "Best practices for optimizing your applications for production workloads.",
"image_url" => "https://example.com/articles/performance.jpg",
"url" => "https://blog.example.com/performance"
}
],
"highlights" => [
"Version 2.0 is now available with 50+ new features",
"Join our community webinar on November 5th",
"Special 30% discount for annual plans until end of month"
],
"upcoming_events" => [
%{
"name" => "Advanced Workshop",
"date" => "November 5, 2024",
"time" => "2:00 PM EST",
"url" => "https://example.com/events/workshop"
},
%{
"name" => "Community Meetup",
"date" => "November 12, 2024",
"time" => "6:00 PM EST",
"url" => "https://example.com/events/meetup"
}
]
},
"subscriber" => %{"name" => "Diana"},
"year" => 2024,
"unsubscribe_url" => "https://example.com/unsubscribe?token=xyz",
"preferences_url" => "https://example.com/preferences?token=xyz"
}
{:ok, email_html} = Mau.render(template, context)Invitation Email
Invite users to join a team or event.
template = """
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; color: #333; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.invite-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 8px; text-align: center; margin: 20px 0; }
.button { background-color: white; color: #667eea; padding: 12px 30px; text-decoration: none; display: inline-block; border-radius: 4px; font-weight: bold; margin-top: 15px; }
</style>
</head>
<body>
<div class="container">
<h1>You're Invited!</h1>
<p>Hi {{ invited_user.name }},</p>
<p>{{ inviter.name }} has invited you to join <strong>{{ team_name }}</strong>{% if team_type %} as a {{ team_type }}{% endif %}.</p>
<div class="invite-card">
<h2>{{ team_name }}</h2>
<p>{{ team_description }}</p>
<a href="{{ invite_url }}" class="button">Accept Invitation</a>
</div>
<h3>About {{ team_name }}</h3>
<p>{{ team_details }}</p>
<h3>Team Members</h3>
<ul>
{% for member in team_members %}
<li>{{ member.name }} ({{ member.role }})</li>
{% endfor %}
</ul>
<h3>Next Steps</h3>
<ol>
<li>Click the accept button above</li>
<li>Set up your profile</li>
<li>Start collaborating with the team</li>
</ol>
<p>
This invitation will expire on <strong>{{ expiration_date }}</strong>. If you have any questions,
contact {{ inviter.name }} at <a href="mailto:{{ inviter.email }}">{{ inviter.email }}</a>.
</p>
<p>Best regards,<br>
The {{ platform_name }} Team</p>
</div>
</body>
</html>
"""
context = %{
"platform_name" => "CollabHub",
"invited_user" => %{"name" => "Emma"},
"inviter" => %{
"name" => "Frank",
"email" => "frank@example.com"
},
"team_name" => "Product Team",
"team_type" => "Product Manager",
"team_description" => "Building amazing products together",
"team_details" => "Our product team is responsible for creating innovative solutions for our users.",
"team_members" => [
%{"name" => "Frank", "role" => "Team Lead"},
%{"name" => "Grace", "role" => "Designer"},
%{"name" => "Henry", "role" => "Developer"}
],
"invite_url" => "https://example.com/accept-invite?token=abc123",
"expiration_date" => "2024-11-29"
}
{:ok, email_html} = Mau.render(template, context)See Also
- Report Generation - Data report examples
- Template Language Reference - Template language reference
- Filters Guide - Using filters for formatting