Template

Templates

What Are Templates?

Templates are reusable email designs that let you maintain consistency and save time. Instead of creating a new design for every campaign, build a template once and use it repeatedly.

Benefits:

  • Consistency — Keep branding and design consistent across all emails
  • Speed — Save hours by reusing rather than redesigning
  • Maintenance — Update design once; changes apply to all emails using template
  • Personalization — Automatically insert subscriber names, emails, and other details
  • Compliance — Ensure unsubscribe and web view links always included

Common uses:

  • Monthly newsletters
  • Product announcement template
  • Promotional email template
  • Event notification template
  • Transactional email confirmation

Quick Start: Import Built-In Templates

Laravel Mail Platform includes a library of pre-built professional templates. Import them with one command:

php artisan app:import-templates

This downloads and imports all available templates to your workspace. You can then:

  • Use templates as-is
  • Customize them for your brand
  • Use as inspiration for custom templates

Accessing Templates

View All Templates

See all templates in your workspace:

  1. Click Templates in the sidebar
  2. You'll see a list of all your templates with:
  • Template name
  • Creation date
  • Last modified date
  • Edit/Duplicate/Delete options
  • How many campaigns use this template

Search Templates

Find templates by name:

  • Type in search box to filter
  • Partial matches work
  • Real-time filtering

Creating Templates

Manual Creation (From Scratch)

Build a custom template:

  1. Go to Templates
  2. Click + New Template
  3. Fill in template details:
  • Name — Clear, descriptive name (e.g., "Newsletter Template", "Product Launch")
  • Content — HTML email design
  1. Include the required {{content}} placeholder
  2. Click Save

Template Basics

Every template needs:

1. Valid HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Email</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .header { background: #333; color: white; }
    </style>
</head>
<body>
    <!-- Template content here -->
</body>
</html>

2. Required {{content}} Placeholder This marks where your campaign message will be inserted:

<div class="content-area">
    {{content}}
</div>

When you send a campaign using this template, the campaign's message replaces {{content}}.

Basic Template Example

Here's a complete minimal template:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f0f0f0;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
        }
        .header {
            border-bottom: 2px solid #007bff;
            margin-bottom: 20px;
        }
        .footer {
            border-top: 1px solid #ddd;
            margin-top: 20px;
            padding-top: 10px;
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>My Newsletter</h1>
        </div>

        <!-- Campaign content will appear here -->
        <div class="content">
            {{content}}
        </div>

        <div class="footer">
            <p>Email: {{email}}</p>
            <p>
                <a href="{{unsubscribe_url}}">Unsubscribe</a> |
                <a href="{{webview_url}}">View in Browser</a>
            </p>
        </div>
    </div>
</body>
</html>

Personalizing Templates with Tags

Available Personalization Tags

Use these tags to automatically insert subscriber information:

Tag Inserts Example
{{content}} Campaign message (Required in every template)
{{email}} Subscriber's email john@example.com
{{first_name}} Subscriber's first name John
{{last_name}} Subscriber's last name Smith
{{unsubscribe_url}} Unsubscribe link URL https://example.com/unsubscribe/abc123
{{webview_url}} View in browser URL https://example.com/webview/def456

Tag Syntax

Tags use double curly braces: {{ tag_name }}

Spacing is flexible—these are equivalent:

{{email}}
{{ email }}
{{  email  }}

Using Personalization Tags

In your template HTML:

<!-- Greeting with subscriber's name -->
<p>Hello {{first_name}},</p>

<!-- Contact info -->
<p>We have your email on file as: {{email}}</p>

<!-- Personalized subject example -->
<h1>Hi {{first_name}}, here's what's new this month</h1>

<!-- Full name -->
<p>Dear {{first_name}} {{last_name}},</p>

Handling Missing Data

If a subscriber doesn't have a first name, {{first_name}} displays empty. Handle this gracefully:

Option 1: Use fallback text

<p>Hello {{first_name}},</p>
<!-- If no first name, shows: "Hello ," -->

Option 2: Provide default

<p>Hello {{first_name|Valued Subscriber}},</p>
<!-- If no first name, shows: "Hello Valued Subscriber," -->

Option 3: Only use reliable data

<p>Hello {{email}},</p>
<!-- Everyone has email, so this always works -->

Personalization Example Template

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; }
    </style>
