Lara Dashboard Lara Dashboard
/
main (default) 0.x

Email Templates

Learn how to create, customize, and manage email templates in LaraDashboard for transactional and marketing communications.

Email Templates

LaraDashboard provides a powerful email template system for creating beautiful transactional and marketing emails with a visual builder or code editor.

Overview

Email Template Features

  • Visual Builder - Drag-and-drop email design
  • Code Editor - Full HTML/Blade access
  • Variables - Dynamic content placeholders
  • Preview - Real-time preview across devices
  • Testing - Send test emails instantly
  • Versioning - Track template changes

Template Types

Type Purpose Examples
System Automated notifications Welcome, Password Reset
Transactional User-triggered emails Order Confirmation
Marketing Promotional content Newsletters, Campaigns
Custom Module-specific CRM, Custom workflows

Managing Templates

Accessing Templates

Navigate to Settings → Email → Templates

Template List

┌─────────────────────────────────────────────────────────────────┐
│  Email Templates                    [+ New Template] [Search]   │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Name                  Type         Status    Last Modified     │
│  ─────────────────────────────────────────────────────────────  │
│  Welcome Email         System       Active    Jan 15, 2024      │
│  Password Reset        System       Active    Jan 10, 2024      │
│  Email Verification    System       Active    Jan 8, 2024       │
│  Newsletter            Marketing    Draft     Jan 12, 2024      │
│  Order Confirmation    Transaction  Active    Jan 14, 2024      │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Creating Templates

Create New Template

  1. Click + New Template
  2. Enter template details:
Name: Order Confirmation
Slug: order-confirmation (auto-generated)
Type: Transactional
Subject: Your Order #{{order_number}} is Confirmed
  1. Choose editor type:
    • Visual Builder - Drag-and-drop design
    • Code Editor - HTML/Blade code

Visual Builder

The visual email builder provides:

┌─────────────────┬───────────────────────────────────────────────┐
│                 │                                               │
│  Block Library  │   Email Canvas                                │
│                 │                                               │
│  ├── Header     │   ┌─────────────────────────────────────┐    │
│  ├── Content    │   │      [LOGO]                         │    │
│  ├── Image      │   │      Your Order is Confirmed!       │    │
│  ├── Button     │   │                                     │    │
│  ├── Divider    │   │      Order #{{order_number}}        │    │
│  ├── Columns    │   │      Date: {{order_date}}           │    │
│  └── Footer     │   │                                     │    │
│                 │   │      [View Order Button]            │    │
│                 │   │                                     │    │
│                 │   │      Thanks for your purchase!      │    │
│                 │   └─────────────────────────────────────┘    │
│                 │                                               │
└─────────────────┴───────────────────────────────────────────────┘

Available Blocks

Block Description
Header Logo and navigation
Hero Large headline section
Text Rich text content
Image Single image
Button Call-to-action button
Columns Multi-column layout
Divider Horizontal separator
Spacer Vertical spacing
Social Social media links
Footer Footer with unsubscribe

Code Editor

For advanced customization:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ $subject }}</title>
</head>
<body>
    <div style="max-width: 600px; margin: 0 auto;">
        <h1>Welcome, {{ $user->name }}!</h1>

        <p>Thank you for joining {{ config('app.name') }}.</p>

        <a href="{{ $verificationUrl }}"
           style="background: #6366f1; color: white; padding: 12px 24px;">
            Verify Email
        </a>

        <p>If you didn't create this account, please ignore this email.</p>
    </div>
</body>
</html>

Template Variables

System Variables

Available in all templates:

Variable Description
{{app_name}} Application name
{{app_url}} Application URL
{{current_year}} Current year
{{support_email}} Support email address

User Variables

Available when user context exists:

Variable Description
{{user.name}} User's full name
{{user.first_name}} First name
{{user.last_name}} Last name
{{user.email}} Email address

Custom Variables

Define template-specific variables:

// In your notification or mail class
public function toMail($notifiable)
{
    return (new MailMessage)
        ->template('order-confirmation')
        ->with([
            'order_number' => $this->order->number,
            'order_total' => $this->order->formatted_total,
            'order_items' => $this->order->items,
        ]);
}

Use in template:

<p>Order #{{ $order_number }}</p>
<p>Total: {{ $order_total }}</p>

@foreach($order_items as $item)
    <p>{{ $item->name }} - {{ $item->price }}</p>
@endforeach

Styling Emails

Inline Styles

Email clients require inline styles:

<p style="color: #333333; font-size: 16px; line-height: 1.5;">
    Your content here
</p>

CSS Classes (Builder)

The visual builder handles inline conversion automatically:

<!-- Builder generates -->
<p class="text-body">Your content</p>

<!-- Converted to -->
<p style="color: #333333; font-size: 16px; line-height: 1.5;">
    Your content here
</p>

Responsive Design

Templates are mobile-responsive by default:

