HTML Templates are customisable templates that can be used on outbound communications with your users. Administrators with prior experience using HTML can customise the font, graphics and formatting for PDFs generated for Invoices, emails, Lesson Reports and more. Your HTML Templates are stored in a list found in System > Settings > HTML Templates.
Caution: Editing the HTML for templates incorrectly can cause them to not work properly. We strongly advise that only administrators who are confident using HTML and are familiar with Mustache use this feature - if you would like to edit your HTML templates but aren’t sure enough of your understanding of these, feel free to reach out to the team at support@tutorcruncher.com.
To create an HTML Template, navigate to System > Settings > HTML Templates to bring you to the Templates list page, where you can view a list of your previously created HTML templates and create new ones. Select Add Template - this will open a panel within which you can select the kind of template you want to edit. Here you can specify the template’s Name and also choose which Type will be - these different types include invoices, payment orders, receipts and more - selecting them will create a template with the default HTML styling on it.
The HTML Template page, with the Add Template button highlighted.
Saving this will close the panel and populate the template list with the new template. Selecting Edit Content will navigate to the Edit Template panel. Using the HTML editor here, you can edit the HTML of your template.
Note: Use caution when editing any content surrounded by curly braces (i.e. \{\{ \}\}) as the system uses the strings within to retrieve content such as company logos and headings.
Once the customised template has been saved, any new PDFs created for the specified Type will use that custom template instead of the default. Note that for custom email templates, an email style must be selected for that template to be used on emails.
Can I display a Custom Field on an HTML Template?
Custom Fields can be displayed on HTML Templates to display dynamic information about the relevant user on the PDF.
To do this, simply create the Custom Field and then click on it to retrieve its machine name.
A Custom Field's panel, with the machine name highlighted.
Then create your HTML Template and click 'Edit Content' on its item in the list and input the machine name into the code in the following format:
{{ usertype_machine_name }}
Note that before the machine_name is being called in we're also inputting the user type that machine name relates to - there are three different user types:
Contractor (Tutor)
Recipient (Student)
Client
For instance, if we wanted to insert a Tutor's sort code into an HTML Template (as shown in the screenshot above), we would input:
{{ contractor_sort_code }}
And then the HTML Template will then display whatever data was input into that Custom Field (i.e. a number or a string of letters).
Similarly, if we wanted to display a Client's shoe size on their Invoices:
{{ client_shoe_size }}
Make sure to input a break <br> after each Custom Field if inputting multiple ones.