Docupilot
HomeLoginSignup
  • Docupilot Help Documentation
  • Getting Started
  • Building Templates
    • Tokens (Merge Field)
    • Document Builder
    • AI-Powered Template Builder
    • Word Document (DOCX) & PowerPoint (PPTX)
    • Excel (XLSX)
    • Fillable PDF
    • Template Preferences
    • Formatting Your Data
    • Numerical Calculations
    • Advanced usage
  • Test your document template
  • Deliveries
    • Email
    • Webhook
    • Dropbox
    • Google Drive
    • One Drive
    • DropboxSign (formerly Hellosign)
    • DocuSign
    • SignNow
    • Xodo sign (formerly Eversign)
    • Signable
    • Yousign
    • Amazon S3
    • SFTP
  • Create document
    • Data Capture Form
    • API & Webhook Integration
    • Bulk Create
    • Integrate with Zapier
    • Integrate with Make
    • Integrate with Zoho Flow
    • Integrate with Integrately
  • Integrations
    • Google Forms
    • Google Sheets
    • Airtable Extension
    • Docupilot Add in for Microsoft Word
  • Collaborating with multiple users
    • Invite users
    • Manage & delete users
  • Reports
  • Settings
    • Workspace
    • API Settings
    • Manage Subscription
    • Linked Accounts
  • Folders & Templates management
    • Manage Folders
    • Manage Templates
    • Share Templates & Folders
  • Profile & Account Security
  • Frequently Asked Questions (FAQs)
  • Developers
    • API Overview
    • Templates API
    • Folders API
  • Updates
    • Scheduled Downtime Notification
Powered by GitBook
On this page
  • Getting Started
  • Types of Merge Fields
  • Tokens (Merge Field)
  • Previewing and Editing an HTML Template
  • Condition (if-else)
  • Lists (Loops)
  • Bulleted List
  • Numbered List
  • Tables
  • Lookbacks
  • Inserting a dynamic image
  • Inserting a QR Code
  • Inserting a Barcode
  • Inserting Google Maps
  • Grid Helper
  • Page Break
  • Google Fonts
  • Page Margins
  • Comments

Was this helpful?

  1. Building Templates

Document Builder

PreviousTokens (Merge Field)NextAI-Powered Template Builder

Last updated 1 month ago

Was this helpful?

Getting Started

The Document builder gives you all the necessary tools to help you build your document in a PDF format. You can include Document Headers, Text, Images, Tables, Page Breaks, etc.

Types of Merge Fields

Docupilot supports a variety of merge fields for you to use in your document builder.

  • Tokens (Merge Field)

  • Condition (if-else)

  • Loops

  • Tables

Docupilot supports easy ways to insert Merge fields into your document template. {{ }} button on the toolbar helps you insert the merge fields.

Tokens (Merge Field)

These are simple words embraced in {{}}. When you provide your custom data, Docupilot will replace these fields with the data. For example {{email}}, {{client_name}}, {{company_name}}.

If you want to group your fields you can use dot(.) while defining the tokens. For example if you want to capture your client's first name & last name, you can write the tokens as {{client.first_name}} and {{client.last_name}}

Previewing and Editing an HTML Template

Choose your preferred template. Upon selection, you'll be able to Preview it. To modify the template, click the "Edit" button.

Condition (if-else)

You can use conditional statements to show or hide contents based on your data.

