See behind the scenes
When the form is submitted we use the Envelopes: create API to send the signature request with the corresponding form information. The envelope we construct contains a document, a recipient of type signer, and tabs which contain the form fields information. If embedded signing is selected we must also set the clientUserId property on the recipient.
Multi-factor authentication can be added using an accessCode or additional Authentication (Phone or ID Check). Note that this example uses the Auto-Place feature for placing tabs on the document.
To create and send an envelope send an http POST request to:
POST /v2.1/accounts/{accountId}/envelopes
Click to view example request JSON
{
"status": "sent",
"emailSubject": "Personal Loan Application",
"emailBlurb": "Please sign the Loan application to start the application process.",
"documents": [
{
"documentId": "1",
"name": "Document",
"fileExtension": "docx",
"documentBase64": "-- Base64-encoding document bytes are here --"
}
],
"recipients": {
"signers": [
{
"tabs": {
"signHereTabs": [
{
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "X:",
"anchorXOffset": "100",
"anchorYOffset": "-2"
}
],
"fullNameTabs": [
{
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Name:",
"anchorXOffset": "100",
"anchorYOffset": "-2"
}
],
"textTabs": [
{
"name": "Phone",
"locked": "false",
"tabLabel": "Phone",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Phone:",
"anchorXOffset": "100",
"anchorYOffset": "-2"
},
{
"name": "AddressLine1",
"value": "123 Disneyland Ave",
"locked": "false",
"tabLabel": "AddressLine1",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Address:",
"anchorXOffset": "100",
"anchorYOffset": "-2"
},
{
"name": "AddressLine2",
"locked": "false",
"tabLabel": "AddressLine2",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Address:",
"anchorXOffset": "100",
"anchorYOffset": "35"
},
{
"name": "AddressCityStateZip",
"value": "Anaheim, CA 90210",
"locked": "false",
"tabLabel": "AddressCityStateZip",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Address:",
"anchorXOffset": "100",
"anchorYOffset": "70"
}
],
"numberTabs": [
{
"name": "Amount",
"locked": "false",
"tabLabel": "Amount",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Amount:",
"anchorXOffset": "100",
"anchorYOffset": "-2"
},
{
"name": "PaymentDuration",
"locked": "false",
"tabLabel": "PaymentDuration",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Payment Duration:",
"anchorXOffset": "200",
"anchorYOffset": "-2"
}
],
"emailTabs": [
{
"name": "Email",
"value": "-- RECIPIENT EMAIL HERE --",
"tabLabel": "Email",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "E-mail:",
"anchorXOffset": "100",
"anchorYOffset": "-2"
}
],
"formulaTabs": [
{
"formula": "[Amount]/[PaymentDuration]",
"name": "MonthlyPayment",
"tabLabel": "MonthlyPayment",
"documentId": "1",
"recipientId": "1",
"pageNumber": "1",
"anchorString": "Monthly Payment:",
"anchorXOffset": "200",
"anchorYOffset": "-2"
}
]
},
"name": "-- RECIPIENT NAME HERE --",
"email": "-- RECIPIENT EMAIL HERE --",
"recipientId": "1",
"accessCode": "12345", // if access code selected
"clientUserId": "1001" // if embedded signing selected
}
]
}
}
If Embedded Signing was selected we next use the EnvelopeViews: createRecipient API to generate a signing URL for the recipient. For this to work the clientUserId property must be set on the recipient when the envelope was sent during step 1.
Once the envelope is sent we save the envelope ID and Recipient information to our session then redirect to the /sign/embedded page. There we retrieve the envelope ID and recipient info from our session and create the recipient view by generating the URL and displaying in a full-width and full-height iframe.
To create the recipient view of the envelope we send an http POST request to:
POST /v2.1/accounts/{accountId}/envelopes/{envelopeId}/views/recipient
Click to view example request JSON
{
"clientUserId": "1001",
"userName": "-- RECIPIENT NAME HERE --",
"email": "-- RECIPIENT EMAIL HERE --",
"recipientId": "1",
"returnUrl": "-- RETURN URL HERE --",
"authenticationMethod": "email"
}