OneSpan Sign Developer: Uploading an Image as a Signature

Duo Liang, July 14, 2021

On top of applying font-based and hand-drawn signatures, uploading an image as a signature is standard in many eSignature use cases. For example, notaries need to place their respective stamp on documents to authenticate the service or engineering stamp shows that a licensed professional has accepted responsibility for the authenticated document.

In this blog, we will showcase how OneSpan Sign enables signers to upload an image as a signature and walk through the steps that an ad-hoc or integrated sender needs to follow. Without further delay, let’s get started!

7-14-1

Upload Image as a Signature 

As of release 11.39, signers can now apply their signature by uploading an image during the signing ceremony. In order to do so, make sure to follow the steps below:

Step 1: To leverage the feature, first make sure it has been enabled for your account by our Support Team.

Step 2: Once your account has activated the feature, when you design a transaction and select the signature type as “Capture Signature”, you will find an additional option labeled “From file” in the designer page. Toggle this switch.

7-14-2

For integrated senders, the signature image is determined by an approval level attribute “fromFile”. The sample API below shows how to create a capture signature with the flag turned on:

HTTP Request

POST /api/packages

HTTP Headers

Authorization: Basic api_key / Bearer access_token
Accept: application/json
Content-Type: multipart/form-data

Request Payload

{
  "roles": [
    {
      "id": "Role1",
      "signers": [
        {
          "email": "[email protected]",
          "firstName": "1.firstname",
          "lastName": "1.lastname",
          "company": "OneSpan Sign"
        }
      ]
    }
  ],
  "documents": [
    {
      "approvals": [
        {
          "fromFile": true,
          "role": "Role1",
          "fields": [
            {
              "page": 0,
              "top": 100,
              "subtype": "CAPTURE",
              "height": 50,
              "left": 100,
              "width": 200,
              "type": "SIGNATURE"
            }
          ]
        }
      ],
      "name": "Test Document"
    }
  ],
  "name": "Test Transaction - Upload Image as a Signature",
  "language": "en",
  "status": "SENT"
}

Step 3: During the signing ceremony when a signer wants to upload an image as a signature, they must bring up the Capture Signature dialog box on the Signer page and click the “Upload Image” button on the bottom. A popup window will then prompt the signer to select an image file. 

7-14-3

After uploading, the image's size will be adjusted to fit the signature box, but its aspect ratio will be preserved. 

Note:

  1. Uploading image as a signature only works for the New Signer Experience.
  2. The supported files are JPEG or PNG files under 1 MB in size. Other file types are planned for feature releases. 

Pre-store Sender’s Signature

Instead of having to select an image from File Explorer every time when applying the signature, senders can now upload an image that will appear as their default signature.

The most straightforward way to set this up is through each sender’s respective portal. Click the head icon on the top right, select “My Account” among the list, and navigate to “Signature” page. There you will find an upload area under the hand-drawn widget. Drop the file or browse to upload the image, and don’t forget to save the changes by clicking “Update Image” button.

7-14-4

You may have noticed you can store both the hand-drawn as well as the image signature at the same time. The signature that has the “fromFile” flag turned on will be applied the image signature, and vise versa.

We Appreciate Your Feedback

There it is. We have demonstrated how to upload an image as a signature, as well as how to specify a default image signature for sender users. 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!