Skip to main content

​
What are HTML Invoice Templates?

HTML invoice templates are custom HTML documents that define your invoice layout. You write the HTML and CSS directly in AffZero’s template editor, place variable placeholders where live data should appear, and AffZero renders the HTML to PDF at generation time. This gives you complete control over the visual design — fonts, colors, logos, table layouts, and branding.

​
Creating an HTML Template

  1. Go to Invoices → Templates
  2. Click New Template
  3. Select HTML Template
  4. Enter a template name (for internal reference)
  5. Design your invoice in the HTML editor
  6. Click Save

​
Template Structure

A good invoice HTML template typically includes:
  • Header — your company logo, name, and contact info
  • Invoice metadata — invoice number, issue date, due date
  • Recipient block — affiliate name, address
  • Line items table — services rendered, amounts
  • Totals — subtotal, any deductions, final payout
  • Footer — payment instructions, notes

​
Using Variables

Place variable placeholders directly in the HTML using curly braces: 
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; color: #333; }
    .header { display: flex; justify-content: space-between; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background: #f5f5f5; }
  </style>
</head>
<body>
  <div class="header">
    <div>
      <h2>INVOICE</h2>
      <p>Invoice #: {invoice_number}</p>
      <p>Date: {invoice_date}</p>
    </div>
    <div>
      <p><strong>YourCompany Name</strong></p>
      <p>your@email.com</p>
    </div>
  </div>

  <h3>Bill To:</h3>
  <p>{affiliate_name_1_stats_1}</p>

  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Affiliate payout — {month_label}</td>
        <td>${payout_1_stats_1}</td>
      </tr>
    </tbody>
  </table>

  <p style="text-align: right; margin-top: 20px;">
    <strong>Total: ${payout_1_stats_1}</strong>
  </p>
</body>
</html>

​
Styling Tips

  • Use inline styles or a <style> block — some PDF renderers don’t support external stylesheets
  • Avoid web fonts loaded via URL for reliable PDF rendering; stick to system fonts or embed font definitions
  • Use pt or mm units rather than px for more predictable PDF sizing
  • Test with Run Now to see the actual PDF output before scheduling

​
Generate with AI

Click Generate with AI in the template editor to have AffZero AI draft an invoice HTML template for you. Describe the style and what fields you need: 
Create a professional invoice template with a clean minimal design. 
Include fields for invoice number, affiliate name, payout amount, 
revenue, and a due date. Use a teal accent color.
The AI produces a complete HTML template you can then customize.

​
Previewing a Template

After saving, click Preview on the template card to see a rendered preview with sample placeholder values. This lets you check the layout without running a full automation.

​
Editing a Template

Click on any template in the Invoices → Templates list to open the editor and make changes. Changes take effect on the next automation run — previously generated PDFs are not retroactively changed.