Text Anchor to Identify Signature Field

Hi dilgen, One suggestion I can make is putting white colored text where you want your signatures to be when generating your pdf. Then, once you upload your document to esignlive, you can position your signatures based on those texts. The guide below shows you how to use the text anchor feature. https://developer.esignlive.com/guides/feature-guides/text-anchors/

There is a feature on the road map, I believe for 2017 that will help with this issue. It would allow for a similar extraction method as the PDF form fields, only with text. Haris or I will post back when we know when this new feature will be released. Hopefully the text anchor method Haris mentioned will work for the time being.

Is this text anchor feature only for the new UI (esignlive.com) and not the old UI (e-signlive.com)? -David

Hi David, The text anchor is indeed available in the old user interface.

Thanks! I can't seem to get mine to work. I will try a couple more times. If not successful, I will reach out to you. -David

Haris, I have been working to implement the text anchors via the link you supplied (thank you, by the way). However, I have been receiving an error and I cannot get the call to go through. Here is my current code (I am using PHP, so I am trying to convert the JSON into a PHP array).

//Create package
    public function buildPackage($firstName, $lastName, $email) {
        $build = array(
            "settings" => array(
                "ceremony" => array(
                    "inPerson" => true,
                )
            ),
            "roles" => array(
                array(
                    "id" => "Signer1",
                    "type" => "SIGNER",
                    "signers" => array(
                        array(
                            "email" => $email,
                            "firstName" => $firstName,
                            "lastName" => $lastName,
                            "id" => "Signer1",
                        ),
                    ),
                    "name" => "Signer1",
                ),
                array(
                    "id" => "Signer2",
                    "type" => "SIGNER",
                    "signers" => array(
                        array(
                            "email" => "[email protected]",
                            "firstName" => "David",
                            "lastName" => "Ilgen",
                            "id" => "Signer2",
                        ),
                    ),
                    "name" => "Signer2",
                ),
                array(
                    "id" => "Sender1",
                    "type" => "SENDER",
                    "signers" => array(
                        array(
                            "email" => "[email protected]",
                            "firstName" => "Test",
                            "lastName" => "Sender",
                            "id" => "Sender1",
                        ),
                    ),
                    "name" => "Sender1",
                ),
            ),
            "documents" => array(
                array(
                    "approvals" => array(
                        array(
                            "fields" => array(
                                array(
                                    "type" => "SIGNAUTRE",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "APPLICANTS SIGNATURE",
                                        "index" => 0,
                                        "width" => 150,
                                        "height" => 40,
                                        "anchorPoint" => "TOPLEFT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 0,
                                        "topOffset" => -50,
                                    ),
                                    "left" => 0,
                                    "subtype" => "FULLNAME",
                                    "top" => 0,
                                ),
                                array(
                                    "value" => null,
                                    "type" => "INPUT",
                                    "binding" => "{approval.signed}",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "DATE",
                                        "index" => 1,
                                        "width" => 75,
                                        "height" => 40,
                                        "anchorPoint" => "TOPRIGHT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 10,
                                        "topOffset" => -30,
                                    ),
                                    "left" => 0,
                                    "subtype" => "LABEL",
                                    "top" => 0,
                                ),
                            ),
                            "role" => "Signer1",
                        ),
                        array(
                            "fields" => array(
                                array(
                                    "type" => "SIGNAUTRE",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "APPLICANTS SIGNATURE",
                                        "index" => 1,
                                        "width" => 150,
                                        "height" => 40,
                                        "anchorPoint" => "TOPLEFT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 0,
                                        "topOffset" => -50,
                                    ),
                                    "left" => 0,
                                    "subtype" => "FULLNAME",
                                    "top" => 0,
                                ),
                            ),
                            "role" => "Signer2",
                        ), 
                        array(
                            "fields" => array(
                                array(
                                    "type" => "SIGNAUTRE",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "AGENT SIGNATURE",
                                        "index" => 0,
                                        "width" => 150,
                                        "height" => 40,
                                        "anchorPoint" => "TOPLEFT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 0,
                                        "topOffset" => -50,
                                    ),
                                    "left" => 0,
                                    "subtype" => "FULLNAME",
                                    "top" => 0,
                                ),
                                array(
                                    "value" => null,
                                    "type" => "INPUT",
                                    "binding" => "{approval.signed}",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "DATE",
                                        "index" => 0,
                                        "width" => 75,
                                        "height" => 40,
                                        "anchorPoint" => "TOPRIGHT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 10,
                                        "topOffset" => -30,
                                    ),
                                    "left" => 0,
                                    "subtype" => "LABEL",
                                    "top" => 0,
                                ),
                            ),
                            "role" => "Sender1",
                        ),
                    ),
                    "name" => "Sample Application",
                ),
            ),  
            "name" => "Application Example",
            "type" => "PACKAGE",
            "language" => "en",
            "autoComplete" => true,
            "status" => "DRAFT",            
        );
        $packageJSON = json_encode($build);
        $packageId = json_decode($this->sendRequest($this->packageAppend, $packageJSON, NULL, NULL), true);
        return $packageId;
    }

    //Upload document
    public function buildDocument($packageId, $firstName, $lastName, $emailAddress) {
        $build = array(
            'fields' => array(
                array(
                    'value' => $firstName,
                    'name' => 'first_name',
                ),
                array(
                    'value' => $lastName,
                    'name' => 'last_name',
                ),
                array(
                    'value' => $emailAddress,
                    'name' => 'email',
                ),
            ),
            'extract' => true,
            'name' => 'Sample Contract',
            'id' => 'contract'
        );
        $doc = file_get_contents("documents\TestApp.pdf");
        $documentJSON = json_encode($build);
        $status = $this->sendRequest($this->packageAppend . $packageId['id'] . '/documents', $documentJSON, $doc, NULL);
        return $status;
    }

