Sign a document with MobbSign Web

Prerequisites

  • Have the MobbSign Web parameters related to the signing process filled with valid values: endpoint, apiKey, appId

Check Use MobbSign Web for a full description of how to create a MobbSign Web instance

  • Have the document loaded in the MobbSign Web viewer

Sign the document

The signer simply clicks on the Sign button and draws his signature.

web sign document

After the signature acquisition timeout (signatureAcquisitionTimeout parameter) the signature will be captured by MobbSign and can be confirmed or rejected. You can subscribe to various listeners to be notified of distinct MobbSign events at this point:

  • onSignatureAcquired: to be notified when a signature is acquired by MobbSign Web
  • onSignatureConfirmed: to be notified when the signer confirms the signature by clicking on Confirm button
  • onSignatureConfirmed: to be notified when the signer discards the signature by clicking on Discard button

web confirm document

If confirmed, the PDF document will be updated with an electronic signature containing the biometric information captured by MobbSign. The document is refreshed on MobbSign Web viewer. You can subscribe to onDocumentSigned listener to be notified when the document is successfully signed.

Check Listening events for a more detailed description of listeners to subscribe in MobbSign Web

Manage document signers

Define signers

When uploading the document to MobbSign Server using the API it is possible to specify hoy many signers the document will have using the signers array. For each signer, the following information can be specified:

  • name: signer name. required.
  • rol: signer role.
  • signaturePosition: document place where the signer's signature should be positioned. See Signature positioning.

The upload document request returns for each signer the ID (signerId) and its status (status).

{
  "signers": [
    {
      "name": "John Doe",
      "rol": "Client",
      "signaturePosition": {
        "x": 20,
        "y": 100,
        "width": 50,
        "height": 50,
        "numPage": 1
      }
    },
    {
        "name": "Jane Foo",
        "rol": "Employee"
    },
    {
        "name": "Signer 3"
    }
  ]
}
{
  "signers": [
      {
          "id": "4438",
          "rol": "Client",
          "name": "John Doe",
          "signaturePosition": {
              "x": 20,
              "y": 100,
              "width": 50,
              "height": 50,
              "numPage": 1
          },
          "status": "PENDING"
      },
      {
          "id": "4439",
          "rol": "Employee",
          "name": "Jane Foo",
          "status": "PENDING"
      },
      {
          "id": "4440",
          "rol": null,
          "name": "Signer 3",
          "status": "PENDING"
      }
  ]
}

If no signer is specified for the document, it may be signed without restrictions.

Manage signers in MobbSign Web

A signing act is the moment when a MobbSign Web instante is created and a document is presented to capture one or more signatures on it. This process requires the creation of a MobbSign object and the document loading into it, allowing the signers to review the document and electronically sign it.

There are 2 behaviors: fill which signer or signers are going to sign at the signing act or not. There are also 2 properties in the MobbSign constructor to take into account:

  • allowSignAfterDocumentIsSigned: boolean. Allow to continue signing the document once the signatures of all signers have been captured. Default true.
  • onlyFinishWhenEveryoneSign: number. show the Finish button only when all the signer's signatures have been captured:
    • 0: default. Show the Finish button after the first signature is made.
    • 1: show the Finish button after all signatures in the signing act have been completed.
    • 2: show the Finish button after all signatures on the document have been completed.

Check API for a full description of MobbSign constructor and its parameters.

If no signers are filled for the signing act: The captured signatures will be managed according to the document signers in sequential order.

  • If onlyFinishWhenEveryoneSign is 1 or 2, the Finish button will be shown after all signers on the document have signed, either in one signing act or more. If it is 0, the Finish button will be shown after the first signature is made.
  • If allowSignAfterDocumentIsSigned is true, the document will be allowed to be signed after all of its signers have signed. If false, no more signatures on the document will be allowed than those of its signers.

If signers are filled for the signing act: the signers array of the MobbSign constructor must be filled with the ID of the signer or signers who are going to sign:

  const mobbsign = new MobbSign({
    ...
    signers: [4440, 4439]
  }).then(mobbsign => {
    mobbsign.load('document-uuid');
  });

MobbSign Web will associate each signature captured sequentially with each signer in the array. The signers placed in signers array may be in a different order to the document signers.

  • If onlyFinishWhenEveryoneSign is 0, the Finish button will be shown after the first signature is made. If it is 1, the Finish button will be shown after all the signers of the signing act (array signers) have signed. If it is 2, it will only be shown when all the signers of the document have signed.
  • In this case allowSignAfterDocumentIsSigned will always be false, since it is considered that only the signature of the indicated signers is of interest. If more free signatures were needed, another instance of MobbSign Web could be created without filling the signers array and with allowSignAfterDocumentIsSigned at its default value of true.

Signature positioning

It is possible to configure where to position each signer's signature in the document. To achieve this, when uploading the document, you must fill in the signer's signaturePosition object. The measurement unit is always PDF_POINTS: 1/72 inches. An A4 page is usually 595 × 842 pts.

  • x, y: horizontal and vertical positions where the signature will be placed.
  • width, height: maximum width and height for the signature. If the signer draws a signature wider or higher than this value, the signature will be resized without losing appearance.
  • numPage: page number where the signature will be placed, starting at 1.
{
  "signers": [
      {
          "rol": "Client",
          "name": "John Doe",
          "signaturePosition": {
              "x": 20,
              "y": 100,
              "width": 50,
              "height": 50,
              "numPage": 1
          }
      },
  ]
}
← Load a documentFinish the process →