---
title: "Enabling different eSignature modes | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/signatures/customizing-the-signature-user-interface/"
md_url: "https://www.nutrient.io/guides/web/signatures/customizing-the-signature-user-interface.md"
last_updated: "2026-05-20T12:25:22.082Z"
description: "Discover how to personalize your signature user interface with our comprehensive guide, enhancing usability and functionality for better user engagement."
---

# Customizing the electronic signature UI

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 [`NutrientViewer.Configuration#electronicSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.electronicSignatures) configuration option, which accepts an object with two possible properties: [`creationModes`](https://www.nutrient.io/api/web/NutrientViewer.ElectronicSignaturesConfiguration.html#creationModes) and [`fonts`](https://www.nutrient.io/api/web/NutrientViewer.ElectronicSignaturesConfiguration.html#fonts).

### Setting available signature creation modes

`creationModes` accepts an array of `NutrientViewer.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 `NutrientViewer.defaultElectronicSignatureCreationModes`.

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

```js

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

```
---

## Related pages

- [Capturing electronic signatures with viewer modals](/guides/web/user-interface/signatures/electronic-signatures.md)
- [Invisible signing: Digitally sign any PDF](/guides/web/user-interface/signatures/invisible-signing.md)
- [Customizing electronic signature fonts](/guides/web/user-interface/signatures/signature-fonts.md)
- [Customizing the digital signature validation status](/guides/web/user-interface/signatures/validation-status.md)