Customizing Your Invoice Template

What is an Invoice Template?

An invoice template is an HTML file that defines the design and layout of your invoice. You can fully customize it with your own branding, styles, and layout while using special placeholders to insert dynamic invoice data.

How Placeholders Work

Placeholders are special tags inside your HTML that get replaced automatically with your actual invoice data when generating the final invoice. For example:

<p>Invoice Number: [[invoice_number]]</p>

When rendered, this becomes:

<p>Invoice Number: INV-001</p>

Available Placeholders

Here is a complete list of supported placeholders you can use in your HTML template:

• [[invoice_number]] – Invoice number
• [[invoice_date]] – Invoice date (formatted)
• [[payment_due_date]] – Payment due date (formatted)
• [[customer_name]] – Customer's name
• [[customer_address]] – Customer's address
• [[customer_phone]] – Customer's phone
• [[customer_email]] – Customer's email
• [[org_name]] – Your organization name
• [[org_address]] – Your organization address
• [[org_phone]] – Your organization phone
• [[org_email]] – Your organization email
• [[itemtotal]] – Total of item prices before discount
• [[discount]] – Discount amount
• [[subtotal]] – Subtotal after discount
• [[tax_amount]] – Total tax amount
• [[roundoff]] – Round off value
• [[grand_total]] – Grand total amount
• [[grand_total_inwords]] – Grand total in words
• [[logo_small_src]] – Small logo image source URL
• [[logo_large_src]] – Large logo image source URL
• [[currency_symbol]] – Currency symbol (e.g. $ for USD, ₹ for INR)

Item Table Placeholders

For listing multiple items, use a special block between [[items_start]] and [[items_end]]. Your template should include a repeating row template like this:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>CGST</th>
      <th>SGST</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    [[items_start]]
    <tr>
      <td>[[item_name]]</td>
      <td>[[item_quantity]]</td>
      <td>[[item_price]]</td>
      <td>[[item_cgst]]</td>
      <td>[[item_sgst]]</td>
      <td>[[item_amount]]</td>
    </tr>
    [[items_end]]
  </tbody>
</table>
    

When generating the invoice, all items will be inserted between [[items_start]] and [[items_end]] using the row template inside.

Tips for Designing Your Template

• Use CSS to style your invoice as you like.
• Include your logo with [[logo_small_src]] or [[logo_large_src]].
• Keep the [[items_start]] and [[items_end]] block intact for item listing.
• Use base-64 encoded values if you want to use images in your template.
• Test your template by generating sample invoices.

Need Help?

If you have any questions about customizing your template or using placeholders, reach out to us at [email protected].