Skip to navigation
How-to guides

How to embed the Docusign UI in your app

View as Markdown

This topic demonstrates how to embed the Docusign UI in your app. Creating a console view enables you to load the Docusign UI within your application, providing the same options and functionality as if you were logged in to your developer or production account. You can choose to load either the UI’s front page or a view of a specific envelope’s documents as the starting page.

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.
Return URLA URL to which the user will be forwarded after signing is complete.
{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 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 console view request

Create a sender view and return the URL using the following steps:

  1. Instantiate the Docusign API client.
  2. Set the following default request header to add your access token (obtained using any of the Docusign authentication flows): "Authorization" : "Bearer {Access Token String}"
  3. Initialize the Envelopes API.
  4. Create a ConsoleViewRequest object that holds the redirect URL and the starting view. If the starting view will be of the documents of a particular envelope, it will also record that envelope’s ID.
  5. Create the view request by calling CreateConsoleView, and passing in your account ID and the console view request object. This will return an object containing the URL for the desired Docusign UI page.

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 "${json}" \
     --request POST ${base_path}/v2.1/accounts/${account_id}/views/console \
     --output $response
echo ""
echo "Results:"
echo ""
cat $response
console_url=`cat $response | grep url | sed 's/.*\"url\": \"//' | sed 's/\".*//'`

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.

Sample response
{
  "url": "https://demo.docusign.net/Member/StartInSession.aspx?StartConsole=1&t=c5bf593c-xxxx-xxxx-xxxx-9526099defc9&DocuEnvelope=98f89dd8-xxxx-xxxx-xxxx-e1646e92673e"
}

Next steps