Skip to navigation
How-to guidesUse envelopes and templates

How to send an envelope via your app

View as Markdown
eSignature REST API 2.1 only

This topic demonstrates how to embed the Docusign Sender UI within your web app. For the best user experience, Docusign recommends using the API to construct draft envelopes and add recipients and tabs to those envelopes. After envelopes have been created, the Sender View enables your app’s users to edit the tabs, documents, recipients, and other envelope settings within your app before sending them out for approval.

Important: This example requires that you have created an envelope with created status or implemented the code from the embedded signing how-to, to generate a new envelope with created status.

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.
{CC_RECIPIENT_EMAIL}A string value for the email address of the carbon copy recipient.
{CC_RECIPIENT_NAME}A string value for the name of the carbon copy recipient.
Return URLA URL to which the user will be forwarded after signing is complete.
{SIGNER_EMAIL}A string value for the email address where the signer will receive a notification of the signing request.
{SIGNER_NAME}A string value for the full name of the signer.
{STARTING_VIEW}The starting view value determines where the web app will open. You can set the starting_view to a specific envelope ID to open the web app to view that envelope or with the embedded console, you can choose to route a user to a specific envelope ID, if available, or to the front page of Docusign eSignature by default.

Step 1. Obtain your OAuth token

To make the API calls 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

Use the following steps to create the envelope:

  • Instantiate the Docusign API client.
  • Set the following default request header to add your access token. "Authorization" : "Bearer {ACCESS_TOKEN}"
  • Initialize the Envelopes API.
  • Create a new draft envelope and set the status property to created.

Important: This how-to draws on the code defined in the embedded signing how-to (which is part of the same code example launcher) to generate a new envelope with created status.

# temp files:
request_data=$(mktemp /tmp/request-eg-011.XXXXXX)
response=$(mktemp /tmp/response-eg-011.XXXXXX)
doc1_base64=$(mktemp /tmp/eg-011-doc1.XXXXXX)
doc2_base64=$(mktemp /tmp/eg-011-doc2.XXXXXX)
doc3_base64=$(mktemp /tmp/eg-011-doc3.XXXXXX)
# Fetch docs and encode
cat demo_documents/doc_1.html | base64 > $doc1_base64
cat demo_documents/World_Wide_Corp_Battle_Plan_Trafalgar.docx | base64 > $doc2_base64
cat demo_documents/World_Wide_Corp_lorem.pdf | base64 > $doc3_base64
echo ""
echo "Sending the envelope request to DocuSign..."
echo "The envelope has three documents. Processing time will be about 15 seconds."
echo "Results:"
echo ""
# Concatenate the different parts of the request
printf \
'{
    "emailSubject": "Please sign this document set",
    "documents": [
        {
            "documentBase64": "' > $request_data
            cat $doc1_base64 >> $request_data
            printf '",
            "name": "Order acknowledgement",
            "fileExtension": "html", "documentId": "1"
        },
        {
            "documentBase64": "' >> $request_data
            cat $doc2_base64 >> $request_data
            printf '",
            "name": "Battle Plan",
            "fileExtension": "docx", "documentId": "2"
        },
        {
            "documentBase64": "' >> $request_data
            cat $doc3_base64 >> $request_data
            printf '",
            "name": "Lorem Ipsum",
            "fileExtension": "pdf", "documentId": "3"
        }
    ],
    "recipients": {
        "carbonCopies": [
            {
                "email": "'${CC_EMAIL}'", "name": "'"${CC_NAME}"'",
                "recipientId": "2", "routingOrder": "2"
            }
        ],
        "signers": [
            {
                "email": "'${SIGNER_EMAIL}'", "name": "'"${SIGNER_NAME}"'",
                "recipientId": "1", "routingOrder": "1",
                "tabs": {
                    "signHereTabs": [
                        {
                            "anchorString": "**signature_1**",
                            "anchorUnits": "pixels", "anchorXOffset": "20",
                            "anchorYOffset": "10"
                        },
                        {
                            "anchorString": "/sn1/",
                            "anchorUnits": "pixels", "anchorXOffset": "20",
                            "anchorYOffset": "10"
                        }
                    ]
                }
            }
        ]
    },
    "status": "created"
}' >> $request_data
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
echo ""
cat $response

Step 3. Create the sender view

To create the sender view, first create an EnvelopeViewRequest object. This object contains the return URL to which the sender will be directed after they have sent the envelope. The viewAccess property is also required for this object and should be set to "envelope". The EnvelopeSettingsView object contains UX settings for the sender view. See EnvelopeViews:createSender for details on all of these settings.

Next, call the EnvelopeViews:createSender method with your API account ID, the ID of the draft envelope, and the EnvelopeViewRequest object. The code will return the URL for the embedded sending session at your requested starting view.

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

# pull out the envelopeId
envelope_id=`cat $response | grep envelopeId | sed 's/.*\"envelopeId\":\"//' | sed 's/\",.*//'`
echo ""
echo "Requesting the sender view url"
sender_view_request_data=$(mktemp /tmp/request-eg-002.XXXXXX)
printf \
'{
    "returnUrl": "http://httpbin.org/get",
    "viewAccess": "envelope",
    "settings": {
        "startingScreen": "'${starting_view}'",
        "sendButtonAction": "send",
        "showBackButton": "false",
        "backButtonAction": "previousPage",
        "showHeaderActions": "false",
        "showDiscardAction": "false",
        "lockToken": "",
        "recipientSettings": {
            "showEditRecipients": "false",
            "showContactsList": "false"
        },
        "documentSettings": {
            "showEditDocuments": "false",
            "showEditDocumentVisibility": "false",
            "showEditPages": "false"
        },
        "taggerSettings": {
            "paletteSections": "default",
            "paletteDefault": "custom"
        },
        "templateSettings": {
            "showMatchingTemplatesPrompt": "true"
        }
    }
}' >> $sender_view_request_data
# The returnUrl is normally your own web app. DocuSign will redirect
# the signer to returnUrl when the embedded sending completes.
# For this example, we'll use http://httpbin.org/get to show the
# query parameters passed back from DocuSign
curl --header "Authorization: Bearer ${ACCESS_TOKEN}" \
     --header "Content-Type: application/json" \
     --data-binary @${sender_view_request_data} \
     --request POST ${base_path}/v2.1/accounts/${account_id}/envelopes/${envelope_id}/views/sender \
     --output $response
echo ""
cat $response
sending_url=`cat $response | grep url | sed 's/.*\"url\":\"//' | sed 's/\".*//'`

Expected response

Use the return URL in the JSON response to start the embedded sending session in your browser.

Sample response
{
  "url": "https://demo.docusign.net/Member/StartInSession.aspx?StartConsole=1&t=cf3f5e5c-xxxx-xxxx-xxxx-d77d174fcee0&DocuEnvelope=0254dae7-xxxx-xxxx-xxxx-277abdc9bbc3&send=1"
}

Next steps