API Reference

Embedded Signing

Embedded signing (also called the envelope recipient view) enables users to view and sign documents directly through your app or website. To use embedded signing, your app must:

  • Generate signing URLs
  • Authenticate the envelope recipients
  • Present the signing request in the app UI
  • Redirect the user once the transaction is complete

Steps

1. Create a template in web admin

2. Use the create sign request API to create a new envelope. If it succeeds, you can get signing URLs in the response.

Here is a sample response from a "create sign request" API call:

{
  "docName": "Example-One-Way-Non-Disclosure-Agreement.pdf",
  "fileSize": 18806,
  "subject": "Please sign the document.",
  "recipients": [
    {
      "id": 1016257209,
      "index": 0,
      "indexFrom": -1,
      "name": "Joe Doe",
      "email": "[email protected]",
      "order": 1,
      "code": "",
      "state": 0,
      "url": "https://docmadeeasy.com/sign-pdf-v9?doc=2705&r=0&rn=Joe+Doe&re=joe.doe%40mailinator.com&ras=false&dec=false&h=b53293f94db7a175942bf9777cd4f0fb7859b5caa92d8b6d4d245012ab48b499#4WXM672trtPVo9xNQjnaeou3ZRv9GevebN5m4ptVHkRs",
      "urlWithExpiry": "https://docmadeeasy.com/sign-pdf-v9?doc=2705&r=0&rn=Joe+Doe&re=joe.doe%40mailinator.com&ras=false&dec=false&le=1668360260293&h=b7c1956fbe6d259af70a421da6057047af31b029242116410065c088f2c92c72&he=le,#4WXM672trtPVo9xNQjnaeou3ZRv9GevebN5m4ptVHkRs",
      "auditUrl": "",
      "updateTime": 0,
      "select": 1
    }
  ],
  "success": true,
  "envelopeType": 0,
  "sentTime": 1668359960288,
  "updateTime": 1668359960289,
  "id": "C4rZzYY3ugKHifyXZG1wRmr4jUtbYyk1f",
  "message": "Hello {{recipient_name}},\n\n{{sender_name}} has sent you a new document to view and sign. Please click on the link to begin signing."
}

The value of "url" in the response JSON string is the signing URL.

3. Use the signing URLs on the client side.

Client Side

Add this line of code to your website:

<script type="text/javascript" src="https://docmadeeasy.com/js/embedded.js"></script>

Then call this function to start signing:

function embeddedSign(url, container, callbacks, dimension)
ParameterDescription
urlThe signing URL obtained from calling creating sign request API
containerThe ID of the container that the iframe will append to
callbacksAn object with properties [loaded, signed, reassigned, declined, error] and their values are functions for handling the callback event.
dimensionAn object with property width and height. Default value is {width: '100%', height: '100%'}
Callback Event NameDescription
loadedCalled when PDF document is loaded.
signedCalled when PDF document is signed.
reassignedCalled when signer has reassigned it to someone else.
declinedCalled when signer has declined signing.
errorCalled when an error occurred.

Example 1:

let url = "https://docmadeeasy.com/sign-pdf-v9?doc=2664&r=0&rn=Alice&re=k212%40mailinator.com&pf=eyJmaWVsZF9jb21wYW55IjoibXNmdCIsImZpZWxkX2Nib3giOiJ5ZXMiLCJmaWVsZF90aXRsZSI6InNhbGVzIHZwLiJ9&h=811b14b51236c6398e1143fb3b165716325a707d05ad0e0a36e8d2fe06c74299&rurl=http%3A%2F%2Fgoogle.com#8e3E933qgiHr27pxiQJPbP9hLX5qcAcRzmq2GdULaJgP";
let callbacks = { "loaded": function(){ console.log("loaded ---"); }, "signed": function(){console.log("signed---");} }
embeddedSign(url, "signcontainer", callbacks);

Example 2: 

let url = "https://docmadeeasy.com/sign-pdf-v9?doc=2664&r=0&rn=Alice&re=k212%40mailinator.com&pf=eyJmaWVsZF9jb21wYW55IjoibXNmdCIsImZpZWxkX2Nib3giOiJ5ZXMiLCJmaWVsZF90aXRsZSI6InNhbGVzIHZwLiJ9&h=811b14b51236c6398e1143fb3b165716325a707d05ad0e0a36e8d2fe06c74299&rurl=http%3A%2F%2Fgoogle.com#8e3E933qgiHr27pxiQJPbP9hLX5qcAcRzmq2GdULaJgP";
let callbacks = { "loaded": function(){ console.log("loaded ---"); }, "signed": function(){console.log("signed---");}, "error": function(){console.log("error occurred---");} }
let dim = {width:'800px', height:'600px'}
embeddedSign(url, "signcontainer", callbacks, dim);

A full HTML example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      
    <!--Include the required js lib -->
    <script type="text/javascript" src="https://docmadeeasy.com/js/embedded.js"></script>
</head>

<body >
<script>
   let url = "https://docmadeeasy.com/sign-pdf-v9?doc=2664&r=0&rn=Alice&re=k212%40mailinator.com&pf=eyJmaWVsZF9jb21wYW55IjoibXNmdCIsImZpZWxkX2Nib3giOiJ5ZXMiLCJmaWVsZF90aXRsZSI6InNhbGVzIHZwLiJ9&h=811b14b51236c6398e1143fb3b165716325a707d05ad0e0a36e8d2fe06c74299&rurl=http%3A%2F%2Fgoogle.com#8e3E933qgiHr27pxiQJPbP9hLX5qcAcRzmq2GdULaJgP";
   let callbacks = { "loaded": function(){ console.log("loaded ---"); }, "signed": function(){console.log("signed---");} }
   embeddedSign(url, "signcontainer", callbacks);
</script>
   
<!-- Container. Signing area will be appended to this div -->
<div id="signcontainer" style=" display: flex; width: 100%; height: 100vh; flex-direction: column; background-color: blue; overflow: hidden;">
</div>

</body>
</html>

An example document will be displayed in browser for signing:

JSFiddle Playground