<style>
    @media screen and (max-width: 600px) {
        .container {
            width: 100% !important;
        }
        .column {
            display: block !important;
            width: 100% !important;
        }
    }
</style>

System Templates

Default System Templates

Template Trigger Variables
Welcome User registration user, login_url
Password Reset Reset request user, reset_url, expiry
Email Verification New registration user, verification_url
Password Changed Password update user

Customizing System Templates

  1. Navigate to the template
  2. Click Edit
  3. Customize design and content
  4. Keep required variables intact
  5. Save changes

Important: Don't remove required variables like {{reset_url}} from system templates.

Testing Templates

Preview Mode

  1. Open template editor
  2. Click Preview
  3. Toggle between desktop/mobile views
  4. Check all devices

Send Test Email

  1. Click Send Test
  2. Enter recipient email
  3. Optionally fill test variables
  4. Click Send
  5. Check inbox

Test Data

Provide sample data for testing:

{
    "user": {
        "name": "John Doe",
        "email": "john@example.com"
    },
    "order_number": "ORD-12345",
    "order_total": "$99.99"
}

Email Connections

Setting Default Connection

  1. Go to Settings → Email → Connections
  2. Click Set as Default on preferred connection
  3. All emails use this connection unless specified

Per-Template Connection

Override default for specific templates:

// In template settings or code
$this->connection = 'marketing-mailgun';

Fallback Configuration

If primary fails, use fallback:

// config/mail.php
'default' => env('MAIL_MAILER', 'smtp'),
'fallback' => env('MAIL_FALLBACK', 'log'),

Email Logs

Viewing Logs

Navigate to Settings → Email → Logs

┌─────────────────────────────────────────────────────────────────┐
│  Email Logs                                      [Filter] [Search]│
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  To              Subject          Status    Sent At             │
│  ─────────────────────────────────────────────────────────────  │
│  user@email.com  Welcome Email    ✓ Sent    Jan 15, 10:30 AM   │
│  test@test.com   Password Reset   ✓ Sent    Jan 15, 10:25 AM   │
│  john@doe.com    Order Confirm    ✗ Failed  Jan 15, 10:20 AM   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Log Details

Click on a log entry to see:

  • Full email content
  • Headers
  • Error message (if failed)
  • Retry option

Retrying Failed Emails

  1. Open failed email log
  2. Review error message
  3. Fix issue (e.g., invalid email)
  4. Click Retry

Best Practices

Design Guidelines

  1. Keep it Simple

    • Single column layouts work best
    • Clear hierarchy with headings
    • Minimal images for faster loading

  2. Mobile First

    • Test on mobile devices
    • Use large tap targets (44px minimum)
    • Readable font sizes (14px minimum)

  3. Consistent Branding

    • Use brand colors
    • Include logo
    • Maintain voice and tone

Content Tips

  1. Subject Lines

    • Keep under 50 characters
    • Personalize when possible
    • Create urgency or curiosity

  2. Body Content

    • Lead with most important info
    • Use short paragraphs
    • Include clear CTA

  3. Call to Action

    • Single primary CTA per email
    • Button text: action-oriented
    • High contrast colors

Deliverability

  1. Authentication

    • Set up SPF records
    • Configure DKIM
    • Enable DMARC

  2. List Hygiene

    • Include unsubscribe link
    • Honor opt-outs promptly
    • Remove bounced addresses

  3. Content Quality

    • Avoid spam trigger words
    • Balance text to image ratio
    • Test with spam checkers

Template API

Creating Templates Programmatically

use App\Models\EmailTemplate;

$template = EmailTemplate::create([
    'name' => 'Welcome Email',
    'slug' => 'welcome-email',
    'type' => 'system',
    'subject' => 'Welcome to {{app_name}}',
    'content' => '<html>...</html>',
    'design' => [...], // Builder JSON
    'is_active' => true,
]);

Using Templates in Code

use App\Mail\TemplateMail;

Mail::to($user)->send(
    new TemplateMail('welcome-email', [
        'user' => $user,
        'login_url' => route('login'),
    ])
);

Template Events

Hook into template events:

// In EventServiceProvider
EmailTemplate::created(function ($template) {
    Log::info("Template created: {$template->name}");
});

EmailTemplate::updated(function ($template) {
    Cache::forget("email-template.{$template->slug}");
});

Troubleshooting

Email Not Sending

  1. Check email connection settings
  2. Verify credentials
  3. Test with simple SMTP
  4. Check server allows outbound SMTP
  5. Review email logs for errors

Template Not Rendering

  1. Check for Blade syntax errors
  2. Verify all variables are passed
  3. Clear view cache: 
    php artisan view:clear

Images Not Displaying

  1. Use absolute URLs for images
  2. Host images on accessible server
  3. Check image file size (under 1MB)
  4. Verify URL is not blocked

Styling Issues

  1. Use inline styles
  2. Test across email clients
  3. Avoid CSS3 features
  4. Use tables for layout (legacy clients)

Next Steps

Edit this page on GitHub
/