Did I convert the JSON over incorrectly, or am I missing something simple that would fix the issue? Thank you, David Ilgen

I get an error too. Using REST API. I will wait for a response. Could be related.

Hi David, What is the error you are getting? Edit: Ah nevermind. I can already spot the problem. The text anchor feature only works during document upload. So you will to define your text anchors in the buildDocument() function instead of the buildPackage(). Let me know if this fixes your problem.

Haris, I have attached a screenshot of the iframe with the error message. This is the only error mesage I ever see, as I have gotten it any time I have had a failed call (even before the text anchors). Thank you, David Ilgen

I get a code 500 internal server error.

Refer to my previous reply and let me know.

Haris, Ah, I figured it was something simple like that. I just assumed it went in buildPackage since the JSON string had it with "Roles". I will switch that around in the morning, hopefully with success. Thank you for your help. David Ilgen

No problem. Let me know :) edit: detroyer, did it fix your issue?

So, I need to build the package in DRAFT mode. Make the REST API to get a package id. Then build the document and resend using the package id and set package status to SENT? I am confused.

Are you also following my PHP example as well?

I am using REST API and just send a static package json file. The only thing dynamic is json parse the file to set the signer email, firstname, and lastname. Here's my json file. I do notice dilgen had his extract set to true where mine was false. The example you provided was set to false. { "type": "PACKAGE", "id": "", "status": "DRAFT", "name": "Package", "description": "Package", "language": "en", "consent": "default-consent", "completed": null, "documents": [ { "approvals": [ { "role": "claimSigners", "fields": [ { "subtype": "FULLNAME", "type": "SIGNATURE", "extract": false, "extractAnchor": { "text": "SIGNATURE", "anchorPoint": "TOPLEFT" } } ] } ], "data": null, "description": "Form", "id": "test1", "name": "Test_1", "status": "" } ], "settings": { "ceremony": { "style": null, "layout": { "footer": null, "brandingBar": null, "iframe": true, "navigator": false, "header": { "feedback": false, "breadcrumbs": false, "globalActions": { "hideEvidenceSummary": false, "saveAsLayout": false, "confirm": false, "download": false }, "globalNavigation": false, "sessionBar": false, "titleBar": null } }, "events": null, "inPerson": false, "declineButton": false, "declineReasons": [], "disableDeclineOther": true, "disableDownloadForUncompletedPackage": true, "disableFirstInPersonAffidavit": true, "disableInPersonAffidavit": true, "disableOptOutOther": true, "disableSecondInPersonAffidavit": true, "documentToolbarOptions": null, "handOver": null, "hideCaptureText": true, "hideLanguageDropdown": true, "hidePackageOwnerInPerson": true, "hideWatermark": true, "maxAuthFailsAllowed": 3, "optOutButton": false, "optOutReasons": [] } }, "roles": [{ "id": "claimSigners", "index": 0, "type": "SIGNER", "signers": [{ "id": "claimSigner1", "email": "claimSigner1Email", "firstName": "claimSigner1FirstName", "lastName": "claimSigner1LastName" }] }] }

