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

Type	Description	Typical Use
welcome	Welcome message with feature highlights and onboarding guide	New user onboarding
promotional	Promotional campaign with product showcase and discount codes	Marketing campaigns, holiday sales
password_reset	Clean, secure password reset link	Security transactional emails
notification	General notification with customizable title and content	System alerts, status updates
order_confirmation	Order confirmation with item list and price summary	E-commerce transaction confirmations

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": "[email protected]",
    "extra_links": [
      {"text": "Website", "url": "https://example.com"}
    ]
  }
}