Configure Digital Signature Appearance: Visible vs. Non-Visible Signatures

PSPDFKit offers comprehensive support for creating digital signatures, encompassing both visible and invisible signatures. The primary distinction between these two types lies in the customizable appearance aspect. Visible digital signatures, as the name suggests, are visually represented on a document, allowing users to easily identify and interact with them. Meanwhile, invisible digital signatures remain hidden within a document, leaving no visual trace. However, both types of signatures provide the same level of security and validity, ensuring the integrity of a digital document.

Visible Digital Signatures

The structure of a signature field is organized in a particular format that provides essential information regarding the signature. It consists of three sections, as shown in the following diagram.

Parts of the appearance of a signed signature field.

  1. Left Side (Signer’s Name or Signature Graphic) — This side displays the signer’s name or an illustration associated with the signer, like its handwritten signature.

  2. Right Side (Description) — This side displays the signature description. The text included here can provide detailed information about the signature, such as the reason it was created or the date and time it was created.

  3. Center — The central part of the signature field showcases a watermark. This watermark can be used for various purposes but is conventionally used to display a company logo. This gives the document an additional layer of branding.

To configure the appearance of a signed document using the PSPDFKit.Instance#signDocument function, provide a SignaturePreparationData object as the first argument and set a custom appearance field. This field is an object with the following properties:

{
  watermarkImage?: Blob | File,
  graphicImage?: Blob | File,
  mode?: SignatureAppearanceMode,
  showSigner?: boolean,
  showReason?: boolean,
  showLocation?: boolean,
  showSignDate?: boolean,
  showWatermark?: boolean,
  showDateTimezone?: boolean
}

The main field to configure is mode, a property of type SignatureAppearanceMode, which determines the appearance of the signature. It can be set to one of the following values:

  • signatureOnly — Only the signature watermark is displayed.

  • signatureAndDescription — Both the signer’s name or signature graphic and a description are displayed. This is the default.

  • descriptionOnly — Only the description is displayed.

The table below shows an example of what each signature appearance mode looks like by default.

Signature Mode Example
signatureOnly Digital signature with signatureOnly appearance mode.
descriptionOnly Digital signature with descriptionOnly appearance mode.
signatureAndDescription Digital signature with signatureAndDescription appearance mode.

By default, the signature watermark is set to the PSPDFKit logo. If you want to remove the watermark, set showWatermark to false. If you want to use a different logo, customize the watermarkImage property. Supported file types for the logo are PDF, JPEG, and PNG.

The other properties (showSigner, showReason, showLocation, and showSignDate) configure whether the signer’s name, reason, location, and sign date should be displayed, respectively.

Here’s how to address common use cases with the signature appearance configuration:

  • Creating a Custom Signature Design — If you’d like to deliver your own signature design, configure the signatureMode as signatureOnly. Then, provide a PDF watermark, which fills the entire signature field with your unique design.

  • Avoiding Image Overlap with Text — If you want to ensure your text and images don’t overlap, configure signatureMode as signatureAndDescription. Then, use the graphic property to set the image. This configuration prevents overlap and ensures that each section of the signature retains its readability, helping to maintain a clear and organized display of information.

Invisible Digital Signatures

Invisible digital signatures don’t have any appearance. As described in the add a signature field guide, you can create an invisible digital signature by setting its boundingBox property to have a width and height of zero. This ensures that the signature remains hidden from view but still retains its cryptographic properties and validity. To see how invisible digital signatures function in practice, you can explore our demo.

Launch Demo