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].