> You are reading the Docusign Developer Documentation. For clean Markdown of any page, append .md to the page URL. > > Documentation indexes by section: > - APIs and SDKs: https://docusign.docs.buildwithfern.com/docs/llms.txt > - Platform 101: https://docusign.docs.buildwithfern.com/platform/llms.txt > - Extension Apps: https://docusign.docs.buildwithfern.com/extension-apps/llms.txt > - Docusign CLI: https://docusign.docs.buildwithfern.com/docusign-cli/llms.txt > > Authentication (OAuth, JWT Grant, M2M): https://docusign.docs.buildwithfern.com/platform/auth > Webhooks and Connect: https://docusign.docs.buildwithfern.com/platform/webhooks > > OpenAPI specifications: https://docusign.docs.buildwithfern.com/openapi.json > MCP server: https://docusign.docs.buildwithfern.com/_mcp/server # How to embed the Docusign UI in your app > This page demonstrates how to embed the Docusign UI in your app. 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. > **Note** > > Run this code example from our [Quickstart](/docs/esign-rest-api/quickstart) or launcher projects: [Bash](https://github.com/docusign/code-examples-bash), [C#](https://github.com/docusign/code-examples-csharp), [Java](https://github.com/docusign/code-examples-java), [Node.js](https://github.com/docusign/code-examples-node), [PHP](https://github.com/docusign/code-examples-php), [PowerShell](https://github.com/docusign/code-examples-powershell), [Python](https://github.com/docusign/code-examples-python), or [Ruby](https://github.com/docusign/code-examples-ruby). ## Required data Running the code in this how-to requires this data: | Data element | Description | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | \{API_ACCOUNT_ID} | A [GUID](http://guid.one/) 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](https://admindemo.docusign.com/authenticate?goTo=appsAndKeys) 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\://\/restapi Where \ is demo.docusign.net for the developer environment and is the result of the GetUserInfo call in production. | | Return URL | A 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. > **Note** > > See [Confidential Authorization Code Grant](/platform/auth/authcode#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](/_fern-files/_img/64f473773042ee439449a096bf7673292b1585b86a4ccc55f82ba0dda41f61a1.webp) ## 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](/platform/auth)): `"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. > **Note** > > View the source code for this how-to on GitHub: [Bash](https://github.com/docusign/code-examples-bash/blob/master/examples/eSignature/eg012EmbeddedConsole.sh), [C#](https://github.com/docusign/code-examples-csharp/blob/master/launcher-csharp/eSignature/Examples/ShowEmbeddedConsole.cs), [Java](https://github.com/docusign/code-examples-java/blob/master/src/main/java/com/docusign/controller/eSignature/services/EmbeddedConsoleService.java), [Node.js](https://github.com/docusign/code-examples-node/blob/master/lib/eSignature/examples/embeddedConsole.js), [PHP](https://github.com/docusign/code-examples-php/blob/master/src/Services/Examples/eSignature/EmbeddedConsoleService.php), [PowerShell](https://github.com/docusign/code-examples-powershell/blob/master/examples/eSignature/eg012EmbeddedConsole.ps1), [Python](https://github.com/docusign/code-examples-python/blob/master/app/eSignature/examples/eg012_embedded_console.py), or [Ruby](https://github.com/docusign/code-examples-ruby/blob/main/app/services/e_sign/eg012_embedded_console_service.rb). **`Bash`** ```bash title="Bash" 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/\".*//'` ``` **`C#`** ```csharp title="C#" var docuSignClient = new DocuSignClient(basePath); docuSignClient.Configuration.DefaultHeader.Add("Authorization", "Bearer " + accessToken); EnvelopesApi envelopesApi = new EnvelopesApi(docuSignClient); ConsoleViewRequest viewRequest = MakeConsoleViewRequest( returnUrl, startingView, envelopeId); // Step 1. create the NDSE view // Call the CreateSenderView API // Exceptions will be caught by the calling function var results = envelopesApi.CreateConsoleViewWithHttpInfo(accountId, viewRequest); results.Headers.TryGetValue("X-RateLimit-Remaining", out string remaining); results.Headers.TryGetValue("X-RateLimit-Reset", out string reset); if (reset != null && remaining != null) { DateTime resetDate = DateTimeOffset.FromUnixTimeSeconds(long.Parse(reset)).UtcDateTime; Console.WriteLine("API calls remaining: " + remaining); Console.WriteLine("Next Reset: " + resetDate); } ``` **`Java`** ```java title="Java" ConsoleViewRequest viewRequest = new ConsoleViewRequest(); viewRequest.setReturnUrl(dsReturnUrl); if ("envelope".equalsIgnoreCase(startingView) && envelopeId != null) { viewRequest.setEnvelopeId(envelopeId); } // Step 2. Call the CreateSenderView API var consoleView = envelopesApi.createConsoleViewWithHttpInfo(accountId, viewRequest); Map> headers = consoleView.getHeaders(); java.util.List remaining = headers.get("X-RateLimit-Remaining"); java.util.List reset = headers.get("X-RateLimit-Reset"); if (remaining != null & reset != null) { Instant resetInstant = Instant.ofEpochSecond(Long.parseLong(reset.get(0))); System.out.println("API calls remaining: " + remaining); System.out.println("Next Reset: " + resetInstant); } return consoleView.getData(); ``` **`Node.js`** ```javascript title="Node.js" let dsApiClient = new docusign.ApiClient(); dsApiClient.setBasePath(args.basePath); dsApiClient.addDefaultHeader('Authorization', 'Bearer ' + args.accessToken); let envelopesApi = new docusign.EnvelopesApi(dsApiClient); // Step 1. create the NDSE view let viewRequest = makeConsoleViewRequest(args); // Call the CreateSenderView API // Exceptions will be caught by the calling function let results = await envelopesApi.createConsoleView(args.accountId, { consoleViewRequest: viewRequest, }, (error, data, response) => { const headers = response?.headers; const remaining = headers?.['x-ratelimit-remaining']; const reset = headers?.['x-ratelimit-reset']; if (remaining && reset) { const resetInstant = new Date(Number(reset) * 1000); console.log(`API calls remaining: ${remaining}`); console.log(`Next Reset: ${resetInstant.toISOString()}`); } }); let url = results.data.url; ``` **`PHP`** ```php title="PHP" $view_request = new ConsoleViewRequest(['return_url' => $args['ds_return_url']]); if ($args['starting_view'] == "envelope" && $args['envelope_id']) { $view_request->setEnvelopeId($args['envelope_id']); } # 2. Call the API method $envelope_api = $clientService->getEnvelopeApi(); $consoleView = $envelope_api->createConsoleViewWithHttpInfo($args['account_id'], $view_request); $remaining = $consoleView[2]['X-RateLimit-Remaining'] ?? null; $reset = $consoleView[2]['X-RateLimit-Reset'] ?? null; if ($remaining !== null && $reset !== null) { $resetInstant = (new DateTime())->setTimestamp((int)$reset); error_log("API calls remaining: $remaining"); error_log("Next Reset: " . $resetInstant->format(\DateTime::ATOM)); } $url = $consoleView[0]['url']; ``` **`PowerShell`** ```text title="PowerShell" $requestBody = switch ($selectedView) { { [ViewType]::FrontPage } { @{ "returnUrl" = "http://httpbin.org/get" }; break; } { [ViewType]::EnvelopeView } { @{ "returnUrl" = "http://httpbin.org/get"; "envelopeId" = "$envelopeId" }; break; } Default { } } $requestBody $console = Invoke-RestMethod ` -Uri "${apiUri}/v2.1/accounts/${accountId}/views/console" ` -Method "POST" ` -Headers @{ "Authorization" = "Bearer $accessToken"; "Content-Type" = "application/json"; } ` -Body ($requestBody | ConvertTo-Json) Write-Output "Results:" Write-Output "Console received: $console" $consoleUrl = $console.url ``` **`Python`** ```python title="Python" view_request = ConsoleViewRequest(return_url=args["ds_return_url"]) if args["starting_view"] == "envelope" and args["envelope_id"]: view_request.envelope_id = args["envelope_id"] # Step 2. Get the console view url # Exceptions will be caught by the calling function api_client = create_api_client(base_path=args["base_path"], access_token=args["access_token"]) envelope_api = EnvelopesApi(api_client) (results, status, headers) = envelope_api.create_console_view_with_http_info(account_id=args["account_id"], console_view_request=view_request) remaining = headers.get("X-RateLimit-Remaining") reset = headers.get("X-RateLimit-Reset") if remaining is not None and reset is not None: reset_date = dt.fromtimestamp(int(reset), tz=timezone.utc) print(f"API calls remaining: {remaining}") print(f"Next Reset: {reset_date}") url = results.url ``` **`Ruby`** ```ruby title="Ruby" view_request = DocuSign_eSign::ConsoleViewRequest.new({ returnUrl: args[:ds_return_url] }) view_request.envelope_id = args[:envelope_id] if args[:starting_view] == 'envelope' && args[:envelope_id] # Step 2. Call the API method envelope_api = create_envelope_api(args) results, _status, headers = envelope_api.create_console_view_with_http_info args[:account_id], view_request remaining = headers['X-RateLimit-Remaining'] reset = headers['X-RateLimit-Reset'] if remaining && reset reset_date = Time.at(reset.to_i).utc puts "API calls remaining: #{remaining}" puts "Next Reset: #{reset_date}" end ``` ## 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`** ```json title="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 * Run this code example from our [Quickstart](/docs/esign-rest-api/quickstart) or launcher projects: [Bash](https://github.com/docusign/code-examples-bash), [C#](https://github.com/docusign/code-examples-csharp), [Java](https://github.com/docusign/code-examples-java), [Node.js](https://github.com/docusign/code-examples-node), [PHP](https://github.com/docusign/code-examples-php), [PowerShell](https://github.com/docusign/code-examples-powershell), [Python](https://github.com/docusign/code-examples-python), or [Ruby](https://github.com/docusign/code-examples-ruby). * See how to [Go-Live](/docs/esign-rest-api/go-live) with a completed app and find the base path for API calls in the production environment.