Customizing the Signature User Interface

The Electronic Signatures UI can be customized to fit your needs.

You can customize aspects such as which signature creation modes are available and in which order, and what signing fonts to offer when creating signatures by typing.

These options are set via the PSPDFKit.Configuration#electronicSignatures configuration option, which accepts an object with two possible properties: creationModes and fonts.

Setting Available Signature Creation Modes

creationModes accepts an array of PSPDFKit.ElectronicSignatureCreationMode members. Based on these entries, the UI will display the tabs specified in the array, respecting the order in which they were added. It defaults to PSPDFKit.defaultElectronicSignatureCreationModes.

Here’s an example offering Type, followed by Image, as signature creation modes:

PSPDFKit.load({
	electronicSignatures: {
		creationModes: [
			PSPDFKit.ElectronicSignatureCreationMode.TYPE,
			PSPDFKit.ElectronicSignatureCreationMode.IMAGE,
		],
	},
});

Setting Available Fonts to Sign With

The fonts property of PSPDFKit.Configuration#electronicSignatures accepts an array of PSPDFKit.Font members that define the name of fonts to present to users when using the “Type” signature creation mode.

You’re also able to specify any fonts that need to be loaded using regular CSS techniques. For this, you can specify them on a custom style sheet loaded through the PSPDFKit.Configuration#styleSheets option; then, use the font family names of your loaded fonts when initializing the instance.

PSPDFKit for Web ships with four signing fonts available out of the box for offering as part of the signature creation UI. These are the ones specified as part of the PSPDFKit.defaultSigningFonts array.

As an example, if you wanted to use the Cookie font from Google Fonts, you could use the following style sheet:

@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');

Then, if you want to offer all the default signing fonts in addition to Cookie, you could specify the following:

PSPDFKit.load({
  electronicSignatures: {
	 fonts: [...PSPDFKit.defaultSigningFonts, new PSPDFKit.Font({ name: Cookie })]
  },
  styleSheets: [path/to/stylesheet],
  // ...additional options
})

If you wanted to keep the built-in fonts but skip Pacifico:

PSPDFKit.load({
  electronicSignatures: {
	 fonts: PSPDFKit.defaultSigningFonts.filter(font => font.name !== Pacifico)
  },
  // ...additional options
})

Note that in case you’re explicitly setting the array of fonts, you must specify at least one.

CSS Customizations

The Electronic Signatures modal view is highly customizable and flexible. There are multiple public CSS classes prefixed with PSPDFKit-Electronic-Signatures for the UI elements that are part of this feature.

Please check the CSS API documentation for a list of the available public CSS classes.