Custom Invoice Templates
A custom invoice template is an HTML document with some special placeholders that get filled in with the generated data. Using Klok you can generate a basic one. From there you can open your template file and modify the HTML as needed to get the look you want. Once you have a template, you must save it to the correct location.
The global placeholders available in the template are as follows.
| Variable | Description |
|---|---|
| {{date}} | The current date |
| {{to}} | The name of the recipient |
| {{to_contact_email}} | The recipient's email address |
| {{to_contact_phone}} | The recipient's phone number |
| {{description}} | This will be replaced by "Invoice for services tendered between [invoice start date] and [invoice end date]" |
| {{invoice_number}} | The invoice number |
| {{grand_total}} | The total invoiced amount. This is calculated based on the hours and the hourly rates specified for billable projects. |
| {{amount_paid}} | This will always be 0 |
| {{amount_due}} | The total invoiced amount. This is calculated based on the hours and the hourly rates specified for billable projects. |
| {{due_date}} | The date by which the invoice should be paid |
| {{thanks}} | A thank you message |
If you want to itemize your invoice with a line item per project, you can create a section of items by using some special tags as follows.
| Variable | Description |
|---|---|
| {{$row}} | This isn't technically a placeholder. Instead this indicates that the content between it and the next ${{row}} should be repeated for each line item. You must have exactly two of these. |
| {{description}} | The name of the project |
| {{quantity}} | The number of hours |
| {{unit_cost}} | The hourly rate for this project |
| {{amount}} | The hourly rate multiplied by the number of hours |
Below is a very simple example of a template. You would typically want to add some CSS for formatting.
<html>
<body>
<p>
TO:
{{to}}<br />
{{to_contact_email}}<br />
{{to_contact_phone}}
</p>
<p>
<b>Invoice Date:</b><br />
{{date}}<br/>
<b>Invoice Number:</b><br />
{{invoice_number}}<br/>
</p>
<p>{{description}}</p>
<table id="lineItems">
<tr><th>Description</th> <th>Quantity</th> <th>Unit Cost</th> <th>Amount</th> </tr>
<tbody id="main">
{{$row}}
<tr><td>{{description}}</td><td>{{quantity}}</td><td>{{unit_cost}}</td><td>{{amount}}</td></tr>
{{$row}}
</tbody>
<tr ><td colspan="2"> </td><td>Total</td><td>{{grand_total}}</td></tr>
<tr ><td colspan="2"> </td><td>Paid</td><td>{{amount_paid}}</td></tr>
<tr ><td colspan="2"> </td><td>Due</td><td>{{amount_due}}</td></tr>
</table>
<p>Due date: {{due_date}}</p>
<p>
{{thanks}}
</p>
</body>
</html>