Custom HTML examples to give your Autotask invoices and emails a more professional appearance.
Disclaimer:
These templates are provided free of charge, without copyright, and are offered "as is," without any warranties or support. You are welcome to use and adapt them to fit your company's needs. Please remember to create a backup copy of your invoice template in Autotask before making any changes and make sure you test them before sending to your customers.
|
Autotask sales invoice with custom HTML |
Autotask email template with custom HTML |
|
|
|
The template is intended for use with Cloud Depot RPS (Recurring Payment Service), which directs customers to your payment portal, allowing them to pay the invoice or save a card for future recurring payments.
If you do not have a payment solution in place, simply remove the payment button from the HTML code. We recommend using the HTML editor (edit the raw html) for any modifications. Editing using the Autotask designer may disrupt the template's layout. While we have removed the Visa and Mastercard logos for simplicity, creating and adding your own logos to the template is straightforward if needed.
Email Template
Autotask -> Admin -> Features & Settings -> Invoices -> Invoice Email Message
Click the new button
Setup your Invoice Email Message
EMAIL HTML CODE
You can download the HTML and CSS code by clicking on this link to access the text file. Please note that we are unable to paste the code directly here, as HubSpot modifies the format, which prevents Autotask from interpreting it correctly.
https://edge.clouddepot.com/content/global/templates/autotask/autotask-template-email.txt
Invoice Template
Top of Invoice
Autotask -> Admin -> Features & Settings -> Finance, Accounting & Invoicing -> Invoice Templates
Click New to create a new Invoice Template
Edit the Top of Invoice
Click HTML tab and paste in entire HTML below then click Save
PDF TOP HTML
You can download the HTML and CSS code by clicking on this link to access the text file. Please note that we are unable to paste the code directly here, as HubSpot modifies the format, which prevents Autotask from interpreting it correctly.
https://edge.clouddepot.com/content/global/templates/autotask/autotask-template-pdf-top.txt
Your designer should now look like this (your logo will need to be replaced, you can do that later) click Ok to continue
Bottom of the Invoice
Next, proceed to the bottom section of the invoice.
PDF Bottom HTML Code
You can download the HTML and CSS code by clicking on this link to access the text file. Please note that we are unable to paste the code directly here, as HubSpot modifies the format, which prevents Autotask from interpreting it correctly.
If you are finding the bottom page is bleeding into the main page it is possible to force the bottom to always be on a new page - you can use the following HTML code at the top of the bottom section, just above the table html tag.
<div style="page-break-before: always;"></div>
While our support team is unable to provide direct assistance, we encourage you to share your feedback in the social media forums. Our community may be able to offer guidance and support if you encounter any challenges.