Fillthedoc was created due to a lack of a lightweight, yet powerful contract automation engine. Many contract automation services are difficult to integrate without adding more complexity to your business logic; making it much less cost effective. Fillthedoc addresses this problem with a simple, yet a clever solution that does not involve any intrusive modifications to your codebase, all while giving you full control.

In this article we will show you how to get started with the fillthedoc API. We will cover how to create a template in the dashboard; pull created templates from the API;  create and fetch documents via the API;  and last, but, not least, interact with end-user input. Let's get started with registering an account.

Creating a Template

The template consists of a form, which may be filled out by the end user, and text content. The content contains placeholders that are filled with the data of the form. More advanced functions can be used, like expressions and formatting.


Now that we have signed up, lets create a new template by navigating to Templates in the dashboard. In the top right of your screen, you should see a blue button New Template +. Click it!

Click the New Template + button located top-right.

We should now be in the template editor, and be presented with the starting screen were we can specify our template settings. Here you can give your template an identifier. Customize it by specifying either Dutch or English as your locale; tweak its font family; and assign it a header, footer and disclaimer template. In this guide, we will not be covering header, footer and disclaimer template -- for now understand that these are child templates that can be inserted in any main template.

Tweak your template and hit the "OK" button!

The template editor is divided into three parts: 1) on the left hand side we have a sidebar with all the different types of fields that can be inserted into a document; 2) in the middle we have the form which contains all the steps and fields we have added and were we can customize these; and last but not least, 3) on the right hand side we have the editor where you can customize and design your document. The final outcome can be viewed by switching from Edit to View mode in the top right.

Template editor in Edit Mode with a bunch of added fields and text!

Get yourself started by adding some fields by clicking on them in the left hand sidebar. Lets start with a date field shall we?

When adding a field, we can customize it and define the fields behavior

Give the an identifiable label and field name (in the above screenshot we have set label and field name equal to date). The field name is important as this is the identifier used in the template editor, meaning that if the field name is defined as date, its corresponding editor tag will be {{date}}

Depending on the type of field, you will be presented with options to customize its default behavior, located on the left. Lets set its default value as Default current date and for validation lets enable required and set a minimum range bound on the date.

Take your time to play around a bit and add a few other fields. You will notice that while adding a field you are presented with many more complex options such as specifying conditions and expressions. In this article we will not cover these functionalities, however, you can read more about the usage of expressions and conditions along with other features in our documentation.

Lets click the View button located top-right of the editor to get a live preview of how our document will appear for the end-user.

Template editor in View Mode, allowing editors to get a sense of how the document will appear to their end-users.

Creating an Access Token

Now that we have created our first template the fun part starts! It's time to pull out your favorite code editor. In this tutorial we will be using cURL to interact with the API, however, you may interact with the API in any computer language of your liking.

To start we will need to create a new access token by heading to your account settings and navigating to the Access Tokens under your Account Settings.

You may manage your access tokens in your account settings.

Click the blue button Add token +. You will be presented with your access token, write this down and keep it safe and out of preying eyes! We will be skipping the advanced options when creating a new token for now.

Alright! Now that we have our access token, we can start interacting with the API!

Creating a Document

Having covered that, we can move on to the real fun! Lets focus our eyes now on the documents API documentation.

Users can create a document based on a template by filling out a form. These documents are stored by fillthedoc and given a 32 byte unique (unguessable) hash as identifier. The document can only be fetched using this hash as JSON data, HTML or PDF.
API endpoint /api/documents allows us to create a new document according to a specified template.

In order to create a new document we will need to work with the /api/documents/ endpoint. The only required parameter here is template , which is the field were specify the id from earlier,however, for the sake of the demo we will supply a name, address, amount and services here. Note how we do not provide a date parameter as we specified the default date to be the current one earlier in the template editor.

Request

curl -d '{ "template": "082e45fc-eeaa-4717-ac56-56dc4bfac056", "values": { "name": "Bob", "address": "Diemenstraat 200", "amount": "12.30", "services": "consultancy" }, "callback": "https://webhook.site/45165796-6ec8-4e75-9531-7fc15d5f25a7" }' -H "Content-Type: application/json" -H "Authorization: Bearer {{TOKEN}}" -X POST https://fillthedoc.com/api/documents

Note: Replace {{TOKEN}} with your secret token that you wrote down earlier.

Response

