Developing on Invoiced

Custom PDF Templates

19min

Invoiced ships with multiple default templates for invoices, statements, and receipts, however, it's possible these templates do not match your business or branding needs. In this guide we will show you how to change the layout and appearance of the default PDF templates.

Creating Custom PDF Templates

The PDF templates are HTML and CSS rendered using Invoiced Template Language.

The first step is to head over to Settings → Appearance → Custom Templates. Then select the template type you want to create under New Template. You can also edit or duplicate an existing custom template from the list on the same screen. Within each template, it is possible to adjust margins and create custom headers and footers. Template bodies, headers and footers are separate HTML/CSS file pairs

PDF Template Editor
PDF Template Editor


Once a custom template for a certain document type is created, it can be selected for use from the corresponding drop-down menu in Settings → Appearance → Design.



PDF Template Selection
PDF Template Selection


Development Tips

Testing

After saving any changes you can download a PDF preview by clicking the Preview button near the top right of the page. You can also see the generated HTML on a live invoice that has your customizations applied by opening the client view and appending /html to the URL, i.e. https://dundermifflin.invoiced.com/invoices/IZmXbVOPyvfD3GPBmyd6FwXX/html.

Outputting available variables

If you want an output of what variables are available to your template you can use this for your HTML template to get a JSON encoded output: <pre>{{ dump_scope() }}</pre>

Resetting a template

If you want to reset any of the specific templates to the default then simply delete all of the text for that template and click Save. This will revert that template back to the default value.



Variable Reference

These variables can be used in the Twig templates.

Invoice Template Variables

  • company - A hash representing the business. See Company Object.
  • customer - A hash representing the customer. See Customer Object.
  • invoice - A hash representing the invoice. See Invoice Object.

Receipt Template Variables

  • company - A hash representing the business. See Company Object.
  • customer - A hash representing the customer. See Customer Object.
  • transaction - A hash representing the transaction. See Transaction Object.

Statement Template Variables

  • company - A hash representing the business. See Company Object.
  • customer - A hash representing the customer. See Customer Object.
  • statement - A hash representing the statement. See Statement Object.

Estimate Template Variables

  • company - A hash representing the business. See Company Object.
  • customer - A hash representing the customer. See Customer Object.
  • estimate - A hash representing the estimate. See Estimate Object.

Object Properties

Company Object

The company object has these variables:

  • address
  • country
  • currency
  • email
  • highlight_color
  • language
  • logo
  • name
  • tax_id
  • username
  • url

Customer Object

The customer object has these variables:

  • address
  • attention_to
  • autopay
  • chase
  • country
  • email
  • language
  • metadata
  • name
  • number
  • payment_terms
  • phone
  • tax_id
  • taxable
  • type

Invoice Object

The invoice object has these variables:

  • amount_paid
  • autopay
  • balance
  • custom_fields - An array of custom fields. See Custom Field Object
  • date
  • due_date
  • items - An array of line items. See Line Item Object.
  • metadata
  • notes
  • number
  • payment_terms
  • payment_url
  • rates - An array of discounts and taxes applied to the invoice. See Rate Object.
  • ship_to
  • status
  • subtotal
  • terms
  • total
  • url

Line Item Object

Line items contain these properties:

  • amount
  • billing_period
  • description
  • metadata
  • name
  • rates
  • unit_cost

Rate Object

Rates represent a summary of discounts or taxes applied to the subtotal. These properties are available:

  • name
  • total

Custom Field Object

Custom fields have these properties:

  • name
  • value

Transaction Object

The transaction object has these variables:

  • amount
  • amount_credited
  • amount_refunded
  • check_no
  • credit_notes
  • date
  • invoices
  • metadata
  • method
  • payment_source

Statement Object

If it is a Balance Forward statement then the statement object has these variables:

  • type - set to balance_forward
  • start
  • end
  • previousBalance
  • totalInvoiced
  • totalPaid
  • totalOverpaid
  • totalAdjustments
  • balance
  • creditBalance
  • accountDetail - array of objects each with these properties:
    • date
    • number
    • invoiced
    • paid
    • balance
  • hasCredits
  • previousCreditBalance
  • totalCreditsIssued
  • totalCreditsSpent
  • creditDetail - array of objects each with these properties: of objects with each these properties:
    • date
    • description
    • issued
    • charged
    • creditBalance
  • unifiedDetail - array of objects each with these properties:
    • date
    • description
    • issued
    • charged
    • balance
    • creditBalance
  • aging

If it is an Open Item statement then the statement object has these variables:

  • type - set to open_item
  • end
  • totalInvoiced
  • totalPaid
  • balance
  • accountDetail - array of objects each with these properties:
    • date
    • number
    • dueDate
    • total
    • balance
  • aging

Estimate Object

The estimate object has these variables:

  • custom_fields - An array of custom fields. See Custom Field Object
  • date
  • expiration_date
  • items - An array of line items. See Line Item Object.
  • metadata
  • notes
  • number
  • payment_terms
  • rates - An array of discounts and taxes applied to the invoice. See Rate Object.
  • ship_to
  • status
  • subtotal
  • terms
  • total
  • url



Did this page help you?
PREVIOUS
Developing on Invoiced
NEXT
File Attachments
Docs powered by Archbee