Skip to content
  • There are no suggestions because the search field is empty.

Template Editor (Beta Version)

A Step-by-Step Guide to Customizing Email and PDF Documents Using Templates.

Accessing the Template Editor

Navigating the Template Editor Layout

Editing Templates

Previewing Template Changes

Undo and Delete Actions

Uploading Logos

Assigning Access Rights

Techie Language

HTML Basics

DocuSign

 

The Template Editor in FL3XX is designed to help you customize your templates for emails and documents used in operations. This guide provides an overview of the Template Editor’s interface, demonstrating how to manage, preview, and save changes efficiently.

Accessing the Template Editor

To access the Template Editor:

  1. Go to Settings.
  2. Select "Template Editor" under the General section.
  3. The Template Editor will open in the same tab, with the first template in the left-hand (LH) menu selected by default.

Accessing the Template Editor

Navigating the Template Editor Layout

The Template Editor has four main sections for managing your templates:

  • Preview Section: Shows the final version of your email or document.
  • Template Editor Section: Allows editing of the template's HTML code.
  • Variables Section: Lists the variables that can be used in the template for customization.
  • Versions Section: Displays previous versions of the template for restoration.

The default layout is a vertical split, with the Preview on top, the Template Editor below, and Variables on the right.

  • Adjust the view (horizontal or vertical) by clicking the toggle next to "Edit Templates".
  • Collapse each section by using the arrows icon next to each section title. 
  • Expand each section by clicking the icon on the right side of your screen.
  • Adjust the section sizes by dragging the grey bar between them.
  • Restore a previous version by clicking one of the versions below the document title in the left-hand menu. 

Navigating the Template Editor LayoutExpanded view of all sections.

Collapsed view of the template editor and variables.

Collapsed view of the template editor and variables.

Tip: The Template Editor will remember your preferred layout after your first use.

Editing Templates

  • Select a Template: Use the LH menu to select the template you wish to modify.
  • Edit Content: Use the Template Editor to change the code or text as needed.
  • Save Changes: Click the Save button (☁️) to apply changes. A confirmation popup will appear to avoid accidental overwrites.

Note: Leaving the page without saving will result in the loss of any unsaved changes.

Selecting a leg to use for the preview.

Selecting a leg to use for the preview.

Code navigator used to find and replace key words. To access, click anywhere in the "Template Editor" section, then press "cmd" + "f" for mac, or "Windows key" + "f" for pc.

Previewing Template Changes

  • Default Preview: By default, you will see a preview of an empty template.
  • Booking Selector: Use the Booking Selector Dropdown List (DDL) to pick a booking, allowing you to see the template with specific booking details.

Pax Manifest template selected with all sections expanded.

Pax Manifest template selected with all sections expanded.

Undo and Delete Actions

  • Undo Changes: Use the Undo button (↩️) to revert all unsaved changes in a template.
  • Restore to Default: Click the Delete button (🗑️) to restore a template to its default settings provided by FL3XX.

Warning: Restoring a template to its default state will delete any customizations made.

Action buttons.

Action buttons.

Uploading Logos

To add a logo to your emails or documents:

  1. Navigate to the Logo section. Here you will see the current logo being used. 
  2. Upload the file, which will be included in your templates.

Note: Changing this logo inside the template editor will apply the change for all email templates. This logo will appear wherever logo://email is used in your templates.

Logo editing.

Logo editing.

Assigning Access Rights

The following access rights can edit templates:

  • Administrator
    • All administrators can use the template editor.
  • External Template Development
    • This access right has only access to the template editor, so you can hand it out to a third party developer working on your templates.

 

Techie Language

Our templates use familiar tools: HTML and CSS. For logic (think: if-else or loops), we rely on Apache Velocity Template Language (VTL)—making customization easy and dynamic.

Want to dive deeper? Here’s your cheat sheet:

HTML Basics

  • Adding a line break: add <br/> at the end of a line.

  • Creating a new paragraph: enclose text in <p>your text</p> to start a new paragraph.

  • Bold text: wrap text in <b>your text</b> to display it in bold.

  • Italic text: wrap text in <i>your text</i> for italic styling.

  • Underlining text: wrap text in <u>your text</u> to underline text.

  • Adding a hyperlink: use <a href="https://example.com">Click here</a> to insert a clickable link.

  • Adding a hyperlink opened in new tab: use <a href="https://example.com" target="_blank">Click here</a>

  • Creating an unordered list: wrap list items in <ul></ul>, with each item inside <li>your item #1</li>.

  • Creating an ordered list: wrap list items in <ol></ol>, with each item inside <li>your item #1</li>.

  • Adding a horizontal rule: insert <hr/> to create a horizontal divider.

DocuSign

To use DocuSign in your templates, you must first set up integration.

In templates, you can verify whether DocuSign is active by checking the $electronicSignature variable. For example, you can place your DocuSign-specific code inside a condition:

#if($electronicSignature)<input type="text" name="DocuSignSignHere">#end

 

There is also the $electronicSignatureUrl variable, which contains the generated URL to direct the user to the DocuSign website for signing. Use it to display an "eSign" button in email body. Here you can see one code example from FL3XX templates:

#if($StringUtils.isNotEmpty($electronicSignatureUrl))
<p class="template-button__section" style="padding: 20px 0; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE;">
<a href="$!electronicSignatureUrl" class="template-button__section-primary" style="display: inline-block; color:#ffffff; background: #f15a2b; font-size: 14px; border-radius: 4px; box-shadow: none; cursor: pointer; outline: 0; padding: 10px 30px; text-decoration: none;">eSign</a>
</p>
#end

 

 

There are two ways to create dynamic inputs for DocuSign document:

  1. Using FL3XX anchor strings.
  2. Using generic HTML form inputs with specific names to be recognized by DocuSign.

The first option allows you to prefill inputs with related data (e.g., customer name). However, it has limited options for field types.

The latter allows you to add any input types supported by DocuSign.

Both approaches can be used in the same document.

DocuSign inputs using FL3XX anchor strings.

You can insert specific strings into PDF documents that are compatible with DocuSign. These strings will be replaced with prefilled data on the DocuSign side when available, streamlining the signing process.

Here is a list of available string anchors:

/fn1/
 Full name 
/po2/
 Position 
/co3/
 Company name 
/lc4/
 Location 
/dt5/
 Date 
/sn6/
 Signature (Sign here)

A simple example from the default FL3XX sales contract document:

<div class="inputs">
    <div>Name, Position#if($electronicSignature)<div class="inputs--with-signature"><div class="signature-name">/fn1/</div><div class="signature-position">/po2/</div></div>#end</div>
    <div>Company#if($electronicSignature)<div class="inputs--with-signature">/co3/</div>#end</div>
    <div>Location, Date#if($electronicSignature)<div class="inputs--with-signature"><div>/lc4/</div><div>/dt5/</div></div>#end</div>
    <div>Signature#if($electronicSignature)<div class="inputs--with-signature">/sn6/</div>#end</div>
</div>

 

DocuSign inputs using generic HTML form inputs

You can use generic HTML inputs with two conditions to be recognized by DocuSign:

  1. Always place inputs inside a  <form action="#">...</form> element.
  2. Always include a name attribute with the appropriate field type from the examples below.
  • DocuSignSignHere - signature
  • DocuSignDateSigned - date
  • DocusignCompany - company

Tip: To make an input mandatory, add the required="" attribute.

Example of the form with inputs:

<form class="inputs" action="#">
<div>Company
#if($electronicSignature)
<div class="inputs--with-signature">
           <input type="text" name="Agreement_DocuSignSignHere" title="Company Name" required="" />
</div>
     #end
     </div>
   <div>Date
         #if($electronicSignature)
         <div class="inputs--with-signature">
              <input type="text" name="Agreement_DocuSignDateSigned" title="Date" required="" />
         </div>
         #end
 </div>
 <div>Signature
         #if($electronicSignature)
         <div class="inputs--with-signature">
            <input type="text" name="Agreement_DocuSignSignHere" title="Date" required="" />
         </div>
         #end
   </div>
</div>