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. 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 eg. Bold. Alternatively, selecting an option allows you to enter new text into the message box using the selected style (eg. Italic).

HTML View

If you’re comfortable working with HTML, you can also edit the HTML of your email directly.

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> <> <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 eg.

<img style="float: right;" src="https://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 imagery using a free service like Photobucket, Postimage, Photobox, or ImgSafe. 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.