# Document Builder

## 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.

![Overview of Document Builder](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FYa3NyCD6hO5z4us5LumA%2FDocument%20Builder.png?alt=media\&token=5883e438-8046-450f-b03c-a1900c6b5b53)

## 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.

![](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FsKFyWgcG7d5GnF3di43G%2FNew%20types%20of%20merge%20fields.gif?alt=media\&token=9b54c0a0-c11a-4d30-94c9-67fb548ee161)

### 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.

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FeepHcxxXOYAyW4vlrrnK%2FPreview%20video.gif?alt=media&#x26;token=d4a9d724-51d3-482c-9d92-47bec139c00c" alt=""><figcaption><p>Previewing and Editing an HTML Template</p></figcaption></figure>

### Condition (`if-else`)

You can use conditional statements to show or hide contents based on your data.&#x20;

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`&#x20;
* `if-else`&#x20;
* `if-else if`&#x20;
* `if-else if-else`
* `if-else if-else if`
* `if-else if-else if-else`
* and so on&#x20;

Below are a few examples:

| <p><code>{{#if show\_payment\_details}}</code></p><p><code>ACH to {{acNumber}}</code></p><p><code>{{/if}}</code></p>                                                                                                                                                   | prints the text `ACH to xxxxxxxxx` if `show_payment_details` is present and not `false`.                                                                                                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><code>{{#if (payment\_status == "paid")}}</code></p><p><code>payment cleared</code></p><p><code>{{/if}}</code></p>                                                                                                                                                  | prints `payment cleared` if `payment_status` equals to `"paid"` (case-sensitive)                                                                                                                                                                         |
| <p><code>{{#if (payment\_status != "paid")}}</code></p><p><code>unpaid</code></p><p> <code>{{/if}}</code></p>                                                                                                                                                          | prints `unpaid` if `payment_status` not equal to `"paid"` (case-sensitive)                                                                                                                                                                               |
| <p><code>{{#if (payment\_status == "paid")}}</code></p><p><code>paid</code></p><p><code>{{else}}</code></p><p><code>unpaid</code></p><p><code>{{/if}}</code></p>                                                                                                       | prints `paid` if `payment_status` equals to `"paid"` otherwise prints `unpaid`                                                                                                                                                                           |
| <p><code>{{#if (payment\_status == "paid")}}</code></p><p><code>paid</code></p><p><code>{{else if (payment\_status == "initiated")}}</code></p><p><code>payment initiated</code></p><p><code>{{else}}</code></p><p><code>pending</code></p><p><code>{{/if}}</code></p> | <p>prints <code>paid</code> if <code>payment\_status</code> equals to <code>"paid"</code> </p><p>prints <code>payment initiated</code> if <code>payment\_status</code> equals to <code>initiated</code> </p><p>otherwise prints <code>pending</code></p> |
| <p><code>{{#if (price > 1000)}}</code></p><p><code>good deal</code></p><p><code>{{/if}}</code></p>                                                                                                                                                                     | prints the text `good deal` if price is greater than 1000                                                                                                                                                                                                |
| <p><code>{{#if (price >= 1000)}}</code></p><p><code>decent deal</code></p><p><code>{{/if}}</code></p>                                                                                                                                                                  | prints text `decent deal` if price is greater than or equal to 1000                                                                                                                                                                                      |
| <p><code>{{#if (price < 1000)}}</code></p><p><code>small deal</code></p><p><code>{{/if}}</code></p>                                                                                                                                                                    | prints text `small deal` If price less than 1000                                                                                                                                                                                                         |
| <p><code>{{#if (price <= 1000)}}</code></p><p><code>okay-ish deal</code></p><p><code>{{/if}}</code></p>                                                                                                                                                                | prints text `okay-ish deal` If price less than or equal to 1000                                                                                                                                                                                          |
| <p><code>{{#if (payment\_message contains "paid")}}</code></p><p><code>Payment is cleared</code><br><code>{{/if}}</code></p>                                                                                                                                           | prints `Payment is cleared` if `payment_message` contains the text `paid` *(for example, `this invoice has been paid` contains the text `paid` in it)*                                                                                                   |
| <p><code>{{#if (payment\_message not\_contains "paid")}}</code></p><p><code>Payment is due</code><br><code>{{/if}}</code></p>                                                                                                                                          | 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)*                                                                                      |
| <p><code>{{#if (status == "open" or status == "on-hold")}}</code></p><p><code>Payment is pending</code></p><p><code>{{/if}}</code></p>                                                                                                                                 | prints `Payment is pending` if `status` is `open` OR `on-hold`                                                                                                                                                                                           |
| <p><code>{{#if (status == "open" or status == "on-hold" or status == "under review")}}</code></p><p><code>Payment is pending</code></p><p><code>{{/if}}</code></p>                                                                                                     | prints `Payment is pending` if `status` is `open` OR `on-hold` OR `under review`                                                                                                                                                                         |
| <p><code>{{#if (status != "open" and status != "on-hold")}}</code></p><p><code>Payment is not pending</code></p><p><code>{{/if}}</code></p>                                                                                                                            | prints `Payment is not pending` if `status` is not `open` AND not `on-hold`                                                                                                                                                                              |
| <p><code>{{#if (status == "open" and priority == "high")}}</code></p><p><code>High priority open task</code></p><p><code>{{/if}}</code></p>                                                                                                                            | prints `High priority open task` if `status` is `open` AND if `priority` is `high`                                                                                                                                                                       |
| <p><code>{{#if (payment\_status != "paid")}}Please Clear the Dues within 30 days</code> </p><p><code>{{/if}}</code></p>                                                                                                                                                | prints `Please Clear the Dues within 30 days` if the `payment_status` is not equal to `paid`                                                                                                                                                             |
| <p><code>{{#if (status in "open,pending")}}In Progress... Please stay tuned for further updates.</code></p><p><code>{{/if}}</code></p>                                                                                                                                 | prints `In Progress... Please stay tuned for further updates.` if `status` is sub-string of `"open,pending"`                                                                                                                                             |

{% hint style="info" %}
The syntax for `if` statements used without any operators is as follows:

`{{#if myToken}}...{{/if}}`&#x20;
{% endhint %}

#### 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}}
```

<table><thead><tr><th>Data</th><th>Output</th></tr></thead><tbody><tr><td><pre><code>customer_name = John Doe
street = WinWood St.
city = NY
country = US
</code></pre></td><td><pre><code>John Doe,
WinWood St.,
NY, US
</code></pre></td></tr><tr><td><pre><code>customer_name = John Doe
city = NY
country = US
</code></pre></td><td><pre><code>John Doe,

NY, US </code></pre></td></tr></tbody></table>

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:

<table><thead><tr><th>Syntax</th><th>Data</th><th>Output</th></tr></thead><tbody><tr><td><pre><code>{{customer_name}},{{#if street}}
{{street}},{{/if}}
{{city}}, {{country}}
</code></pre></td><td><pre><code>customer_name = John Doe
city = NY
country = US
</code></pre></td><td><pre><code>John Doe,
NY, US
</code></pre></td></tr><tr><td><pre><code>{{customer_name}},{{#if street}}
{{street}},{{/if}}
{{city}}, {{country}}
</code></pre></td><td><pre><code>customer_name = John Doe
street = WinWood St.
city = NY
country = US
</code></pre></td><td><pre><code>John Doe,
WinWood St.,
NY, US
</code></pre></td></tr><tr><td><pre><code>{{customer_name}},
{{#if street}}{{street}},
{{/if}}{{city}}, {{country}}
</code></pre></td><td><pre><code>customer_name = John Doe
city = NY
country = US
</code></pre></td><td><pre><code>John Doe,
NY, US
</code></pre></td></tr><tr><td><pre><code>{{customer_name}},
{{#if street}}{{street}},
{{/if}}{{city}}, {{country}}
</code></pre></td><td><pre><code>customer_name = John Doe
street = WinWood St.
city = NY
country = US
</code></pre></td><td><pre><code>John Doe,
WinWood St.,
NY, US
</code></pre></td></tr></tbody></table>

### 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}}
```

{% code title="Output" %}

```
Apple
Orange
Strawberry
```

{% endcode %}

#### 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}}
```

{% code title="Output" %}

```
Iphone6 $799
Iphone7 $899
Iphone8 $999
```

{% endcode %}

### Bulleted List

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

### Numbered List

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

{% hint style="info" %}
Please use bullet insertion buttons from editor's tools pane for Bulleted and Numbered lists to work
{% endhint %}

### 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
```

<div><figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2F82E5wzsv3ddfZMlhbYgJ%2Flookbacks%20input.png?alt=media&#x26;token=51efc62a-186b-4fe5-ab59-745c4b90b336" alt=""><figcaption><p>Example Sales Invoice Template</p></figcaption></figure> <figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2Ftr0LLf7blmFqNvCtdKs0%2Flookbacks%20outpput.png?alt=media&#x26;token=235e35fa-46a6-49e2-b624-7ac985325f8c" alt=""><figcaption><p>Example Sales Invoice Template - Output</p></figcaption></figure></div>

## 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"}}**              | <p>The height is automatically adjusted to keep the proportions</p><p></p> |
| **{{insert\_image image1 height="300"}}**             | The width is automatically adjusted to keep the proportions                |

{% hint style="info" %}
&#x20;The image URL need to be publicly accessible so we can download and insert it in the document.
{% endhint %}

## 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)" bg\_color="color\_code(in hex values)" branding\_url="image\_url" branding\_ratio="ratio\_value(between 1 to 10)"}}**

| Order | Name            | Description                                                                                                               | Mandatory                     |
| ----- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| 1     | size            | QR Image size                                                                                                             | <p>No<br>Default: 100</p>     |
| 2     | margin          | QR Image height (px)                                                                                                      | <p>No</p><p>Default: 4</p>    |
| 3     | color           | Color of the QR                                                                                                           | <p>No<br>Default: #000000</p> |
| 4     | bg\_color       | Background Color for QR                                                                                                   | <p>No<br>Default: #FFFFFF</p> |
| 5     | branding\_url   | Inserts an image into the QR code for branding using a publicly accessible image URL.                                     | No                            |
| 6     | branding\_ratio | Set the size of the QR code’s branding image on a scale from 1 to 10, where 10 is the smallest size and 1 is the largest. | <p>No<br>Default: 4</p>       |

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

![100 X 100 with default margin 4 & value https://docupilot.com/](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FptM44aTB2clhjq39Ro16%2F100%20QR%20Final.png?alt=media\&token=194ab445-a9b8-42e7-b30e-6ff001b79d2f)

Example: `{{insert_qr url size="100" margin="3" bg_color="#3399FF"}}`

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FtnzaKhyxR2PFQbdNtXl0%2FMargin%20Final.png?alt=media&#x26;token=f1d240c4-206f-460a-9677-1150ae209f5b" alt=""><figcaption><p>100 X 100 with margin 3 &#x26; value https://docupilot.com</p></figcaption></figure>

Example: `{{insert_qr url margin="7" color="#FFFFFF" bg_color="#000000"}}`

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FriWAi4fihw9X9apoz3kn%2FScreenshot%202025-08-05%20at%207.15.05%E2%80%AFPM.png?alt=media&#x26;token=51dab0b3-9b52-4642-8fd2-103c1907c42f" alt=""><figcaption><p>Qr having margin 7 with white color and black background</p></figcaption></figure>

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

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FiqzYpykTOAi7hzs52dwg%2FBlue%20QR%20final.png?alt=media&#x26;token=10f0dcbc-464a-4a49-b17b-c86f7c4be694" alt=""><figcaption><p>QR with color blue &#x26; value <a href="https://docupilot.com/">https://docupilot.app/</a></p></figcaption></figure>

Example: `{{insert_qr url margin="1" color="#FFFFFF" bg_color="#000000"}}`

<div align="center"><figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FDxFpNGlO95dlEZ0QXTuN%2FFinal%20Margin%20QR.png?alt=media&#x26;token=bdff6091-61fc-4442-adf1-92e8420dccd4" alt="QR code example for background color" width="218"><figcaption><p>QR with white color and black background</p></figcaption></figure></div>

{% hint style="info" %}
The color of the QR should be given in hex coding only.
{% endhint %}

Example:  `{{insert_qr url margin="1" color="#FFFFFF" bg_color="#000000" branding_url=image_url branding_ratio="4"}}`

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2Fif0EsJe1ODtgfXaaxGOz%2FQR%20code%20with%20logo.png?alt=media&#x26;token=b52117e0-fa8d-404f-957e-aa9a8433fc32" alt="" width="226"><figcaption><p>QR code with branding image</p></figcaption></figure>

{% hint style="info" %}
&#x20;The image URL need to be publicly accessible so we can download and insert it in the document.
{% endhint %}

#### Inserting a Barcode with a Transparent Background

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

Example: `{{insert_qr url color="#FFFFFF" bg_color=”ffffff00”}}`

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2Fp9akylKv7OYldtdCkGgv%2FTransparent%20Background.png?alt=media&#x26;token=4ebdf224-7507-4f7a-b729-565fb59b0409" alt="" width="312"><figcaption><p>QR code with transparent background</p></figcaption></figure>

## 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 | <p>Barcode formats<br></p><p>CODE128</p><p>CODE39</p> | 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}}`

![CODE128 Format](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDwD-wIOendMUiQ8uVr%2F-M5IkCLiGGKUif27fpj6%2F-M5InmpRu5KRxIxSN7A8%2Fbarcode.JPG?alt=media\&token=a0f0a675-5682-4a5e-91af-cbb9ac27dfe9)

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

![CODE39 Format](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDwD-wIOendMUiQ8uVr%2F-M5Iob-eStzBl3_WWHFw%2F-M5Ip6uYYG2T-aBNGg0f%2Fcode39.png?alt=media\&token=37d17753-1e60-467c-92fe-b09c67310a99)

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

![Code 128 Format Barcode with width 3](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDwD-wIOendMUiQ8uVr%2F-M5Iob-eStzBl3_WWHFw%2F-M5IpSzbRNORnfnnu24S%2Fwider.png?alt=media\&token=445d3597-8d46-41dc-9c51-8821dd866d95)

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

![](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDwD-wIOendMUiQ8uVr%2F-M5Iob-eStzBl3_WWHFw%2F-M5IpxbGF2VSIi25Za3u%2Fshort.png?alt=media\&token=07436def-1274-4179-9559-a7f0acacea8a)

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

![](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FjWogKNcQPBx72n3AVe0R%2Fimage.png?alt=media\&token=6fd08b29-9aae-4344-a032-bf0ff696db10)

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

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FXxSzWc7zdc8M8UIiw822%2Fbarcode%20new.jpg?alt=media&#x26;token=2731af3f-4d12-4fe4-958d-784dd8126f32" alt=""><figcaption><p>Code 128 barcode with height 50 px and margin 10</p></figcaption></figure>

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

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FA4LJr9lV4QpbWy16Lhpz%2Fbarcode%20new.jpg?alt=media&#x26;token=2f31675a-0a43-457c-9f9b-0d7736af6aa8" alt=""><figcaption><p>Code 128 barcode with height 50 px and red in color</p></figcaption></figure>

#### 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'}}`

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FPEDK90vBwzDyTsMK994c%2FScreenshot%202024-11-27%20at%203.00.25%E2%80%AFPM.png?alt=media&#x26;token=5079e432-54bb-4a6a-95f0-b9feca3324d9" alt="" width="375"><figcaption><p>Barcode with Trasnparent background</p></figcaption></figure>

## 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 | <p>Map types<br></p><p>roadmap</p><p>satellite</p><p>hybrid</p><p>terrain</p> | No        | **roadmap**   |
| 4     | Zoom     | Zoom into the image                                                           | No        | 13            |

Example: **{{insert\_map Location width="500" height="500" map\_type="roadmap"}}**

![Location Value is Manchester](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDwD-wIOendMUiQ8uVr%2F-LjqKFkGneund1-S_wz0%2F-LjqNJ8CNhiKfWOErv08%2Fstaticmap.png?alt=media\&token=18e9b585-fae8-4902-bec9-5306e424fd69)

Example: **{{insert\_map Location  map\_type="roadmap" zoom= "20"}}**

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FKoqBIyQFPMXJNLQMepw7%2Fmaps%20new.jpg?alt=media&#x26;token=5e7c1dee-eda9-4c94-891c-9cd970cca85e" alt=""><figcaption><p><strong>Location value is Manchester, with map type as road map and a Zoom set to 20</strong></p></figcaption></figure>

Example: **{{insert\_map Location height="300" zoom= "5"}}**

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2F2FZvABkrPNXmFWOXpxEM%2Fmaps%20new.jpg?alt=media&#x26;token=432040a3-8481-4b28-b3c3-131d9dfb95f1" alt=""><figcaption><p><strong>Location value is Manchester with height as 300 px and zoom set to 5</strong></p></figcaption></figure>

## Grid Helper

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

Syntax:  `{{#grid items col_size=3}}`\
&#x20;              `{{@item1.title}}{{@item2.title}}{{@item3.title}}`\
&#x20;              `{{/grid}}`

Example :&#x20;

<figure><img src="https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FvvFsg34NCyRxj3gzzs7o%2FGrid%20helper.png?alt=media&#x26;token=00e4ccf7-a4fc-4c9a-88a4-a0511d359707" alt=""><figcaption><p>Grid helper </p></figcaption></figure>

## 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.

![](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FEc1eL2BmEjLkFVqxhM1e%2Fpage%20margin%20new.gif?alt=media\&token=68330b8d-fe36-44ce-80a4-222c4d4de0c4)

## Google Fonts

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 <https://fonts.google.com/>.

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

![Google Fonts](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2F0rkSsBC3f30rxoGsM0cO%2Fgoogle%20fonts%20new.gif?alt=media\&token=1dbc48d9-26e1-4ed2-a689-10176de5d74a)

{% hint style="warning" %}
Sometimes the document builder will not show the specified font but the document will be generated in the specified font.
{% endhint %}

## 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**.

{% hint style="info" %}
The default margin is 0.4 inches on all sides. You can also set it to zero.
{% endhint %}

![Page Margins](https://191679573-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDwD-wIOendMUiQ8uVr%2Fuploads%2FmJ7n0dOWgsAXYl0aa2Y8%2FPage%20margin.png?alt=media\&token=2189dfcb-d0f3-4c26-bc9c-4a2d8e3c9f1b)

## Comments

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

{% hint style="success" %}
Comments Syntax :  **{{!Your comments here}}**
{% endhint %}