Custom Templates

Link2Quotes utilize a templating system to render quotes allowing you to create your own template written in HTML, CSS, and Handlebars templating languages. An advance knowledge of web programming knowledge is required.

A Link2Quotes template file has .hbs extension and consists of four sections, namely template, style, config and thumb. Its content looks like the following:

<template name="Template Name" description="Description goes here">
    <div class="no-print">
        {{{ValidationSummary}}}
    </div>

    <div class="heading mb-4">
        {{#if LogoUrl}}
            <div class="logo">
                <img src="{{LogoUrl}}" />
            </div>
        {{/if}}
        <div class="doc-title">{{Title}}</div>
        <div class="contact-info">{{ContactInfo}}</div>
    </div>

    ...
</template>

<style>
    body {
        font-family: '{{Config.FontFamily}}', sans-serif;
        font-size: .875rem;
    }
    a {
        color: {{Config.AccentColor}};
    }
    a:hover {
        color: {{Config.AccentColorHover}};
    }
    .logo {
        text-align: {{Config.LogoAlign}};
    }
</style>

<config>
  {
    "Presets": {
        {
            "_name": "Blue",
            "AccentColor": "#039AEE",
            "AccentColorHover": "#21B5FF"
        },
    },
    "Options: {
        "LogoAlign": {
            "Type": "select",
            "Label": "Logo Placement",
            "Default": "left",
            "Options": {
                "left": "Left",
                "center": "Center",
                "right": "Right"
            }
        },
        "FontFamily": {
            "Type": "font",
            "Label": "Font Face",
            "Default": "Ubuntu"
        },
        "AccentColor": {
            "Type": "color",
            "Label": "Accent Color - Normal",
            "Default": "#F87C1D"
        },
        "AccentColorHover": {
            "Type": "color",
            "Label": "Accent Color - Active",
            "Default": "#DB6307"
        }
    }
  }
</config>

<thumb>
data:image/png;base64,iVBOR...
</thumb>

This single template file is used to render both online (web) and PDF version of quotes. Within the <template> and <style> sections, you could use Handlebars to print variables and run basic conditional and loop logic.

For more information regarding Handlebars, please read the Handlebars Guide.

Template Section

The template section defines HTML template to be used for rendering forms. It uses Handlebars templating language to render page data and inputs. While it is based on HTML, not all HTML tags are supported.

Please also note that some variables contains HTML code, which must be rendered unescaped using triple brackets. For example:

<!--Text string-->
{{Title}}

<!--HTML string-->
{{{ValidationSummary}}}

Link2Quotes includes Bootstrap framework by default which you can use to structure your quote document.

Style Section

CSS stylesheet must be placed in this section. When writing a style rule, we recommend using rem or em measurement units and avoid using px, cm or other absolute units. The reason for this is because the same template has to be compatible for rendering both on screen as well as on print media.

In Link2Quotes template, a rem is equivalent to 16px on screen, and 12pt or 1/6in on print media. The default page size is "letter" (8.5x11in) with 3rem (0.5in) margin on each sides. Therefore you should have a total of 45rem (7.5in) horizontal space when printed. On the web, you have the same maximum horizontal space of 45rem (720px), however it may be reduced to fit the browser viewport when viewing on mobile device, for example.

The default font size is 1rem.

Config Section

This section allows you to define customization options for the template. Option values can then be accessed both within the <template> and <style> section as Handlebars variables inside the Config object with the configuration name as property name.

Config definition is written as a JSON object. This object contains the following properties:

• Presets object - Collection of preset customizations.
• Options object - Collection of configuration name and an object of its parameters.

Option Parameters

Default

int|string - Default value when no custom value is set.

Hint

string - Additional description about the input.

Label

string - Field label.

Max

int? - Maximum value allowed for numeric input.

Min

int? - Minimum value allowed for numeric input.

Options

string[] - Used by input of multiple choice types, such as select. Associative array list of value: label pair.

Type

string - Option type used to render input control on the customization page. Possible values:

• color - Color selector. value can be in either CSS hex or rgba() format.
• number - Numeric input
• select - Dropdown list
• text - Textbox input. This is the default if invalid value is specified.

Thumb Section

This section may contain base64-encoded image data of the template. It is recommended that the image file is stripped from all metadata tags and resized to 200x150 to keep the file size minimum. Recommended base64-encoded string size is 10KB.

Template Variables

For list of available variables, please consult Template Variables.

^^ Last revised: 2023.06.14