Configure Digital Signature Appearance: Visible vs. Non-Visible Signatures
![]()
PSPDFKit Server has been deprecated and replaced by Document Engine. All PSPDFKit Server and PSPDFKit for Web Server-Backed licenses will work as before and be supported until 15 May 2024 (we will contact you about license migration). To start using Document Engine, refer to the migration guide. With Document Engine, you’ll have access to robust new capabilities (read the blog for more information).
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
To see how visible digital signatures function in practice, you can explore our demo.
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.
-
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.
-
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.
-
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 |
![]() |
descriptionOnly |
![]() |
signatureAndDescription |
![]() |
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
assignatureOnly
. 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
assignatureAndDescription
. Then, use thegraphic
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.