Customizing Invoice Templates

The invoice template editor allows you to design the look and feel of your customer invoices using either the drag and drop editor or the HTML editor. To access the editor, open an invoice template from the Invoice Templates tab in Billing Config under System Settings.

Choosing an Editor

Select Drag & Drop or HTML from the toolbar in the Template Content section to choose your editing method.

The Drag & Drop editor allows you to build your template visually by dragging components onto the page preview. The HTML editor allows you to write or paste raw HTML to fully control the template's layout and styling.

Using the Drag & Drop Editor

Components are organized into the following categories in the Components tab.

• Layout controls how content is organized on the page. When you drag an element onto the page preview, it will span the full width of the page by default. To control exactly where elements appear, use the layout components to create structure first, then place other elements inside them. To add extra spacing between elements, add a row container, as elements will otherwise stack directly against the previous one.
• Structure provides additional formatting controls to help organize the content within your layout.
• Content contains the standard content elements you can add to your template, such as text blocks and images.
• Data contains customizable widgets that will automatically populate with data from your Rev.io instance when invoices are generated. Note that the Tickets Table component is only available for one-time invoice templates.
• Marketing contains promotional elements including a QR code component. To configure the QR code, select it on the page and click the Styles tab to add the link and link text. To link the QR code to your customer portal, format the URL as follows: www.company.portalrev.io, replacing "company" with your client code.

Configuring Styles

To configure the styling of any element, select it on the page preview and click the Styles tab. Styles will only be available when an element is selected. The following style options are available.

• Typography controls the text appearance of the selected element, including Font Family, Font Size, Font Weight, Color, Text Align, Line Height, and Text Decoration.
• Background allows you to set the Background Color of the selected element.
• Spacing controls the space around and within the selected element, including Padding, Padding Top, Padding Right, Padding Bottom, Padding Left, Margin, Margin Top, and Margin Bottom.
• Borders controls the border appearance of the selected element, including Border Width, Border Style, Border Color, and Border Radius. The Border Radius setting controls the rounding of the element's corners.
• Size controls the dimensions of the selected element, including Width, Height, Min Width, and Min Height.
• Properties allows you to set an Id and Title for the selected element, which can be useful for identifying elements when working in the HTML editor.

Saving and Previewing

When you are done editing, click Preview to see how the template will look when rendered. Click Save Changes to save your template, or Cancel to discard your changes and return to the Invoice Templates list.