Documentation

Template Creation Guide

This comprehensive guide will help you create email and PDF templates that work reliably across all platforms and clients. Follow these best practices to ensure maximum compatibility and professional results.

Quick Start: New to template creation? Start with the Email Templates section for the basics, then move to PDF Templates for advanced document generation.

Creating HTML Email Templates

Email templates require special considerations due to the varying support for HTML and CSS across different email clients. Follow these guidelines for maximum compatibility.

Email Template Best Practices

Do's
  • Use HTML tables for layout
  • Inline all CSS styles
  • Set width to 600-800px
  • Use web-safe fonts
  • Include alt text for images
  • Test across multiple clients
Don'ts
  • Don't use CSS Grid or Flexbox
  • Don't use external stylesheets
  • Don't use JavaScript or Flash
  • Don't use complex CSS selectors
  • Don't rely on web fonts
  • Don't use absolute positioning

Email Template Structure

Here's the recommended structure for a compatible email template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Email Subject</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f4;">
        <tr>
            <td align="center" style="padding: 20px 0;">
                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <!-- Header -->
                    <tr>
                        <td style="padding: 30px; text-align: center; background-color: #2563eb; color: #ffffff;">
                            <h1 style="margin: 0; font-size: 28px; font-weight: bold;">{{company_name}}</h1>
                        </td>
                    </tr>
                    <!-- Content -->
                    <tr>
                        <td style="padding: 30px;">
                            <h2 style="color: #1f2937; margin-top: 0;">Hello {{first_name}},</h2>
                            <p style="color: #4b5563; line-height: 1.6; margin-bottom: 20px;">
                                Your personalized content goes here. Use merge fields like {{first_name}}, {{last_name}}, {{email}} to personalize your emails.
                            </p>
                        </td>
                    </tr>
                    <!-- Footer -->
                    <tr>
                        <td style="padding: 20px 30px; background-color: #f9fafb; text-align: center; color: #6b7280; font-size: 14px;">
                            <p style="margin: 0;">© 2024 {{company_name}}. All rights reserved.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Supported CSS Properties for Email

Email clients have limited CSS support. Here are the properties that work reliably:

