How to Support Multiple Digital Signatures in a Single Document in JavaScript with Apryse SDK

Implementing multiple digital signatures on a single electronic document can pose challenges due to complexities in document structure, signature placement, and format compatibility. This use case is increasingly common across multiple industries where more than one stakeholder needs to provide consent or approval. To learn more about digital signatures and how they work, check out our Ultimate Guide to Digital Signatures.

This blog demonstrates how to apply multiple digital signatures to a document in your web application using JavaScript. With the assistance of Apryse’s WebViewer SDK – a single component – and a few lines of code, you can enable a digital signing workflow that’s simple for end users and offers enhanced accountability. We will take you step by step through the process of configuring a document for multi-person signing, ensuring that each signer exclusively signs their allocated section without altering the preceding content.

Before we proceed, ensure you have installed WebViewer and set up the Apryse Digital Signatures feature in your application. WebViewer supports a full range of frameworks, such as React, Vue, and Angular. You can even demo new features in your environment today, with no trial key required. Just visit our get started page.

There are different ways to install, but we’ll use npm to install WebViewer for this example.

To use WebViewer for validating digital signatures, download and install versions 8.0+ via NPM.

Since WebViewer requires static resources to be served (which cannot be bundled), an extra step involves manually copying static files into your dist directory.

In this use case, we have four signers: Person1, Person2, Person3, and Person4. For each signer, you need to define their designated sections in the document where they can sign.

Typically, when dealing with multiple signatures, they must be applied sequentially using the incremental flag and separated by an incremental save. For instance, after signing the initial signature and before proceeding with subsequent tasks or generating the next signature, it's essential to save the complete document using the incremental flag.

Using Apryse's API, create Signature Fields for each signer in the designated sections of the document. Each Signature Field will represent a place for the respective signer to sign.

To ensure that each signer can only sign their designated section and not edit the content of previous signers, you need to set the appropriate permissions for each Signature Field. In this case, Person2 should only be able to sign their section and view Person1's section. The way we achieve this is by storing the user's email address as a custom property or part of the field name so that we can check the fields later to hide or show the appropriate fields. Steps 2-4 can be completed by referencing our documentation.

Now that the document is set up with the Signature Fieldsyou'll fetch the current logged-in user and filter out signature fields that aren't tied to the specified user with the code sample in our repository. This happens when the document is loaded on the client-side.

As each signer completes their signing process, the document will be updated with their signatures. Ensure that the document is saved and updated after each signer has signed. You can also implement verification steps to ensure that all required signatures are obtained before finalizing the document.

By utilizing the Apryse WebViewer, you can implement a synchronous signing process with multiple signers. The ability to define signature fields and set permissions ensures that each signer can only sign their designated section without altering the content of previous signers. This provides a secure and streamlined signing experience for all parties involved.

You can check out our interactive demo for a demonstration of how digital signatures work in the Apryse WebViewer, or see the documentation for the Web SDK to get started quickly. Don’t forget you can also reach out to us on Discord  if you have any issues.