Skip to main content
The basics

How to find the template editor and preview your changes when building your templates.

Thomas van Beek avatar
Written by Thomas van Beek
Updated this week

Building and Previewing Invoice and Contract Templates in ABOSS Agency
Customize Your Templates and Preview Changes Efficiently

Note: Contracts are only available in Agency, not in Artist PRO. The process of creating and editing templates for contracts or invoices is the same.

With ABOSS Agency, you can create custom invoice and contract templates using the built-in template editor. The editor allows you to design templates like a standard text processor, or you can use the "< >" (source code) option to make more advanced changes using HTML.


Table of Contents

  1. Accessing the Template Builder

  2. Previewing Your Templates During Development

  3. Saving and Previewing Changes

  4. Troubleshooting Template Errors


1. Accessing the Template Builder

To get started, go to Office or Settings and select either Invoice Templates or Contract Templates from the menu.

The template builder is intuitive and similar to other text processors. If you need advanced customization, use the "< >" option to modify the template using HTML.

2. Previewing Your Templates During Development

To ensure your template looks and functions as intended, follow these steps for previewing your changes while developing the template:

  • Create a test event: Set up a test event and enter random details, such as a deal, location, and contact information. Label the event clearly as a "test event" for easy identification, and you can delete it once you're done.

  • Work with multiple tabs: Open multiple tabs in your browser (Google Chrome is recommended). Keep one tab for editing the template and another for previewing changes.

  • Ensure you have the correct permissions: Make sure you have Manage permissions for the Office section in ABOSS.

Warning: Changes made to a template can cause it to malfunction if the code isn’t written properly. Always create a duplicate of your template before making changes to the liquid code. Make changes at your own risk.

3. Saving and Previewing Changes

Once you've created a test event, you can start working on your templates:

  • Edit the template: Go to Office and select either Invoice Templates or Contract Templates. Create a new template or edit an existing one.

  • Save changes: Click the Save button at the top of the screen after making changes.

  • Open a second browser window: In a new tab, go to ABOSS and open your test event. Create a new invoice or contract, depending on the template you’re working on.

  • Select your template: Choose the template you’re editing for the invoice or contract. Add optional details to complete the document. Use "Test" as your invoice or contract number to avoid gaps in your numbering.

  • Preview your changes: Click Preview PDF to view the output of your template in a new browser window.

Note: The entered data, such as added in Deal-tab, will only display correctly on contracts and invoice PDFs if the templates are set up properly. Always double-check your PDFs before sending them out to ensure everything appears as expected.

4. Edit and Preview New Changes

You should now have three browser tabs open: the template editor, the PDF preview, and your test event. To edit and preview changes:

  • Switch between tabs. Make further edits to the template, save the changes, and then refresh the PDF tab to see the updated result.

  • Repeat the process until you’re satisfied with the design.

5. Troubleshooting Template Errors

If there is an issue with the code in your template, you’ll receive a syntax error message. Find more on these issues in this article.

Common causes include:

  • Incomplete if statements: Ensure all if statements are properly closed.

    Example of incorrect code:

    {% if event.fee > 0 %} {{ event.fee }}

    Correct code:

    {% if event.fee > 0 %} {{ event.fee }} {% endif %}
  • Incomplete variables: Make sure all variables are properly formatted. For example:

    Incorrect:

    {{ contact.contact_name }

    Correct:

    {{ contact.contact_name }}

If you encounter issues, feel free to contact support for further assistance.

Did this answer your question?