{
    "id": "k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc",
    "organization": {
        "id": "064698d3-82e5-4e5c-ac55-09c2ab9527ef",
        "name": "LegalThings",
        "db_name": "legalthings",
        "type": null,
        "slug": "legalthings",
        "image": null,
        "closed": false,
        "billing_contact_email": null,
        "extra_billing_info": null
    },
    "template": {
        "version": "2020-05-15T11:07:51",
        "id": "082e45fc-eeaa-4717-ac56-56dc4bfac056",
        "reference": "demo",
        "published": true,
        "name": "Demo",
        "description": "This is a demo template",
        "categories": [],
        "folder": "",
        "disclaimer": "",
        "locale": "en_GB",
        "section": "",
        "last_modified": {
            "user": null,
            "date": "2020-05-15T11:07:51+00:00",
            "etag": null
        },
        "created_at": "2020-05-15T09:46:10+00:00",
        "import_master_date": null,
        "_sort": "\/\/demo",
        "type": "template"
    },
    "values": {
        "name": "Bob",
        "address": "Diemenstraat 200",
        "amount": "12.30",
        "services": "consultancy"
    },
    "step": null,
    "created": {
        "user_id": "5246650f5ae940c8db07f168e154cd63071c2dc81ad8f33d9aa69f4a965386ba",
        "date": "2020-05-15T13:52:47+00:00"
    },
    "locale": null,
    "hash": null,
    "links": {
        "edit": "https:\/\/fillthedoc.io\/legalthings\/k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc",
        "pdf": "https:\/\/www.fillthedoc.com\/api\/documents\/k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc.pdf",
        "html": "https:\/\/www.fillthedoc.com\/api\/documents\/k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc.html"
    },
    "edit_url": "https:\/\/fillthedoc.io\/legalthings\/k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc"
}

As you may have noticed, we added a callback parameter which will be called when the document is filled out. You can create a free, instant url where you can see the callback in action at webhook.site. This will come in handy in a minute when testing our new document.

Browse to the URL provided in the links.edit field. Here that would be https://fillthedoc.io/legalthings/k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc were you can see the live document, filled in via the API call. Click the green Finish button and now watch your webhook.site dashboard.

webhook.site POST insight on live edit.

Look for the id key. In this example the hash is k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc and should be treated as an unique identifier for the document.

Fetching a Document

Shall we see if we can fetch a HTML copy of the document?

Request

curl -H "Accept: text/html" -H "Authorization: Bearer {{TOKEN}}" -X GET https://fillthedoc.com/api/documents/k04ogko444k4g800c4cgkkkckkg8cg04cccgws8ks8ksskgwkwoocggg0wggkowc

Note: 1) replace {{TOKEN}} with your secret token that you wrote down earlier; 2) you can also request for a JSON or PDF copy by changing the header to either application/json and application/pdf respectively.

Response

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700">
    <link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/legalthings-cdn/bootstrap-html-pdf/css/bootstrap.min.css">
    <style>
        span.placeholder:not(.raw) {
            white-space: pre-wrap;
        }

        body {
            font-family: Droid Serif;
            font-size: 11px;
            line-height: 1.2;
            max-width: 575px;
        }

        h1 {
            font-size: 24px;
            margin: 0.67em 0;
            line-height: 1.2;
        }

        h2 {
            font-size: 16px;
            margin: 0.8em 0;
            line-height: 1.2;
        }

        h3 {
            font-size: 13px;
            margin: 1em 0;
            line-height: 1.2;
        }

        h4 {
            font-size: 12px;
            margin: 1.33em 0;
            line-height: 1.2;
            font-weight: bold;
        }

        li:empty {
            display: none;
        }

        p {
            min-height: 1.2em;
        }

        mark {
            background-color: yellow !important;
        }
    </style>
</head>

<body>
    <p>2020-05-14T22:00:00+00:00</p>
    <p><br></p>
    <p>The client Bob, registered on the address Diemenstraat 200, hereby agrees to pay the total sum of €12.30 to LegalThings for delivering consultancy services as agreed upon.</p>
    <p><br></p>
    <p>Please transfer the total amount of €​​​​​​​12.30 to NL91 ABNA 0417 1643 00.</p>
</body>

</html>

Voila!

That's it! We hope that this walk through gave you a better understanding on how to interact with the fillthedoc API. If you still have any questions, make sure to check out the fillthedoc's documentation, which covers the technicalities in a much deeper depth.