Just as an fyi, dilgen is following my PHP example where I separated the process into: create package, upload documents, and send package. Obviously, you do not have to do it that way. You can achieve that all in one call. As for the error you are getting, it looks like there might be an issue with your json. I will test it out and get back to you.

I think I now understand the logic flow after reading the php. Like Daivid Ilgen, I will rework the logic tomorrow morning and report back. :)

Interesting to know. Thanks!

I was able to find the issue with your JSON. There were some parameters missing where you defined your text anchors. I know in the guide it says that the only required parameters are the anchor text and the anchor point, but it seems now there all those parameters are now required. I will go ahead and fix that in the guide.

{
  "type": "PACKAGE",
  "id": "",
  "status": "DRAFT",
  "name": "Package",
  "description": "Package",
  "language": "en",
  "consent": "default-consent",
  "completed": null,
  "documents": [
    {
      "approvals": [
        {
          "role": "claimSigners",
          "fields": [
            {
              "subtype": "FULLNAME",
              "type": "SIGNATURE",
              "extract": false,
              "extractAnchor": {
                "text": "SIGNATURE",
                "anchorPoint": "TOPLEFT",
                "characterIndex": 0,
                "leftOffset": 0,
                "topOffset": -50,
                "index": 0,
                "width": 150,
                "height": 40
              }
            }
          ]
        }
      ],
      "data": null,
      "description": "Form",
      "id": "test1",
      "name": "Test_1",
      "status": ""
    }
  ],
  "settings": {
    "ceremony": {
      "style": null,
      "layout": {
        "footer": null,
        "brandingBar": null,
        "iframe": true,
        "navigator": false,
        "header": {
          "feedback": false,
          "breadcrumbs": false,
          "globalActions": {
            "hideEvidenceSummary": false,
            "saveAsLayout": false,
            "confirm": false,
            "download": false
          },
          "globalNavigation": false,
          "sessionBar": false,
          "titleBar": null
        }
      },
      "events": null,
      "inPerson": false,
      "declineButton": false,
      "declineReasons": [],
      "disableDeclineOther": true,
      "disableDownloadForUncompletedPackage": true,
      "disableFirstInPersonAffidavit": true,
      "disableInPersonAffidavit": true,
      "disableOptOutOther": true,
      "disableSecondInPersonAffidavit": true,
      "documentToolbarOptions": null,
      "handOver": null,
      "hideCaptureText": true,
      "hideLanguageDropdown": true,
      "hidePackageOwnerInPerson": true,
      "hideWatermark": true,
      "maxAuthFailsAllowed": 3,
      "optOutButton": false,
      "optOutReasons": []
    }
  },
  "roles": [
    {
      "id": "claimSigners",
      "index": 0,
      "type": "SIGNER",
      "signers": [
        {
          "id": "claimSigner1",
          "email": "[email protected]",
          "firstName": "claimSigner1FirstName",
          "lastName": "claimSigner1LastName"
        }
      ]
    }
  ]
}

Thanks Haris! That worked!

Hey Haris, I moved the code into "buildDocument", but am still unable to make a successful call. Do I need the "documents" and "approvals" arrays? I tried both with and without, but still nothing.

