How to determine signature position

Introduction

When integrating with the Circularo platform, it's crucial to accurately determine the position of the signature on the document. This guide is specifically tailored for developers who are integrating with Circularo and provides instructions on how to find the signature position using the platform's coordinate system.

Context

In Circularo, the position on the page is calculated using a normalized coordinate system. The width and height range from left to right, and from top to bottom, with values ranging from 0.0 to 1.0. By specifying the position, you are essentially placing a rectangle where the signature will be located. Additionally, you can also specify the height and width using a similar approach.

Understanding Position Calculation

It's important to note that the numeric value represents the starting position of the rectangle. For example, if you want to place the signature in the middle of the page (assuming it's half the page width), you would need to set the position at 0.25 on the X-axis.

Values

The values that you will see being used in guides are:

percentWidth
percentHeight
percentX
percentY

Example

In the graphic below you can see signature that is half of the page wide and is placed in the middle of the page on X-axis.

JSON


"percentX": 0.25,
"percentY": 0.4,
"percentWidth": 0.5,
"percentHeight": 0.15

Getting the position with the help of UI

Even though now we know how to calculate the position, in real life scenario it would be quite time-consuming. Usually there can be several other fields and signatures so we will use Circularo interface to help us get the positions from test documents.

In this case we want to sign company memorandum as well as placing our name in the document.

Go through the shortcut on home page “Sign now”

Upload your document and go for signing. In the preview place the text field fill it with your name, place the signature and Finish.

Save the id of the document from URL.

Retrieve document info through API request:

CODE

GET /documents/{id}

Read more about retrieving document info - Retrieve the document

In the response you will find signatureComponents with the position of the fields:

JSON

"signatureComponents": [
        {
          "actor": {
            "name": "admin@circularo.com",
            "type": "internal"
          },
          //...more data
          "component": "signature",
          "pages": [
            1
          ],
          "position": {
            "percentHeight": 0.05960278375957462,
            "percentWidth": 0.21313069734460888,
            "percentX": 0.4108208739825665,
            "percentY": 0.7664897649734648
          },
          //...more data
        },
        {
          "actor": {
            "name": "admin@circularo.com",
            "type": "internal"
          },
          //....more data
          "pages": [
            1
          ],
          "position": {
            "percentHeight": 0.01742424242424243,
            "percentWidth": 0.25407262021589794,
            "percentX": 0.11732571340606901,
            "percentY": 0.8073988558825557
          },
          "subtype": "annotation_generic",
          "text": "Adam Smith",
          //...more data
        }
      ],

Alternative

You can also find the positions directly from the browser dev tools without the need to retrieve the document with the API request.

Follow the same process, place the fields and click finish while having your dev tools with Network tab open.

The request will be named after the version of the document (below example is “2”). You will find the information in this request’s payload.