Need to fancy up that invoice? Introducing custom HTML headers!

Want to put your logo on your invoice? Change the fonts? Add some color to it? Now you can! We just launched a small yet powerful new feature in Freckle that allows you to add custom HTML to any invoice.

For example, here’s what the default styling of an invoice looks like:

And here’s the same invoice with a tiny amount of custom HTML!

Here’s the HTML snippet that makes this work:

<style>
#invoice, #invoice_report {
  font-family: Georgia;
}
#invoice div.custom-header {
  padding: 0 0 20px 0;
  margin: 0 0 20px 0;
  border-bottom: 1px solid #9dd64b;
}
</style>
<img src="https://asset0.letsfreckle.com/
  images/sites/logo_bigger.png">

You’ll find the custom HTML header field when you create or edit any invoice—just put some HTML in, done!

Pretty simple! Now, you might not be a web designer, but if you have one handy or hire one, it’s really easy to add some personality to your invoices! You can add any arbitrary HTML you want, including custom CSS styling, images, text or anything really.

Tip: If you do include images or other external assets, be sure to serve them from a SSL-enabled web server, that is URLs starting with “https”. This makes sure that when your clients view your invoice, they won’t get warning messages about “mixed secure and non-secure content” in some browsers (like Internet Explorer).