//Upload document
    public function buildDocument($packageId) {
        $build = array(
            "documents" => array(
                array(
                    "approvals" => array(
                        array(
                            "fields" => array(
                                array(
                                    "type" => "SIGNAUTRE",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "APPLICANTS SIGNATURE",
                                        "index" => 0,
                                        "width" => 150,
                                        "height" => 40,
                                        "anchorPoint" => "TOPLEFT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 0,
                                        "topOffset" => -50,
                                    ),
                                    "left" => 0,
                                    "subtype" => "FULLNAME",
                                    "top" => 0,
                                ),
                                array(
                                    "value" => null,
                                    "type" => "INPUT",
                                    "binding" => "{approval.signed}",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "DATE",
                                        "index" => 1,
                                        "width" => 75,
                                        "height" => 40,
                                        "anchorPoint" => "TOPRIGHT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 10,
                                        "topOffset" => -30,
                                    ),
                                    "left" => 0,
                                    "subtype" => "LABEL",
                                    "top" => 0,
                                ),
                            ),
                            "role" => "Signer1",
                        ),
                        array(
                            "fields" => array(
                                array(
                                    "type" => "SIGNAUTRE",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "APPLICANTS SIGNATURE",
                                        "index" => 1,
                                        "width" => 150,
                                        "height" => 40,
                                        "anchorPoint" => "TOPLEFT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 0,
                                        "topOffset" => -50,
                                    ),
                                    "left" => 0,
                                    "subtype" => "FULLNAME",
                                    "top" => 0,
                                ),
                            ),
                            "role" => "Signer2",
                        ), 
                        array(
                            "fields" => array(
                                array(
                                    "type" => "SIGNAUTRE",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "AGENT SIGNATURE",
                                        "index" => 0,
                                        "width" => 150,
                                        "height" => 40,
                                        "anchorPoint" => "TOPLEFT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 0,
                                        "topOffset" => -50,
                                    ),
                                    "left" => 0,
                                    "subtype" => "FULLNAME",
                                    "top" => 0,
                                ),
                                array(
                                    "value" => null,
                                    "type" => "INPUT",
                                    "binding" => "{approval.signed}",
                                    "extract" => false,
                                    "extractAnchor" => array(
                                        "text" => "DATE",
                                        "index" => 0,
                                        "width" => 75,
                                        "height" => 40,
                                        "anchorPoint" => "TOPRIGHT",
                                        "characterIndex" => 0,
                                        "leftOffset" => 10,
                                        "topOffset" => -30,
                                    ),
                                    "left" => 0,
                                    "subtype" => "LABEL",
                                    "top" => 0,
                                ),
                            ),
                            "role" => "Sender1",
                        ),
                    ),
                ),
            ),            
            'extract' => true,
            'name' => 'Sample Contract',
            'id' => 'contract'
        );
        $doc = file_get_contents("documents\TestApp.pdf");
        $documentJSON = json_encode($build);
        $status = $this->sendRequest($this->packageAppend . $packageId['id'] . '/documents', $documentJSON, $doc, NULL);
        return $status;
    }

Thank you, David Ilgen

Try removing the "documents" array only and keep the "approvals".

Still nothing with that array removed.

Let me try add text anchors to my PHP example. I'll get back to you shortly.

In the mean time, can you try and fix your typo in your code see if that fixes the problem?

"type" => "SIGNAUTRE"

Should be

"type" => "SIGNATURE"

Here's a working buildDocument() function with the document I provided in my PHP blog:

//Upload document
	public function buildDocument($packageId)
	{
		$build = array(
			'approvals' => array(
				array(
					'role' => 'Signer1',
					'fields' => array(
                                array(
                                    'type' => 'SIGNATURE',
                                    'extract' => false,
                                    'extractAnchor' => array(
                                        'text' => 'Client Signature',
                                        'index' => 0,
                                        'width' => 150,
                                        'height' => 40,
                                        'anchorPoint' => 'TOPLEFT',
                                        'characterIndex' => 0,
                                        'leftOffset' => 0,
                                        'topOffset' => -50,
                                    ),
                                    'left' => 0,
                                    'subtype' => 'FULLNAME',
                                    'top' => 0,
                                )
                            )
					)
				),
			'name' => 'Sample Contract',
			'id' => 'contract'
		);
		$doc = file_get_contents("documents\sample_contract2.pdf");
		$documentJSON = json_encode($build);
		$status = $this->sendRequest($this->packageAppend . $packageId['id'] . '/documents', $documentJSON, $doc, NULL);
		return $status;
	}

Well, this is a little bit embarrassing. That typo seems to have done the trick. I think I may have been staring at this code for a bit too long. As always, thank you for all of your help - I greatly appreciate it. David

Hey Haris, I am currently working on some small changes to my code - I was wondering how I could change the signature from "Esigned by Full Name" to "E-Signed Date by Full Name". For example, I want the signature to look like the one in the attached image, which is the result using your code found here. Using the code (essentially the same as your last reply) above, would I need to change the "type" or "subtype" to something different? Thank you, David

Hi David, To change the text in the signature, you will need to send support an email to have it changed for you. This is not something that is available through our API.