Embed Documents on Your Website

This tutorial explains how to redirect your website visitors to the documents embedded in your web page. Your visitors will be able to fill out, sign and submit these documents using our eSignature API (Application Programming Interface).

Please note that if you need to send your users links to your documents via email (even if these links lead to documents embedded on your website), you should use the other tutorial Send Document Links Via Email.

Your Sample Workflow

We assume here that you need to implement the following workflow or a similar one:

1. Your users go to your website, enter some data in one of your HTML web forms and submit them.

2. Based on these data your system generates a PDF document (you can use also a static template here).

3. You redirect your users to the next page where you display them the document.

4. Your users fill out, sign and submit the document, after that your system will receive the completed copy.

Some details in your workflow may be different but the general idea is that you show your website visitors documents embedded in your website and they are able to complete and submit them.

Generate Document and Send Signature Request

In the first step you accept the input from your users or load it from your database. Then using this data you dynamically generate a PDF document that you will display to your users.

By the way, if you send out for signing each time one and the same document (except for the user’s data), you can consider using templates (see Send Out Templates For Signing). You won’t have to generate documents on the fly, but you will still be able to dynamically insert user’s data in the template fields.

Now we assume that you generated your document yourself, but the difference to the template scenario is minimal.

In the next step you need to execute the following signature request.

# upload document.pdf            
curl -u YOUR_API_KEY: -F file=@document.pdf https://api.digisigner.com/v1/documents

# got response: {"document_id":"5be88823-3ff5-4ec4-8175-459dee50f7fb"}            
            
curl -u YOUR_API_KEY: https://api.digisigner.com/v1/signature_requests \
-H 'Content-Type: application/json' \
-d '{"embedded": true, \
     "send_emails": false, \
     "documents" : [ \
      {"document_id": "5be88823-3ff5-4ec4-8175-459dee50f7fb", \
       "signers": [ \
        {"email": "invited_signer@email.com"} \
       ] \
      }] \
    }'

$client = new DigiSignerClient('YOUR_API_KEY'); 

$request = new SignatureRequest;
$request->setEmbedded(true);
$request->setSendEmails(false);
  
$document = new Document('document.pdf');
$request->addDocument($document);

$signer = new Signer('invited_signer@email.com');
$document->addSigner($signer);

$response = $client->sendSignatureRequest($request);

DigiSignerClient client = new DigiSignerClient("YOUR_API_KEY");

SignatureRequest request = new SignatureRequest();
request.setEmbedded(true);
request.setSendEmails(false);
 
Document document = new Document(new File("document.pdf")); 
request.addDocument(document);

Signer signer = new Signer("invited_signer@email.com");
document.addSigner(signer);

SignatureRequest response = client.sendSignatureRequest(request);

DigiSignerClient client = new DigiSignerClient("YOUR_API_KEY");

SignatureRequest request = new SignatureRequest();
request.Embedded = true;
request.SendEmails = false;

Document document = new Document("document.pdf");

Signer signer = new Signer("invited_signer@email.com");
document.Signers.Add(signer);
request.Documents.Add(document);

SignatureRequest response = client.SendSignatureRequest(request);

Please note the following two parameters: embedded and send_emails.

The parameter embedded, when set to true, forces the design of the embedded document to be more neutral (grey navigation bar, no background etc.) to ensure a better fit with your page design.

The parameter send_emails, when set to false, prevents sending of the email with the document link to the user. Normally you don’t need to send emails in such scenarios, because in the next step you are going to forward the user directly to your document anyway.

In our signature request we haven’t specified any fields for the signer. If you need to do this, please see Send Out Documents With Fields.

Response to Signature Request

As a result of your signature request you will receive the following response that you will need to parse.

Here is the sample response and the code you could use to parse it.

{"signature_request_id":"f9bf5865-de7e-4fd5-8be6-aa8d8f46735c",
 "send_emails":true,
 "embedded":false,
 "use_text_tags":false,
 "hide_text_tags":false,
 "is_completed":false,
 "documents":[
  {"signers":[
   {"email":"invited_signer@email.com",
    "is_signature_completed":false,
    "sign_document_url":"https://www.digisigner.com/online/showDocument?documentId=5be88823-3ff5-4ec4-8175-459dee50f7fb&invitationId=acfe6dc3-5a07-4edb-b019-ff23e112a020"
   }],
   "document_id":"5be88823-3ff5-4ec4-8175-459dee50f7fb"
  }]
}

// send signature request (see previous code sample)
...  
$response = $client->sendSignatureRequest($request);

foreach($response->getDocuments() as $document) {
  foreach($document->getSigners() as $signer) {
    $signDocumentUrl = $signer->getSignDocumentUrl();
  }
}

// send signature request  (see previous code sample)
...
SignatureRequest response = client.sendSignatureRequest(request);

for (Document document : response.getDocuments()) {
  for (Signer signer : document.getSigners()) {
    String signDocumentUrl = signer.getSignDocumentUrl();
  }
}

// send signature request  (see previous code sample)
...
SignatureRequest response = client.SendSignatureRequest(request);

foreach (Document document in response.Documents)
{
    foreach (Signer signer in document.Signers)
    {
        String signDocumentUrl = signer.SignDocumentUrl;
    }
}

All you should extract from the response is the parameter sign_document_url, which you will need to display the document as part of your page.

Forward User to Page With Document

Now you should forward the user to the page with the document. This can be your own web page that you can design according to your own design guidelines.

To display your document as part of this page you need to include the following HTML code snippet in it.

<iframe 
  src="https://www.digisigner.com/online/showDocument?documentId=5be88823-3ff5-4ec4-8175-459dee50f7fb&invitationId=acfe6dc3-5a07-4edb-b019-ff23e112a020" 
  style="text-align: center" 
  width="820px" 
  height="880px"></iframe>

Please note the value of the iframe’s src attribute. This is the sign_document_url that you extracted from the response to your signature request in the previous step.

Your document will be displayed in this iframe and the user will be able to view it, fill out, sign and submit it.

After that your system will be notified about the completion of the signature request via a callback. In your callback handler code you will be able to download the completed document from our system. See here for more information about callback Signature Request Callback.

Embed Documents on Your Website

Your Sample Workflow

Generate Document and Send Signature Request

Response to Signature Request

Forward User to Page With Document

Company

Industry

Documentation

Tools

Legal