OneSpan Sign Developer: Signing Ceremony Customization

Duo Liang, October 31, 2018
Thumbnail

Signing ceremony customization, as one of the key white-labeled capability OneSpan Sign provided, allows you to present more nuanced information to your signers during Signing Ceremony depending on your control preferences.

In this blog, we will dive into different GUI sections of the signing ceremony by comparing a default Signing Ceremony to the simplest  Signing Ceremony available in OneSpan Sign. From there, we will talk about how to realize this customization both in package and account level. Without further ado, let’s get started!

Default Signing Ceremony Layout

Below is OneSpan Sign’s default signing ceremony layout with each section labeled:

10-31-1

Minimal Looking Signing Ceremony

Below is the simplest Signing Ceremony:

10-31-2 

Note:

1. Toolbar and Confirm Button in Global Action can’t be removed

2. Confirm Button will not show up if it is a consent document or there is no signature required for this signer.

3. Default Branding Logo will disappear if you remove the Session Bar, but it will not affect your customized logo.

Below table illustrates names and descriptions of related settings:

Setting Name

Description

Session Bar

Shows the session bar

Title

Shows the title

Progress Bar

Shows the progress bar

Logo

Replaces the default OneSpan Sign logo with a custom logo. A valid URL to custom logo must be passed as argument

Opt-Out

Allow a signer not to participate in the signing ceremony.

Language Dropdown

Determines whether the language drop down menu from the signing ceremony page is displayed

Decline

Determines whether a signer can decline the document package

Download Button

Determines whether the download button is available

You can refer to our guidance for complete description of all package settings.

In Rest Method

{
   "settings": {
        "ceremony": {
            "layout": {
                "header": {
                    "globalActions": {
                        "download": false,
                        "hideEvidenceSummary": true
                    },
                    "sessionBar": false,
                    "titleBar": {
                        "title": false,
                        "progressBar": false
                    }
                }
            },      
            "declineButton": false,        
            "disableDownloadForUncompletedPackage": true,
            "hideLanguageDropdown": true,
            "optOutButton": false
        }
    }
}

One thing to notice is, “download” and “hideEvidenceSummary” in “glocalAction” attribute means, when package is completed, whether to show “Download” and “Download All” buttons in the Global Action Section.

In SDK Method

The equivalent SDK snippet code shows as below:

Java SDK

.withSettings(DocumentPackageSettingsBuilder.newDocumentPackageSettings()
						.withoutOptOut()
						.withoutLanguageDropDown()
						.withoutDecline()
						.withoutDocumentToolbarDownloadButton()
						.withCeremonyLayoutSettings(CeremonyLayoutSettingsBuilder.newCeremonyLayoutSettings()
								.withoutSessionBar()
								.withoutTitle()
								.withoutProgressBar()
								.withoutGlobalDownloadButton()
								.withLogoSource("http://www.logo-maker.net/images/common/company-logo8.gif")))

.Net SDK

.WithSettings(DocumentPackageSettingsBuilder.NewDocumentPackageSettings()
						.WithoutOptOut()
						.WithoutLanguageDropDown()
						.WithoutDecline()
						.WithoutDocumentToolbarDownloadButton()
						.WithCeremonyLayoutSettings(CeremonyLayoutSettingsBuilder.NewCeremonyLayoutSettings()
								.WithoutSessionBar()
								.WithoutTitle()
								.WithoutProgressBar()
								.WithoutGlobalDownloadButton()
								.WithLogoImageSource ("http://www.logo-maker.net/images/common/company-logo8.gif")))

Set in Account Level

You can contact our support team to change the default values for these settings at your account level, so that you don’t need to set these values everything you create a package.

Through today’s blog, we’ve walked through most GUI components you can customize in signing ceremony and studied on how to achieve a minimal looking Signing Ceremony in three different ways.

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!