New Signer Experience: Signature Navigator

Duo Liang,

Even though the New Signer Experience was released in version 11.30, OneSpan Sign is still working hard to bring you new features to meet the evolving needs of signers. Among them, Signature Navigator is one of the most noticeable new features introduced in the most recent release. 

In this blog, we will demonstrate how Signature Navigator works in the New Signer Experience and showcase how it can accelerate the signing process. Then we will dive into the technical details regarding this feature from both an API and SDK perspective.

Explore the New Signer Experience

If you not familiar with OneSpan Sign New Signer Experience, take a detailed tour with our “A closer look at New Signer Experience” webcast. Also refer to our Documentation Site for the upcoming release dates of undelivered features and other instructions regarding the New Signer Experience.

Signature Navigator in Action

Signature Navigator is a set of UI indicators that allow signers to navigate across all required fields on a document from the top of the document to the bottom. As one of the most significant improvements, the new experience now offers the ability to navigate across both the signature and other types of fields, so that recipients won’t overlook any required fields and enjoy a more seamless experience during signing.

The navigator button will be available on the left margin of the document viewer. Together with the progress bar in the feedback section, these two UI components indicate the overall signing progress.

6-17-1

Clicking the "Required Actions" or the "Next" button will navigate the signer to the next required field, focus on that field, and display a hint.

6-17-2
 
As the signer fills in the required fields, the "Required Actions" will be updated to show progress.

6-17-3
 
Once all required fields within a document are filled in, the label in Signature Navigator will be updated to “Done”, and a confirmation bar appears at the bottom of the document.

6-17-4

If the window size is narrow or the signing ceremony is occurring on mobile, the Signature Navigator button will be moved to the feedback section in order to save space.

6-17-5
 

Activating and Deactivating the Signature Navigator

Signature Navigator provides a fast track to walk through the document and effectively speeds up the signing process. However, sometimes if you want your signer to spend more time reading the content carefully, you may choose to turn off the feature. You can decide for each package whether or not you wish to activate Signature Navigator. 

By default, the feature is turned on. You can change its default value at the account level by contacting our support team. Or use  the methods below to turn it on/off at package level.

With API:

The Signature Navigator is part of the package settings, therefore you can find it in package JSON schema at “ceremony” > “layout” > “navigator”.

{
   "ceremony" : {
      "layout" : {
         "navigator":true
      }
   }
}

With SDK:

DocumentPackage superDuperPackage = PackageBuilder.newPackageNamed("Test Package Settings")
            .withSettings(DocumentPackageSettingsBuilder.newDocumentPackageSettings()
            		.withCeremonyLayoutSettings(CeremonyLayoutSettingsBuilder.newCeremonyLayoutSettings()
            		   .withNavigator()	//.withoutNavigator()
            		)
        		      )
            .build();

Once the navigator is turned off, it removes the navigator button and disables the progress bar during the new signer experience.

6-17-6

From here, you should have enough information to leverage the navigator feature in the New Signer Experience.

If you have any questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the Developer Community Forums. Your feedback matters to us!

OneSpan Developer Community

OneSpan Developer Community

Join the OneSpan Developer Community! Forums, blogs, documentation, SDK downloads, and more.

Join Today

Duo Liang is a Technical Evangelist and Partner Integrations Developer at OneSpan where he creates and maintains integration guides and code shares, helps customers and partners integrate OneSpan products into their applications, and builds integrations within third party platforms.