</head>
<body>
    <h1>Welcome, {{first_name}}!</h1>

    <p>Hi {{first_name}} {{last_name}},</p>
    <p>We're excited to have you on our mailing list.</p>

    {{content}}

    <hr>
    <p>Questions? Reply to this email.</p>
    <p><a href="{{unsubscribe_url}}">Unsubscribe from these emails</a></p>
</body>
</html>

URL Tags: Creating Links

{{unsubscribe_url}} — Let Subscribers Opt Out

Generates unique unsubscribe URL for each subscriber. Important: You must create the HTML link yourself.

Correct usage (creates clickable link):

<a href="{{unsubscribe_url}}">Unsubscribe from this list</a>

Renders as: Unsubscribe from this list

Incorrect usage (just shows URL as text):

{{unsubscribe_url}}

Renders as: https://example.com/unsubscribe/abc123xyz ← plain text, not clickable

{{webview_url}} — View in Browser

Generates unique URL to view email in web browser. Useful for subscribers whose email client doesn't render well, or they want to share the email.

Correct usage:

<p><a href="{{webview_url}}">View this email in your browser</a></p>

Renders as: View this email in your browser

Incomplete usage (just URL):

{{webview_url}}

Shows URL as plain text, not clickable.

Complete Link Footer Example

<footer style="border-top: 1px solid #ddd; margin-top: 30px; padding-top: 20px;">
    <p style="font-size: 12px; color: #666;">
        © 2024 My Company. All rights reserved.
    </p>
    <p style="font-size: 12px; color: #666;">
        <a href="{{webview_url}}">View in Browser</a> |
        <a href="{{unsubscribe_url}}">Unsubscribe</a> |
        <a href="https://example.com/privacy">Privacy Policy</a>
    </p>
</footer>

Styling Templates with CSS

CSS in Email Templates

Email clients have limited CSS support compared to web browsers. Laravel Mail Platform handles this by inlining CSS automatically.

What this means:

  • Write normal CSS in <style> tags
  • System converts to inline style attributes
  • Ensures compatibility with email clients
  • No need to manually write inline styles

CSS Strategy

