Skip to navigation
How-to guidesUse documents

How to create a signable HTML document

View as Markdown

This topic demonstrates how to send HTML code directly to create a document for responsive signing. The Docusign advanced responsive signing feature enables you to use HTML pages as signing documents in an envelope.

Run this code example from our Quickstart or launcher projects: Bash, C#, Java, Node.js, PHP, PowerShell, Python, or Ruby.

Required data

Running the code in this how-to requires this data:

Data elementDescription
{API_ACCOUNT_ID}A GUID value that identifies your account. This value is automatically generated by Docusign for any account you create. Copy the value from the API Account ID field on the Apps and Keys page.
{BASE_PATH}A string value that forms the root of the URL required to make API calls. The base path value in the example code is set to target the developer environment at
https://<domain>/restapi
Where <domain> is demo.docusign.net for the developer environment and is the result of the GetUserInfo call in production.
{DOCUMENT_HTML}The HTML source for the document you will create.

Step 1. Obtain your OAuth token

To make the API call shown in this how-to, you need a valid OAuth access token. Docusign supports access tokens for three different recommended OAuth grant types: Public Authorization Code Grant, Confidential Authorization Code Grant, and JSON Web Token (JWT) Grant. Choose the OAuth grant type appropriate for your scenario.

See Confidential Authorization Code Grant for guidance on your options to get an Confidential Authorization Code Grant OAuth token.

Three icons that represent the three methods a user can use to obtain an OAuth token: JSON Web Token (JWT), Public Authorization Code Grant (ACG), and Confidential Authorization Code grant

Step 2. Create the envelope definition

In the JSON request body for a standard Envelopes:create method call, ensure that you have at least one document defined in the request’s documents block.

For each HTML document in the envelope, add an htmlDefinition node.

Within the htmlDefinition node, insert another node called source. Add your page’s HTML to the value of source. The sample shows a documents node of a request to create a new signable HTML document.

If the HTML code contains <img> elements with the src attribute set to a path or URL, those images will not be displayed. Images in HTML must be encoded in Base64 format, as shown in the example below:

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>

See the API Reference for the full list of request parameters and configurable options.

html_with_tabs=`cat $html_document_path \
    | sed 's/sn1/<ds-signature data-ds-role="Signer"\\/>/g' \
    | sed 's/l1q/<input data-ds-type="number" name="l1q"\\/>/g' \
    | sed 's/l2q/<input data-ds-type="number" name="l2q"\\/>/g' \
    | sed 's/\\"/\\\\\\\\"/g'`
printf \
'{
    "emailSubject": "Example Signing Document",
    "documents": [
        {
            "name": "Lorem Ipsum",
            "documentId": "1",
            "htmlDefinition":
            {
                "source":  "'"${html_with_tabs}"'",
            }
        }
    ],
    "recipients": {
        "signers": [
            {
                "email": "'"${SIGNER_EMAIL}"'",
                "name": "'"${SIGNER_NAME}"'",
                "recipientId": "1",
                "routingOrder": "1",
                "clientUserId": "1000",
                "signerRole": "Signer",
                "tabs": {
                    "formulaTabs": [
                        {
                            "anchorString": "/l1e/", "anchorUnits": "pixels",
                            "anchorXOffset": "105", "anchorYOffset": "-8",
                            "disableAutoSize": "false", "font": "helvetica",
                            "fontSize": "size11", "formula": "[l1q] * 5",
                            "locked": "true", "required": "true",
                            "roundDecimalPlaces": "0", "tabLabel": "l1e"
                        },
                        {
                            "anchorString": "/l2e/", "anchorUnits": "pixels",
                            "anchorXOffset": "105", "anchorYOffset": "-8",
                            "disableAutoSize": "false", "font": "helvetica",
                            "fontSize": "size11", "formula": "[l2q] * 150",
                            "locked": "true", "required": "true",
                            "roundDecimalPlaces": "0", "tabLabel": "l2e"
                        },
                        {
                            "anchorString": "/l3t/", "anchorUnits": "pixels",
                            "anchorXOffset": "105", "anchorYOffset": "-8",
                            "bold": "true", "disableAutoSize": "false",
                            "font": "helvetica", "fontSize": "size11",
                            "formula": "[l1e] + [l2e]", "locked": "true",
                            "required": "true", "roundDecimalPlaces": "0",
                            "tabLabel": "l3t"
                        },
                    ],
                }
            }
        ],
       "carbonCopies": [
            {
                "email": "'"${CC_EMAIL}"'",
                "name": "'"${CC_NAME}"'",
                "recipientId": "2",
                "routingOrder": "1"
            }
        ]
    },
    "status": "sent"
}' >> $request_data

Step 3. Call the eSignature REST API

Finally, use the definition of the envelope that you created in Step 2 to create a new envelope and send it, adding your access token and base path to the request header.

View the source code for this how-to on GitHub: Bash, C#, Java, Node.js, PHP, PowerShell, Python, or Ruby.

curl --header "Authorization: Bearer ${ACCESS_TOKEN}" \
     --header "Content-Type: application/json" \
     --data-binary @${request_data} \
     --request POST ${base_path}/v2.1/accounts/${account_id}/envelopes \
     --output ${response}

Expected response

If you run this code example from our Quickstart or launcher projects, you should see a JSON response similar to the code shown.

In addition, the signer receives an email containing a signing link that they can use to open and electronically sign a document using the Docusign mobile app or the Docusign website. After signing is complete, the recipient receives a carbon copy (CC) of the email that includes all of the completed and signed documents.

Sample response
{
   "envelopeId":"9348a9b2-xxxx-xxxx-xxxx-e2f9a1e28a69",
   "uri":"/envelopes/9348a9b2-xxxx-xxxx-xxxx-e2f9a1e28a69",
   "statusDateTime":"2022-04-22T22:19:43.5200000Z",
   "status":"sent"
}

Next steps