Designer

This guide shows you how to create a designer session.

The designer allows you to embed the signature placement and document review experience in your own web application. Users will be able to add signers, create and place signatures through the OneSpan Sign graphical user interface.

To note, you can only open a designer session for the package with “DRAFT” status.

The Code

The first step is to create a sender authentication token using the OneSpan Sign AuthenticationTokenService. For this, you will need the ID of the package. Note that user authentication tokens are single use and will expire after 30 mins.

String senderAuthenticationToken = client.getAuthenticationTokensService().createSenderAuthenticationToken(packageId);

From here, you can choose between the classic or new designer interface.

New Designer

Then, using the user authentication token you just created and the package id returned to you during package creation, build the following url:

https://sandbox.esignlive.com/auth?senderAuthenticationToken={senderToken}&target=https://sandbox.esignlive.com/a/transaction/{packageId}/designer

Classic Designer

Then, build your AuthenticationClient using the OneSpan Sign URL you currently have an account for.

AuthenticationClient authenticationClient = new AuthenticationClient("https://sandbox.esignlive.com");

Finally, you can generated a redirect to the classic designer with the AuthenticationClient using the user authentication token you created previously:

String urlToDesigner = authenticationClient.buildRedirectToDesignerForUserAuthenticationToken(userAuthenticationToken, packageId.toString());

System.out.println(urlToDesigner);

Running Your Code

Below is a screenshot of what you can expect once you’ve entered the url generated above in your browser:

New Designer
capture

Classic Designer
capture

Get The Code

Designer Customization

OneSpan Sign supports flexible configurations to this graphical user interface which adjusts to a wide range of requirements. To note, below sections are based on new designer experience.

The picture below demonstrates how many components can be removed or modified in the Designer page.

Capture

Here is a detailed list of what components can be modified:

  1. “saveLayout” / “applyLayout” button
  2. “documentVisibility” button
  3. “addSigner” button
  4. “editRecipient” button
  5. “addDocument” button
  6. “editDocument” button
  7. “deleteDocument” button
  8. “send” button for package creation or “done” button in template creation
  9. prevent sender from appearing in designer page
  10. The following additional fields can be hidden
    • signingDate
    • signerName
    • signerTitle
    • signerCompany
    • textfield
    • checkbox
    • list
    • radio
    • textarea
    • label
    • datepicker

Designer Profile

Each designer customization setting is named profile with a unique profile name. By contacting our Technical Support with your profile name and descriptions of your customization, you can define multiple designer profiles at your account level.

And you can build your designer session URL in this way to call out specific profile:

{instance_url}/auth?senderAuthenticationToken={senderToken}&target={instance_url}/a/transaction/{packageId}/designer?profile={profileName}

The picture below shows you the comparison between the Designer feature with default settings and Designer with a minimalist style where I named the profile “minimalist”.

Capture

The designer allows you to embed the signature placement and document review experience in your own web application. Users will be able to add signers, create and place signatures through the OneSpan Sign graphical user interface.

To note, you can only open a designer session for the package with “DRAFT” status.

The Code

The first step is to create a sender authentication token using the AuthenticationTokenService. For this, you will need the id of the package. Note that user authentication tokens are single use and will expire after 30 mins.

string senderAuthenticationToken = client.AuthenticationTokenService.CreateSenderAuthenticationToken(packageId);

From here, you can choose between the classic or new designer interface.

New Designer

Then, using the user authentication token you just created and the package ID returned to you during package creation, build the following url:

https://sandbox.esignlive.com/auth?senderAuthenticationToken={senderToken}&target=https://sandbox.esignlive.com/a/transaction/{packageId}/designer

Classic Designer

Then, build your AuthenticationClient using the OneSpan Sign URL you currently have an account for.

AuthenticationClient authenticationClient = new AuthenticationClient("https://sandbox.esignlive.com");

Finally, you can generated a redirect to the classic designer with the AuthenticationClient using the user authentication token you created previously:

string urlToDesigner = authenticationClient.BuildRedirectToDesignerForUserAuthenticationToken(userAuthenticationToken, packageId.ToString());

Debug.WriteLine(urlToDesigner);

Running Your Code

Below is a screenshot of what you can expect once you’ve entered the url generated above in your browser:

New Designer
capture

Classic Designer
capture

Get The Code

Designer Customization

OneSpan Sign supports flexible configurations to this graphical user interface which adjusts to a wide range of requirements. To note, below sections are based on new designer experience.

The picture below demonstrates how many components can be removed or modified in the Designer page.

Capture

Here is a detailed list of what components can be modified:

  1. “saveLayout” / “applyLayout” button
  2. “documentVisibility” button
  3. “addSigner” button
  4. “editRecipient” button
  5. “addDocument” button
  6. “editDocument” button
  7. “deleteDocument” button
  8. “send” button for package creation or “done” button in template creation
  9. prevent sender from appearing in designer page
  10. The following additional fields can be hidden
    • signingDate
    • signerName
    • signerTitle
    • signerCompany
    • textfield
    • checkbox
    • list
    • radio
    • textarea
    • label
    • datepicker

Designer Profile

Each designer customization setting is named profile with a unique profile name. By contacting our Technical Support with your profile name and descriptions of your customization, you can define multiple designer profiles at your account level.

And you can build your designer session URL in this way to call out specific profile:

{instance_url}/auth?senderAuthenticationToken={senderToken}&target={instance_url}/a/transaction/{packageId}/designer?profile={profileName}