Property Supported Values Notes
font-family Arial, Helvetica, Times New Roman, Georgia, Verdana Use web-safe fonts only
font-size px, em, % px is most reliable
font-weight normal, bold Avoid numeric values
color hex (#000000), rgb(), named colors Hex values are most reliable
background-color hex (#ffffff), rgb(), named colors Works on table cells and inline elements
text-align left, center, right, justify Works on table cells
padding px, em Use table cell padding for layout
border 1px solid #color Simple borders work best

Email Template Examples

Simple Newsletter Template

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Newsletter</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif;">
    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f9fa;">
        <tr>
            <td align="center" style="padding: 40px 20px;">
                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border: 1px solid #e5e7eb;">
                    <!-- Header -->
                    <tr>
                        <td style="padding: 30px; text-align: center; background-color: #2563eb;">
                            <h1 style="margin: 0; color: #ffffff; font-size: 24px;">{{company_name}} Newsletter</h1>
                        </td>
                    </tr>
                    <!-- Content -->
                    <tr>
                        <td style="padding: 30px;">
                            <h2 style="color: #1f2937; margin-top: 0;">Hello {{first_name}}!</h2>
                            <p style="color: #4b5563; line-height: 1.6;">
                                Thank you for subscribing to our newsletter. Here's what's new this month:
                            </p>
                            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 20px 0;">
                                <tr>
                                    <td style="padding: 15px; background-color: #f3f4f6; border-left: 4px solid #2563eb;">
                                        <h3 style="margin: 0 0 10px 0; color: #1f2937;">Featured Article</h3>
                                        <p style="margin: 0; color: #4b5563;">{{featured_article_title}}</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Footer -->
                    <tr>
                        <td style="padding: 20px 30px; background-color: #f9fafb; text-align: center;">
                            <p style="margin: 0; color: #6b7280; font-size: 14px;">
                                © 2024 {{company_name}}. <a href="{{unsubscribe_url}}" style="color: #2563eb;">Unsubscribe</a>
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Creating PDF Templates with TCPDF

PDF templates in MergeDesk use TCPDF to convert HTML content into PDF documents. TCPDF supports a subset of HTML and CSS, so it's important to follow these guidelines for reliable rendering.

TCPDF HTML Support

TCPDF's writeHTML() method supports the following HTML elements and CSS properties:

Supported HTML Tags

  • <h1> to <h6> - Headings
  • <p> - Paragraphs
  • <div> - Block containers
  • <span> - Inline containers
  • <strong>, <b> - Bold text
  • <em>, <i> - Italic text
  • <u> - Underlined text
  • <br> - Line breaks
  • <hr> - Horizontal rules
  • <table>, <tr>, <td> - Tables
  • <ul>, <ol>, <li> - Lists
  • <img> - Images

Supported CSS Properties

  • font-family - Font selection
  • font-size - Font size (pt, px, em)
  • font-weight - Bold/normal
  • color - Text color
  • background-color - Background color
  • text-align - Text alignment
  • margin - Margins
  • padding - Padding
  • border - Simple borders
  • width, height - Dimensions

PDF Template Best Practices

Important: TCPDF has limited CSS support compared to web browsers. Keep your HTML and CSS simple for best results.
Do's
  • Use simple HTML structure
  • Inline CSS styles
  • Use absolute paths for images
  • Set explicit dimensions
  • Use standard fonts
  • Test with sample data
Don'ts
  • Don't use complex CSS layouts
  • Don't use external stylesheets
  • Don't use relative image paths
  • Don't use CSS Grid or Flexbox
  • Don't use web fonts
  • Don't use JavaScript

PDF Template Structure

Here's the recommended structure for a TCPDF-compatible template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; font-size: 12pt; margin: 0; padding: 20px; }
        .header { background-color: #2563eb; color: white; padding: 20px; text-align: center; }
        .content { padding: 20px; }
        .footer { background-color: #f3f4f6; padding: 15px; text-align: center; font-size: 10pt; }
        .section { margin-bottom: 20px; }
        .field-label { font-weight: bold; color: #374151; }
        .field-value { margin-bottom: 10px; }
        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
        th, td { border: 1px solid #d1d5db; padding: 8px; text-align: left; }
        th { background-color: #f9fafb; font-weight: bold; }
    </style>
</head>
<body>
    <div class="header">
        <h1>{{company_name}}</h1>
        <p>Document Generated on {{current_date}}</p>
    </div>
    
    <div class="content">
        <div class="section">
            <h2>Customer Information</h2>
            <div class="field-label">Name:</div>
            <div class="field-value">{{first_name}} {{last_name}}</div>
            
            <div class="field-label">Email:</div>
            <div class="field-value">{{email}}</div>
            
            <div class="field-label">Phone:</div>
            <div class="field-value">{{phone}}</div>
        </div>
        
        <div class="section">
            <h2>Order Details</h2>
            <table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{product_name}}</td>
                        <td>{{quantity}}</td>
                        <td>${{unit_price}}</td>
                        <td>${{total_price}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="footer">
        <p>© 2024 {{company_name}}. All rights reserved.</p>
        <p>Generated by MergeDesk</p>
    </div>
</body>
</html>

PDF Template Examples

Invoice Template

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; font-size: 11pt; margin: 0; padding: 20px; }
        .header { border-bottom: 2px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px; }
        .company-info { float: left; width: 50%; }
        .invoice-info { float: right; width: 45%; text-align: right; }
        .clear { clear: both; }
        .billing-section { margin: 30px 0; }
        .billing-left { float: left; width: 48%; }
        .billing-right { float: right; width: 48%; }
        .items-table { width: 100%; border-collapse: collapse; margin: 30px 0; }
        .items-table th, .items-table td { border: 1px solid #d1d5db; padding: 10px; text-align: left; }
        .items-table th { background-color: #f3f4f6; font-weight: bold; }
        .items-table .number { text-align: right; }
        .total-section { margin-top: 30px; }
        .total-row { margin: 5px 0; }
        .total-label { display: inline-block; width: 200px; font-weight: bold; }
        .total-value { text-align: right; }
        .grand-total { font-size: 14pt; font-weight: bold; border-top: 2px solid #2563eb; padding-top: 10px; }
    </style>
</head>
<body>
    <div class="header">
        <div class="company-info">
            <h1 style="margin: 0; color: #2563eb;">{{company_name}}</h1>
            <p style="margin: 5px 0; color: #6b7280;">{{company_address}}</p>
            <p style="margin: 5px 0; color: #6b7280;">{{company_phone}}</p>
        </div>
        <div class="invoice-info">
            <h2 style="margin: 0; color: #1f2937;">INVOICE</h2>
            <p style="margin: 5px 0;"><strong>Invoice #:</strong> {{invoice_number}}</p>
            <p style="margin: 5px 0;"><strong>Date:</strong> {{invoice_date}}</p>
            <p style="margin: 5px 0;"><strong>Due Date:</strong> {{due_date}}</p>
        </div>
        <div class="clear"></div>
    </div>
    
    <div class="billing-section">
        <div class="billing-left">
            <h3 style="margin-top: 0; color: #374151;">Bill To:</h3>
            <p style="margin: 5px 0;">{{customer_name}}</p>
            <p style="margin: 5px 0;">{{customer_address}}</p>
            <p style="margin: 5px 0;">{{customer_phone}}</p>
        </div>
        <div class="billing-right">
            <h3 style="margin-top: 0; color: #374151;">Ship To:</h3>
            <p style="margin: 5px 0;">{{shipping_name}}</p>
            <p style="margin: 5px 0;">{{shipping_address}}</p>
        </div>
        <div class="clear"></div>
    </div>
    
    <table class="items-table">
        <thead>
            <tr>
                <th>Description</th>
                <th class="number">Quantity</th>
                <th class="number">Unit Price</th>
                <th class="number">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{item_description}}</td>
                <td class="number">{{item_quantity}}</td>
                <td class="number">${{item_unit_price}}</td>
                <td class="number">${{item_total}}</td>
            </tr>
        </tbody>
    </table>
    
    <div class="total-section">
        <div class="total-row">
            <span class="total-label">Subtotal:</span>
            <span class="total-value">${{subtotal}}</span>
        </div>
        <div class="total-row">
            <span class="total-label">Tax ({{tax_rate}}%):</span>
            <span class="total-value">${{tax_amount}}</span>
        </div>
        <div class="total-row grand-total">
            <span class="total-label">Total:</span>
            <span class="total-value">${{grand_total}}</span>
        </div>
    </div>
    
    <div style="margin-top: 50px; padding-top: 20px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 10pt;">
        <p>Thank you for your business!</p>
        <p>© 2024 {{company_name}}. All rights reserved.</p>
    </div>
</body>
</html>

Compatibility Testing

Email Client Testing Checklist

Email Client Desktop Mobile Notes
Gmail ✅ ✅ Good HTML support, strips some CSS
Outlook (Desktop) ⚠️ N/A Uses Word rendering engine, limited CSS
Outlook (Web) ✅ ✅ Better support than desktop version
Apple Mail ✅ ✅ Good HTML and CSS support
Yahoo Mail ✅ ✅ Decent HTML support
Thunderbird ✅ N/A Good HTML support

PDF Testing Checklist

  • ✅ Layout: Check that all elements appear in correct positions
  • ✅ Fonts: Verify all text renders with correct fonts
  • ✅ Images: Ensure all images display properly
  • ✅ Tables: Check table borders and alignment
  • ✅ Colors: Verify background and text colors
  • ✅ Page Breaks: Test with long content
  • ✅ Merge Fields: Test with sample data

Common Issues and Solutions

Email Template Issues

Images not displaying

Problem: Images appear as broken or don't load.

Solution: Use absolute URLs for images, include alt text, and host images on a reliable server.

Layout broken in Outlook

Problem: Email looks different in Outlook desktop.

Solution: Use table-based layouts, avoid CSS positioning, and test with Outlook-specific CSS.

Fonts not rendering

Problem: Custom fonts don't display correctly.

Solution: Use web-safe fonts like Arial, Helvetica, Times New Roman, or Georgia.

PDF Template Issues

Images not appearing

Problem: Images don't show in PDF output.

Solution: Use absolute file paths, ensure images are in supported formats (JPEG, PNG), and check file permissions.

CSS not applying

Problem: Styles don't render in PDF.

Solution: Use inline CSS, stick to supported properties, and avoid complex selectors.

Page breaks in wrong places

Problem: Content breaks awkwardly across pages.

Solution: Use CSS page-break properties, adjust content length, and test with various data sets.

Best Practices Summary

Email Templates
  1. Use table-based layouts
  2. Inline all CSS styles
  3. Keep width between 600-800px
  4. Use web-safe fonts
  5. Include alt text for images
  6. Test across multiple clients
  7. Avoid JavaScript and Flash
  8. Use absolute URLs for images
PDF Templates
  1. Use simple HTML structure
  2. Inline CSS styles
  3. Use absolute paths for images
  4. Set explicit dimensions
  5. Use standard fonts
  6. Test with sample data
  7. Avoid complex CSS layouts
  8. Check page breaks
Need Help? If you're having trouble with template creation, check our How-To Guide for step-by-step instructions, or contact our support team for assistance.