I’m excited to announce the release of the Embedded Sending sample app! This app demonstrates how to integrate three powerful Docusign workflows seamlessly into your application: embedded template editing, embedded sending, and embedded envelope correction. Designed to model a generic sales CRM, this sample app highlights how these workflows can streamline tasks for sales associates and similar roles.

The app features a Dashboard where users can view sent envelopes and correct them before they’re signed, a Templates tab for editing templates, and a Contacts tab for managing recipient details and sending envelopes via embedded sending. Each scenario in the app includes a Behind the scenes section, where you’ll find details about the code flow. In each of these scenarios, a secure URL is generated using the appropriate Docusign eSignature REST API endpoint, which then redirects the user to the embedded workflow. After completing their task, they are automatically redirected to the app. This allows the user to access the capabilities of the Docusign platform UI without ever needing to leave the app.

This app is built using Node.js and React and supports two authentication flows. Users can either log in with a preconfigured account using JWT authentication—no developer account required—or sign in with their own developer account using Authorization Code Grant. Below, I’ll walk you through each scenario in more detail.

Dashboard

The Dashboard in the sample app provides a centralized place for managing sent envelopes. From here, users can access the embedded Correct view to make real-time updates to envelopes before they are signed. To use the Correct View, the envelope must be in the sent or delivered state. When a user selects Edit, the app leverages the EnvelopeViews: CreateCorrect endpoint to redirect them to the embedded envelope correction session. Here, users can modify document fields, envelope information, and more.

When the user selects CORRECT, the envelope is updated with the changes and remains in its current workflow state (Sent or Delivered). This enables recipients to interact with the revised version without requiring the creation of a new envelope. Users are then redirected back to the Dashboard of the app.

Templates

This app also includes a Templates tab, which highlights the embedded template editing workflow. For this sample application, three new templates are created in the eSignature account when the user logs in to the app, to be used throughout their session. Users then can edit these templates by updating documents, editing envelope information, recipients, or tabs as they wish directly within the app. This scenario uses the TemplateViews: createEdit method of the Docusign eSignature REST API. 

When users select SAVE AND CLOSE, their changes are applied to the template. They are then redirected back to the Templates tab in the app.

Contacts

In this scenario, the app generates three example contacts for users. Users can edit these contacts or create their own directly within the app. Once contacts are set up, users can send envelopes straight from this page, initiating an embedded sending session.

When the user selects Send Envelope, they see a list of available templates to choose from. The app then launches the embedded sending session using the EnvelopeViews: createSender method, preloading the selected template with the contact details. This scenario also showcases how document generation can be used with embedded sending. For templates that utilize document generation, the user is first redirected to a web form to input the required data, which is then used to generate a document. 

This generated document appears in the embedded Sender view, where users can make additional changes such as updating recipients, renaming the envelope, or adjusting tabs before sending. If the selected template does not use document generation, the user will be redirected directly to the embedded Sender view.

When the user selects SEND, the envelope will be sent and the user will be redirected back to the contacts tab in the app. The sent envelope will then appear in the list of envelopes sent during the session in the Dashboard.

Ready to see embedded workflows in action? Check out the Embedded Sending Sample App to explore how you can integrate these features into your own application. If you’re interested in diving into the code, visit our GitHub repository and explore the implementation details for yourself. Start building today and bring streamlined Docusign workflows directly into your app!

Additional resources

• Visit the Docusign Developer Center to sign up for a free developer account to get started.

• Explore the Embedded Sending Sample App to see it in action.

• View and fork the Embedded Sending Sample App source code on GitHub.

• Learn how to embed the Sender and Correct views in your app. 

• Join the Docusign Developers Community to connect with other developers and get development support.