The picture below shows you the comparison between the Designer feature with default settings and Designer with a minimalist style where I named the profile “minimalist”.

Capture

The designer allows you to embed the signature placement and document review experience in your own web application. Users will be able to add signers, create and place signatures through the OneSpan Sign graphical user interface.

To note, you can only open a designer session for the package with “DRAFT” status.

The Code

The first step is to create a sender authentication token by making a POST request with an empty payload.

HTTP Request
POST /api/authenticationTokens/sender

HTTP Headers
Accept: application/json
Content-Type: application/json
Authorization: Basic api_key

Request Payload

{
  "packageId": "e937fc75-3c3b-4506-b270-cc7e43f4cf78"
}

Response Payload

{
   "value": "MjY0MjQ4MzgtMTJlOS00MzhjLTgzODMtMzJmMGNiZTg3ODBl"
}

Then, you will need to parse the response in order to retrieve the user authentication token. Note that user authentication tokens are single use and will expire after 30 mins.

From here, you can choose between the classic or new designer interface.

New Designer

Using the authentication token you just created and the package id returned to you during package creation, build the following URL:

https://sandbox.esignlive.com/auth?senderAuthenticationToken={senderToken}&target=https://sandbox.esignlive.com/a/transaction/{packageId}/designer

Classic Designer

Using the authentication token you just created and the package id returned to you during package creation, build the following URL:

https://sandbox.esignlive.com/auth?authenticationToken={userToken}&target=https://sandbox.esignlive.com/designer/{packageId}

Running Your Code

Below is a screenshot of what you can expect once you’ve entered the url generated above in your browser:

New Designer
capture

Classic Designer
capture

Get The Code

Designer Customization

OneSpan Sign supports flexible configurations to this graphical user interface which adjusts to a wide range of requirements. To note, below sections are based on new designer experience.

The picture below demonstrates how many components can be removed or modified in the Designer page.

Capture

Here is a detailed list of what components can be modified:

  1. “saveLayout” / “applyLayout” button
  2. “documentVisibility” button
  3. “addSigner” button
  4. “editRecipient” button
  5. “addDocument” button
  6. “editDocument” button
  7. “deleteDocument” button
  8. “send” button for package creation or “done” button in template creation
  9. prevent sender from appearing in designer page
  10. The following additional fields can be hidden
    • signingDate
    • signerName
    • signerTitle
    • signerCompany
    • textfield
    • checkbox
    • list
    • radio
    • textarea
    • label
    • datepicker

Designer Profile

Each designer customization setting is named profile with a unique profile name. By contacting our Technical Support with your profile name and descriptions of your customization, you can define multiple designer profiles at your account level.

And you can build your designer session URL in this way to call out specific profile:

{instance_url}/auth?senderAuthenticationToken={senderToken}&target={instance_url}/a/transaction/{packageId}/designer?profile={profileName}

The picture below shows you the comparison between the Designer feature with default settings and Designer with a minimalist style where I named the profile “minimalist”.

Capture

The designer allows you to embed the signature placement and document review experience in your own web application. Users will be able to add signers, create and place signatures through the OneSpan Sign graphical user interface.

To note, you can only open a designer session for the package with “DRAFT” status.

The Code

To notice, some of the code is an extension of the APEX SDK and can be gotten through this Code Share.
The first step is to create a sender authentication token using below encapsulated function. For this, you will need the ID of the package. Note that user authentication tokens are single use and will expire after 30 mins.

public String createSenderAuthenticationToken(String packageId)

From here, you can choose between the classic or new designer interface.

New Designer
Then, using the user authentication token you just created and the package ID returned to you during package creation, using this function to build the url:

public String buildRedirectToDesignerForUserAuthenticationTokenNew(String senderAuthenticationToken, String packageId)

Classic Designer
You can generated a redirect to the classic designer with below encapsulated function using the user authentication token you created previously:

public String buildRedirectToDesignerForUserAuthenticationTokenClassic(String senderAuthenticationToken, String packageId)

Running Your Code

Below is a screenshot of what you can expect once you’ve entered the url generated above in your browser:

New Designer
capture

Classic Designer
capture

Get The Code

Designer Customization

OneSpan Sign supports flexible configurations to this graphical user interface which adjusts to a wide range of requirements. To note, below sections are based on new designer experience.

The picture below demonstrates how many components can be removed or modified in the Designer page.

Capture

Here is a detailed list of what components can be modified:

  1. “saveLayout” / “applyLayout” button
  2. “documentVisibility” button
  3. “addSigner” button
  4. “editRecipient” button
  5. “addDocument” button
  6. “editDocument” button
  7. “deleteDocument” button
  8. “send” button for package creation or “done” button in template creation
  9. prevent sender from appearing in designer page
  10. The following additional fields can be hidden
    • signingDate
    • signerName
    • signerTitle
    • signerCompany
    • textfield
    • checkbox
    • list
    • radio
    • textarea
    • label
    • datepicker

Designer Profile

Each designer customization setting is named profile with a unique profile name. By contacting our Technical Support with your profile name and descriptions of your customization, you can define multiple designer profiles at your account level.

And you can build your designer session URL in this way to call out specific profile:

{instance_url}/auth?senderAuthenticationToken={senderToken}&target={instance_url}/a/transaction/{packageId}/designer?profile={profileName}

The picture below shows you the comparison between the Designer feature with default settings and Designer with a minimalist style where I named the profile “minimalist”.

Capture