Conditional statements have the following syntax:

  • {{#if (a == b)}} a and b are same {{else if (c != d)}} c and d are not same {{/if}}

  • {{#if (count > 3)}} count is greater than 3{{/if}}

  • {{#if (item in "apple, ball")}} is apple or ball{{/if}}

The syntax can be extended to support more complex use-cases:

  • {{#if (a == b or a == c)}} a is same as b or c {{/if}}

  • {{#if (color == "red" or color == "blue")}}this is either red or blue{{/if}}

  • {{#if (color == "red" and item == "ball")}}this is a red ball{{/if}}

  • {{#if ((color == "red" and item == "ball") or (color == "blue" and item == "hat"))}}this is either a red ball or a blue hat{{/if}}

  • {{#if (color in "red, blue")}}this is either red or blue{{/if}

  • {{#if ("red, blue" contains color)}}this is either red or blue{{/if}}

For example, If you are creating an invoice, you want to display CASH if the payment_mode is cash, else if the payment_mode is the card you want to show CARD.

{{#if (payment_mode == "cash")}}
CASH
{{else if (payment_mode == "card")}}
CARD
{{else}}
Please Insert preferred Mode of Payment{{/if}}

To use conditional statement for checking inverse or negation of a condition, use the not in the condition. For example, to add an instruction requesting to add secure link if payment mode is not available on record:

{{#if (not payment_mode)}}
Please Add your payment details in this secure link: <your secure payment link>
{{/if}}

You can use the conditional statements in three ways

  • if

  • if-else

  • if-else if

  • if-else if-else

  • if-else if-else if

  • if-else if-else if-else

  • and so on

Below are a few examples:

{{#if show_payment_details}}

ACH to {{acNumber}}

{{/if}}

prints the text ACH to xxxxxxxxx if show_payment_details is present and not false.

{{#if (payment_status == "paid")}}

payment cleared

{{/if}}

prints payment cleared if payment_status equals to "paid" (case-sensitive)

{{#if (payment_status != "paid")}}

unpaid

{{/if}}

prints unpaid if payment_status not equal to "paid" (case-sensitive)

{{#if (payment_status == "paid")}}

paid

{{else}}

unpaid

{{/if}}

prints paid if payment_status equals to "paid" otherwise prints unpaid

{{#if (payment_status == "paid")}}

paid

{{else if (payment_status == "initiated")}}

payment initiated

{{else}}

pending

{{/if}}

prints paid if payment_status equals to "paid"

prints payment initiated if payment_status equals to initiated

otherwise prints pending

{{#if (price > 1000)}}

good deal

{{/if}}

prints the text good deal if price is greater than 1000

{{#if (price >= 1000)}}

decent deal

{{/if}}

prints text decent deal if price is greater than or equal to 1000

{{#if (price < 1000)}}

small deal

{{/if}}

prints text small deal If price less than 1000

{{#if (price <= 1000)}}

okay-ish deal

{{/if}}

prints text okay-ish deal If price less than or equal to 1000

{{#if (payment_message contains "paid")}}

Payment is cleared {{/if}}

prints Payment is cleared if payment_message contains the text paid (for example, this invoice has been paid contains the text paid in it)

{{#if (payment_message not_contains "paid")}}

Payment is due {{/if}}

prints Payment is due if payment_message does not contain the text paid (for example, this invoice is not cleared does not contain the text paid in it)

{{#if (status == "open" or status == "on-hold")}}

Payment is pending

{{/if}}

prints Payment is pending if status is open OR on-hold

{{#if (status == "open" or status == "on-hold" or status == "under review")}}

Payment is pending

{{/if}}

prints Payment is pending if status is open OR on-hold OR under review

{{#if (status != "open" and status != "on-hold")}}

Payment is not pending

{{/if}}

prints Payment is not pending if status is not open AND not on-hold

{{#if (status == "open" and priority == "high")}}

High priority open task

{{/if}}

prints High priority open task if status is open AND if priority is high

{{#if (payment_status != "paid")}}Please Clear the Dues within 30 days

{{/if}}

prints Please Clear the Dues within 30 days if the payment_status is not equal to paid

{{#if (status in "open,pending")}}In Progress... Please stay tuned for further updates.

{{/if}}

prints In Progress... Please stay tuned for further updates. if status is sub-string of "open,pending"

The syntax for if statements used without any operators is as follows:

{{#if myToken}}...{{/if}}

Hiding Empty Sections & Lines

In the following example, when the address field has a value, it gives desired outcome. If the address is empty, it leaves an empty line in the output.

{{customer_name}},
{{#if address}}{{address}},{{/if}}
{{city}}, {{country}}
Data
Output

To hide empty lines, we should open the if condition in previous line or close it in next line. Here are examples on how the output will look like when street address is passed and when it is not:

Syntax
Data
Output

Lists (Loops)

Lists are used when you want to print a list of items in your document. Docupilot supports three types of loops in document builder.

  • Simple List

  • Advanced List

  • Bulleted List

  • Numbered List

Simple Loop

{{#each items}}
{{this}} 
{{/each}}
Output
Apple
Orange
Strawberry

Advanced Loop

You can use advanced loop, if you want to print list of items like line items. Think of this as a sub-form with multiple rows in your main form.

{{#each line_items}}
{{name}} ${{price}}
{{/each}}
Output
Iphone6 $799
Iphone7 $899
Iphone8 $999

Bulleted List

• {{#list services}}{{this}}{{/list}}

Numbered List

1. {{#list services}}{{this}}{{/list}}

Please use bullet insertion buttons from editor's tools pane for Bulleted and Numbered lists to work

Tables

A table is similar to an advanced list, but the data will be rendered in a table. For example, if you want to generate a invoice, you may want display a table with all the line items.

name

quantity

price

{{#each line_items }}

{{ name }}

{{ quantity }}

{{ price }}

{{/each}}

Hiding Empty Tables

You can use IF condition to hide empty tables, you should wrap the entire table inside a IF condition.

{{#if line_items}}
{{!...INSERT THE ABOVE TABLE IN THIS LINE...}}
{{/if}}

Filtering rows in a Table based on empty column value

name

quantity

price

{{#each line_items }}{{#if quantity}}

{{ name }}

{{ quantity }}

{{ price }}

{{/if}}{{/each}}

If the value for quantity is empty in any row, it will be skipped in the output table.

Filtering rows in a Table based on a column value

name

quantity

price

{{#each line_items }}{{#if (name != "Iphone")}}

{{ name }}

{{ quantity }}

{{ price }}

{{/if}}{{/each}}

If the value for name is Iphone in any row, it will be skipped in the output table.

Lookbacks

Lookbacks allow you to access parent context within a nested context. For example, you can access a variable that is outside the loop from inside it.

Format: {{../token_name}}

For example, if your input data for generating an invoice contains of CustomerName, DiscountPercentage and LineItems and you want to render DiscountPercentage against each line item, to access it you need to use {{../DiscountPercentage}} inside the loop {{#each LineItems}} ... {{/each}}

                                Sales Invoice

Customer: {{CustomerName}}
Membership Discount: {{DiscountPercentage}} %

{{#each LineItems}}
{{ProductName}} | {{Quantity}} | {{UnitPrice}} | {{../DiscountPercentage}}%
{{/each}}

Thank you for your business

Inserting a dynamic image

This will be helpful if you want to insert a dynamic image in the document.

Format : {{insert_image image1 width="width" height="height"}}

Order

Name

Description

Mandatory

1

width

Image width

No

2

height

Image height

No

Example

Description

{{insert_image image1 width="300" height="200"}}

Image Width: 300px , Height: 200px

{{insert_image image1 width="300"}}

The height is automatically adjusted to keep the proportions

{{insert_image image1 height="300"}}

The width is automatically adjusted to keep the proportions

The image URL need to be publicly accessible so we can download and insert it in the document.

Inserting a QR Code

This will be helpful if you want to insert a dynamic QR code from your data in the document.

Format: {{insert_qr url size="qr_size" margin="qr_margin" color="qr_color(in hex values)"}}

Order

Name

Description

Mandatory

1

size

QR Image size

No Default: 100

2

margin

QR Image height (px)

No

Default: 4

3

color

Color of the QR

No Default: #000000

Example: {{insert_qr url size="100" margin="1"}}

Example: {{insert_qr url size="100"}}

Example: {{insert_qr url margin="7"}}

Example: {{insert_qr url color="0000FF"}}

The color of the QR should be given in hex coding only.

Inserting a Barcode

This will be helpful if you want to insert a barcode from your data in the document.

Format: {{insert_barcode name format="barcode_format" bar_width="width" height="height" margin="barcode_margin" color="color" background_color="bg_color" display_value=true/false}}

Order

Name

Description

Mandatory

Default Value

1

barcode_format

Barcode formats

CODE128

CODE39

No

CODE128

2

bar_width

The bar_width option is the width of a single bar.

No

2

3

height

The height of the barcode.

No

100

4

barcode_margin

Set the space margin around the barcode

No

10

4

color

Set the color of the bars and the text.

No

#000

5

bg_color

Set the background of the barcode.

No

#fff

6

label

Displaying the label below the barcode

No

true

Example: {{insert_barcode item_name}}

Example: {{insert_barcode name format="CODE39"}}

Example: {{insert_barcode name bar_width="3"}}

Example: {{insert_barcode name format="CODE128" bar_width="2" height="25"}}

Example: {{insert_barcode name format="CODE128" bar_width="2" display_value= false}}

Example: {{insert_barcode name height="50" margin="10"}}

Example: {{insert_barcode name height="50" color="FF0000"}}

Inserting a Barcode with a Transparent Background

This is useful if you need to insert a barcode with a transparent background into your document.

Format: {{insert_barcode name bg_color='#ffffff00'}}

Inserting Google Maps

This will be helpful if you want to insert Google Maps from your data in the document.

Format: {{insert_map Address width="width" height="height" map_type="maptype"}}

Order

Name

Description

Mandatory

Default Value

1

width

Width of the image (px)

No

600

2

height

Height of the image (px)

No

300

3

map type

Map types

roadmap

satellite

hybrid

terrain

No

roadmap

4

Zoom

Zoom into the image

No

13

Example: {{insert_map Location width="500" height="500" map_type="roadmap"}}

Example: {{insert_map Location map_type="roadmap" zoom= "20"}}

Example: {{insert_map Location height="300" zoom= "5"}}

Grid Helper

The Grid Helper will render the list input in a grid format, with specified column size.

Syntax: {{#grid items col_size=3}} {{@item1.title}}{{@item2.title}}{{@item3.title}} {{/grid}}

Example :

Page Break

If you want to format your document into multiple pages properly, you can use the page break option. The content after the page break will begin in a new page.

Google Fonts

<style type="text/css">body{
 font-family: 'Tangerine', serif;
}
</style>

Sometimes the document builder will not show the specified font but the document will be generated in the specified font.

Page Margins

Docupilot allows you to adjust the size of the top, bottom, left, right page margins in inches. You can set the margins in preferences -> Advance settings.

The default margin is 0.4 inches on all sides. You can also set it to zero.

Comments

You can add comments in the document template to help your future editors. The comments will be removed in the output document.

Comments Syntax : {{!Your comments here}}

Docupilot supports all Google fonts to help you maintain your branding. Once you finish building your document, you will need to add a small code snippet by clicking on the source button in the document editor. You will need to change the font family accordingly to the choice of your fonts. You can find the font family here .

customer_name = John Doe
street = WinWood St.
city = NY
country = US
John Doe,
WinWood St.,
NY, US
customer_name = John Doe
city = NY
country = US
John Doe,

NY, US
{{customer_name}},{{#if street}}
{{street}},{{/if}}
{{city}}, {{country}}
customer_name = John Doe
city = NY
country = US
John Doe,
NY, US
{{customer_name}},{{#if street}}
{{street}},{{/if}}
{{city}}, {{country}}
customer_name = John Doe
street = WinWood St.
city = NY
country = US
John Doe,
WinWood St.,
NY, US
{{customer_name}},
{{#if street}}{{street}},
{{/if}}{{city}}, {{country}}
customer_name = John Doe
city = NY
country = US
John Doe,
NY, US
{{customer_name}},
{{#if street}}{{street}},
{{/if}}{{city}}, {{country}}
customer_name = John Doe
street = WinWood St.
city = NY
country = US
John Doe,
WinWood St.,
NY, US
https://fonts.google.com/
Overview of Document Builder
Previewing and Editing an HTML Template
Example Sales Invoice Template
Example Sales Invoice Template - Output
Qr with margin 7
Code 128 barcode with height 50 px and margin 10
Code 128 barcode with height 50 px and red in color
Barcode with Trasnparent background
Location value is Manchester, with map type as road map and a Zoom set to 20
Location value is Manchester with height as 300 px and zoom set to 5
Grid helper
Google Fonts
Page Margins
100 X 100 with margin 1 & value https://docupilot.app
100 X 100 with default margin 4 & value https://docupilot.app/
QR with color blue & value
CODE128 Format
CODE39 Format
Code 128 Format Barcode with width 3
Location Value is Manchester
https://docupilot.app/