How to style your invoice and estimate emails

This article explains how you can format your invoice and estimate emails using the inbuilt WYSIWYG editor. It also explains how to add a payment button to your invoice emails.

These tools give you control over text formatting in the email message box.

Content is automatically formatted into paragraphs with double spacing added around each paragraph of text. Use 'return/enter key' (a hard-return) on your keyboard to create a new paragraph or 'shift + return/enter keys' (a soft-return) to start a new line in a paragraph with single spacing.

WYSIWYG Options

Using the WYSIWYG editor you can make text bold or italic and create lists of items. Lists can ordered (numbered) or unordered (with bullet points).

To apply styling, select the text you want to format in your message box and then select an option, e.g. Bold. Alternatively, selecting an option allows you to enter new text into the message box using the selected style, e.g. Italic.

HTML View

If you have added a custom email domain to authorise FreeAgent to send emails from your address, you can edit the HTML of your email directly.

Please note that you should only edit the HTML of your email directly if you're comfortable working with HTML.

Selecting the 'HTML' option will switch your message box to a HTML view where you can see the underlying code being used in your email. This is where you can make your own edits and even add your own styling, images or links.

Supported HTML tags

<p> <b> <strong> <i> <em> <ul> <ol> <li> <a> <img> <br>

You can also use the ‘style’ attribute on these tags.

HTML Examples

Adding and positioning an image

You can embed any hosted image eg. an image that has been uploaded onto your personal website.

<img style="float: right;" src="https://www.freeagent.com/components/images//www.mywebsite.com/image.jpg" alt="image" />

Adding a link

<a title="My Website" href="”http://www.mywebsite.com">Link Text</a>

If you don’t have your own web hosting space, you could try hosting your images using one of the many free image-hosting services available. However, we can’t be held responsible for these services being down and any of your invoices being sent without the referenced images being present.

Adding a payment button to your invoice emails

If you enable an online payment option and would like to add a payment button to your invoice emails, select the checkbox next to 'Include online payment button below content'. You can also add a payment link at the bottom of the invoice PDF.

This will add a button to your invoice that allows your customer to pay the invoice using a debit or credit card.