HTML Mailer Builder

HTML Mailer Builder

Generate professional HTML email templates fully compatible with Gmail, Outlook, Apple Mail, and other major email clients. Uses table layout + inline CSS to ensure consistent rendering across all clients, with media query-based responsive design for mobile devices.

Use Cases

• Welcome emails for new users (Welcome)
• Promotional / limited-time discount emails (Promotional)
• Password reset / security verification emails (Password Reset)
• System notification emails (Notification)
• Order confirmation emails (Order Confirmation)

Supported Template Types

Workflow

Step 1: Gather User Requirements

Collect the following information from the user:

1. Email type: Welcome? Promotional? Password reset? Notification? Order confirmation?
2. Brand info: Company name, primary color, logo URL
3. Content details: Required fields vary by template type (see details below)
4. Language preference: Language for the email content

Step 2: Generate Configuration File

Create a JSON configuration file based on user requirements. Configuration structures differ by template type.

Common Fields (shared by all types)

{
  "template_type": "welcome",
  "theme": {
    "primary_color": "#4A90D9",
    "secondary_color": "#2C5282",
    "accent_color": "#ED8936",
    "bg_color": "#F7FAFC",
    "content_bg_color": "#FFFFFF",
    "text_color": "#2D3748",
    "muted_text_color": "#718096",
    "font_family": "Arial, Helvetica, sans-serif",
    "max_width": 600,
    "border_radius": 8
  },
  "header": {
    "logo_url": "",
    "logo_alt": "Company Logo",
    "company_name": "MyCompany"
  },
  "preheader": "Preview text shown in the inbox",
  "footer": {
    "company": "MyCompany Inc.",
    "address": "123 Main Street, San Francisco, CA 94102",
    "unsubscribe_url": "#",
    "support_email": "support@example.com",
    "extra_links": [
      {"text": "Website", "url": "https://example.com"}
    ]
  }
}

Welcome Template Content Fields

{
  "content": {
    "user_name": "John",
    "greeting": "Welcome to MyCompany!",
    "message": "Thanks for signing up. Here are some features to help you get started.",
    "cta_text": "Get Started",
    "cta_url": "https://example.com/get-started",
    "features": [
      {"icon": "📊", "title": "Dashboard", "description": "View key metrics in real time"},
      {"icon": "🤝", "title": "Team Collaboration", "description": "Invite team members to work together"},
      {"icon": "🔔", "title": "Smart Alerts", "description": "Get notified about important events automatically"}
    ]
  }
}

Promotional Template Content Fields

{
  "content": {
    "headline": "Summer Sale — Up to 50% Off",
    "sub_headline": "Limited-time offer, don't miss out",
    "hero_image_url": "https://placehold.co/600x300/EEE/333?text=Sale+Banner",
    "products": [
      {
        "name": "Classic T-Shirt",
        "image_url": "https://placehold.co/200x200/EEE/333?text=T-Shirt",
        "original_price": "$39.99",
        "sale_price": "$19.99",
        "url": "https://example.com/product/1"
      }
    ],
    "offer_code": "SUMMER50",
    "offer_expires": "2026-06-30",
    "cta_text": "Shop Now",
    "cta_url": "https://example.com/sale"
  }
}

Password Reset Template Content Fields

{
  "content": {
    "user_name": "John",
    "message": "We received a request to reset your account password. If you didn't make this request, you can safely ignore this email.",
    "reset_url": "https://example.com/reset?token=abc123",
    "cta_text": "Reset Password",
    "expires_in": "24 hours",
    "support_email": "support@example.com"
  }
}

Notification Template Content Fields

{
  "content": {
    "title": "Your Report Is Ready",
    "message": "The monthly data report you requested is now available. Click the button below to view it.",
    "details": [
      {"label": "Report Type", "value": "Monthly Data Summary"},
      {"label": "Generated At", "value": "2026-04-14 10:00"},
      {"label": "Data Range", "value": "2026-03-01 ~ 2026-03-31"}
    ],
    "cta_text": "View Report",
    "cta_url": "https://example.com/reports/202603"
  }
}

Order Confirmation Template Content Fields

{
  "content": {
    "user_name": "John",
    "order_number": "ORD-20260414-001",
    "order_date": "2026-04-14",
    "items": [
      {"name": "Wireless Bluetooth Earbuds", "quantity": 1, "price": "$39.99"},
      {"name": "Phone Case", "quantity": 2, "price": "$9.99"}
    ],
    "subtotal": "$59.97",
    "shipping": "$0.00",
    "total": "$59.97",
    "shipping_address": "123 Main Street, San Francisco, CA 94102",
    "cta_text": "View Order",
    "cta_url": "https://example.com/orders/ORD-20260414-001"
  }
}

Step 3: Generate HTML

After writing the configuration to a JSON file, run the generation script:

python scripts/generate_email_template.py --input config.json --output email.html

Step 4: Delivery

1. Provide the user with the generated HTML file path
2. Suggest opening it in a browser for preview
3. Remind the user to replace placeholder images and links with actual content

Email Compatibility Notes

The generated HTML follows these email compatibility best practices:

• Table layout: All structure uses <table> instead of <div> for Outlook compatibility
• Inline CSS: All core styles are applied via inline style attributes
• Responsive design: Mobile adaptation via @media queries in <style> tags (supports Gmail/Apple Mail/iOS)
• Web-safe fonts: Defaults to Arial/Helvetica with no custom font dependencies
• Fixed width + fluid fallback: Email body is 600px wide, scaling to 100% on mobile
• MSO conditional comments: Includes Outlook-specific conditional comments for correct rendering
• Background color compatibility: Uses both bgcolor attributes and background-color styles
• Image handling: All images have explicit width and alt text
• Preheader text: Supports inbox preview text configuration
• VML buttons: CTA buttons use VML-compatible markup for rounded buttons in Outlook

Important Notes

• Images must use external URLs (emails do not support base64-embedded images or relative paths)
• If the user has no images, use https://placehold.co/600x300/EEE/333?text=Your+Image as a placeholder
• The generated HTML can be pasted directly into email marketing tools (Mailchimp, SendGrid, etc.)
• Security emails like password reset should be kept clean and minimal, avoiding excessive decorative elements