Use this approach:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        .button {
            display: inline-block;
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Newsletter</h1>

        {{content}}

        <p>
            <a class="button" href="https://example.com">Learn More</a>
        </p>
    </div>
</body>
</html>

When sent, CSS gets automatically converted to inline styles:

<!DOCTYPE html>
<html>
<body>
    <div style="max-width: 600px; margin: 0 auto; background-color: white; padding: 20px;">
        <h1 style="color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px;">
            Newsletter
        </h1>

        [campaign content]

        <p>
            <a style="display: inline-block; background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;" href="https://example.com">Learn More</a>
        </p>
    </div>
</body>
</html>

CSS Best Practices for Email

✅ Do:

  • Use inline styles for critical styling
  • Use embedded <style> tags for common styles
  • Test in major email clients (Gmail, Outlook, Apple Mail)
  • Keep colors simple and web-safe
  • Use max-width on container for mobile

❌ Don't:

  • Use external stylesheets (email clients ignore them)
  • Use complex layouts (email HTML is basic)
  • Use media queries (limited support)
  • Use JavaScript (email clients don't execute it)
  • Use background images in some clients (use color instead)

CSS to Avoid in Emails

Some CSS doesn't work in email clients:

<!-- ❌ Don't use: won't work in many email clients -->
<style>
    @media (max-width: 600px) { /* Limited support */ }
    @font-face { /* Font import limited support */ }
    .btn::before { /* Pseudo-elements unreliable */ }
</style>

Workaround:

  • Use tables for layout (old but reliable)
  • Use simple CSS that works everywhere
  • Test with email client previews

Editing Templates

Update Template Content

Modify a template:

  1. Go to Templates
  2. Find your template in the list
  3. Click Edit
  4. Make changes to HTML content
  5. Click Save

What happens when you edit:

  • Template content is updated
  • All future campaigns using this template use updated design
  • Previously sent campaigns are NOT changed
  • Campaigns in draft using this template see changes

Rename Template

Change template name:

  1. Click Edit on template
  2. Change the Name field
  3. Click Save
  4. New name appears everywhere

Preview Template

See how template looks:

  1. Click Edit on template
  2. Look for Preview button
  3. Shows template with sample data (example names, emails)
  4. Verify layout and styling

Managing Templates

Duplicate Template

Create a copy to modify:

  1. Go to Templates
  2. Click Duplicate on template you want to copy
  3. New template created with same content
  4. Automatically named: "Original Name (Copy)"
  5. Edit the copy as needed

Use case: Start with existing template and create variations for different campaign types

Delete Template

Remove unused template:

  1. Go to Templates
  2. Find template to delete
  3. Click Delete
  4. Confirm deletion

Important:

  • Deleting template does NOT affect sent campaigns
  • Campaigns already using template keep working
  • Delete only safe if template not actively used

Check Template Usage

Before deleting, see which campaigns use template:

  1. Click Edit on template
  2. Look for "Used in X campaigns" section
  3. See list of campaigns using this template
  4. Decide if safe to delete

Using Templates in Campaigns

Select Template When Creating Campaign

  1. Go to Campaigns → New Campaign
  2. Under Template section, choose from dropdown
  3. Template's design loads
  4. Fill in:
  • Campaign name
  • Subject line
  • Campaign content (replaces {{content}})
  1. Send campaign

Without Template

You can also create campaigns without template:

  1. Don't select a template
  2. Write campaign HTML directly
  3. Still include personalization tags if desired

Template vs. Custom Content

Aspect Template Custom
Design Pre-made Write own HTML
Consistency Guaranteed Your responsibility
Speed Faster Slower
Personalization Included Add manually
Best for Regular campaigns One-off emails

Advanced Template Techniques

Responsive Email Design

Make templates work on all screen sizes:

<style>
    .container {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }
    .column {
        display: block;
        width: 100%;
    }
    @media (min-width: 600px) {
        .two-column {
            display: table;
        }
        .column {
            display: table-cell;
            width: 50%;
        }
    }
</style>

<div class="two-column">
    <div class="column">Left side content</div>
    <div class="column">Right side content</div>
</div>

Conditionally Show Content

Show different content based on subscriber data:

<!-- Show specific text if subscriber has first name -->
<h1>
    {{#if first_name}}
    Welcome back, {{first_name}}!
    {{else}}
    Welcome to our newsletter!
    {{/if}}
</h1>

(Syntax depends on Laravel Mail Platform version)

Brand Color Variables

Use consistent branding:

<style>
    .primary-color { color: #007bff; }
    .primary-bg { background-color: #007bff; }
    .button {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
    }
</style>

Then use throughout template.

Troubleshooting Templates

"Content tag not found"

Problem: Template saved without {{content}}

Error message: "Template must include {{content}} placeholder"

Solution:

  • Add {{content}} to your template
  • This marks where campaign message appears

"CSS not working in email"

Problem: Styles look fine in preview but wrong in email client

Causes:

  • Email client doesn't support certain CSS
  • External stylesheets were used (they get ignored)
  • Complex selectors not supported

Solution:

  • Use simple, inline-compatible CSS
  • Avoid external stylesheets
  • Use tables for complex layouts
  • Test in actual email clients

"Personalization tags showing as plain text"

Problem: {{email}} appears in email as literal text instead of subscriber's email

Causes:

  • Tags used outside of template
  • Email client doesn't support (unlikely)
  • System didn't process tags

Solution:

  • Verify tags are in template (not campaign content)
  • Use exact syntax: {{tag_name}}
  • Check spelling of tag name

"Unsubscribe link not clickable"

Problem: Unsubscribe link shows URL as text, not clickable

Cause: Forgot to create <a> tag around URL

Wrong:

{{unsubscribe_url}}

Correct:

<a href="{{unsubscribe_url}}">Unsubscribe</a>

"Template looks broken in some email clients"

Problem: Template renders fine in Gmail but broken in Outlook

Causes:

  • CSS incompatibility
  • HTML structure too complex
  • Used unsupported HTML

Solution:

  • Test in preview of different clients
  • Simplify layout
  • Use fallback styling
  • Use tables instead of divs for layout

Template Best Practices

Design Principles

✅ Do:

  • Keep width under 600px (best for most clients)
  • Use web-safe fonts (Arial, Helvetica, Georgia, Times)
  • Include clear call-to-action buttons
  • Test in multiple email clients
  • Use responsive design
  • Include alt text for images

❌ Don't:

  • Use embedded fonts (not supported)
  • Use JavaScript (email clients don't run it)
  • Use video (not supported)
  • Use forms (not supported)
  • Rely on CSS (use tables as backup)
  • Use background images (unreliable)

Compliance & Accessibility

  • Include clear unsubscribe link
  • Add web view link
  • Use high contrast colors (for readability)
  • Include alt text for images
  • Use semantic HTML (<h1>, <p>, etc.)
  • Avoid image-only content

Performance

  • Keep HTML under 100KB
  • Compress images
  • Use simple layouts
  • Avoid unnecessary code
  • Test file size before sending

Naming Templates

Create clear, descriptive names:

✅ Good names:

  • Newsletter - Monthly
  • Product Launch
  • Customer Welcome
  • Event Announcement

❌ Poor names:

  • email1
  • template
  • test
  • something

Template Examples

Simple Newsletter

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; margin: 0; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: #2c3e50; color: white; padding: 20px; text-align: center; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Monthly Newsletter</h1>
        </div>
        {{content}}
    </div>
</body>
</html>

Promotional Email

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; margin: 0; }
        .container { max-width: 600px; margin: 0 auto; }
        .button {
            display: inline-block;
            background: #e74c3c;
            color: white;
            padding: 15px 40px;
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Special Offer, {{first_name}}!</h1>
        {{content}}
        <p>
            <a class="button" href="https://example.com/offer">Claim Your Discount</a>
        </p>
    </div>
</body>
</html>

Branded Newsletter with Footer

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; color: #333; }
        .container { max-width: 600px; margin: 0 auto; }
        .header { background: #007bff; color: white; padding: 20px; }
        .footer { background: #f8f9fa; border-top: 1px solid #ddd; padding: 15px; text-align: center; font-size: 12px; color: #666; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>My Company Newsletter</h1>
            <p>{{first_name}} {{last_name}}</p>
        </div>
        <div style="padding: 20px;">
            {{content}}
        </div>
        <div class="footer">
            <p><a href="{{webview_url}}">View in Browser</a> | <a href="{{unsubscribe_url}}">Unsubscribe</a></p>
            <p>© 2024 My Company. All rights reserved.</p>
        </div>
    </div>
</body>
</html>

Related Documentation

Quick Reference

Required Elements:

  • Valid HTML
  • {{content}} placeholder

Personalization Tags:

  • {{email}} — Subscriber email
  • {{first_name}} — Subscriber first name
  • {{last_name}} — Subscriber last name
  • {{unsubscribe_url}} — Unsubscribe link
  • {{webview_url}} — View in browser link

URL Tags (Remember):

  • Generate URL only (not clickable link)
  • Must wrap in <a href=""> tag to make clickable
  • Example: <a href="{{unsubscribe_url}}">Unsubscribe</a>

CSS:

  • Automatically inlined by system
  • Write normal CSS; system converts
  • Inline styles retained
  • Embedded styles added to inline

Best Practices:

  • Max width 600px
  • Use web-safe fonts
  • Include unsubscribe link
  • Test in preview
  • Use responsive design
  • Keep under 100KB