---
title: "Sign PDF with certificate using JavaScript | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/signatures/using-electronic-signatures-and-digital-signatures-together/"
md_url: "https://www.nutrient.io/guides/web/signatures/using-electronic-signatures-and-digital-signatures-together.md"
last_updated: "2026-05-15T19:10:05.100Z"
description: "Discover how to effectively use electronic and digital signatures together for secure and efficient document signing. Learn best practices and tips."
---

# Sign PDFs with certificates using JavaScript

This guide shows how to create visible digital signatures.

[Try for Free](https://www.nutrient.io/try)

[Launch Demo](https://www.nutrient.io/demo/invisible-digital-signatures)

Digitally signed documents are valid even without a visual representation of a signature. The reason is that the invisible digital signature is itself part of the PDF and can be validated. For convenience, you can still add a visual signature to a digitally signed document.

To digitally sign a document and add a visible signature, use the `signDocument` method. The first parameter of this method is an object that configures the signature in the following way:

- The `appearance` parameter takes an object where the `watermarkImage` key specifies a `Blob` or a file path to an image. This image is displayed as the watermark of the signature field. Optional: In the `appearance` parameter, specify whether to display the signer, the signing location, and other metadata in the visible signature.

- Choose one of the following options:
  - Add the visible signature to an existing form field within the document. To do so, pass the name of the existing form field to the `formFieldName` parameter.
  - Create a new form field at a specific location in the document and add the visible signature to it. To do so, specify the location with the `position` parameter. This parameter takes an object where the `pageIndex` key specifies the page index within the document, and the `boundingBox` specifies the dimensions of the rectangle within which to place the signature.

- Optional: Use the `signatureMetadata` parameter to specify the signer’s name, the signature reason, and the location.

The second parameter of the `signDocument` method can be a callback function that implements the signing logic. For more information on this callback function, see the guide on [adding digital signatures](https://www.nutrient.io/guides/web/signatures/digital-signatures/signature-lifecycle/sign-a-pdf-document.md).

The example below digitally signs the document and adds a visible signature to an existing form field:

```js

instance.signDocument(
    {
        appearance: { watermarkImageUrl: '/images/signature-watermark.png' },
        formFieldName: 'SignatureField'
    },
    twoStepSignatureCallbackFunction
})

```

The example below digitally signs the document, creates a new form field at a specific location in the document, and adds a visible signature to it.

```js

instance.signDocument({
    signatureMetadata: {
        signerName: 'John Doe',
        signatureLocation: 'San Francisco',
        signatureReason: 'Testing',
    },
    position: {
        pageIndex: 0,
        boundingBox: {
            left: 100,
            top: 100,
            width: 100,
            height: 100,
        },
    },
    appearance: {
        mode: SignatureAppearanceMode.signatureAndDescription,
        showSigner: true,
        showSignDate: true,
        showReason: true,
        showLocation: true,
        showWatermark: true,
        watermarkImageUrl: '/images/signature-watermark.png',
    },
    twoStepSignatureCallbackFunction
})

```

The full source code for an example is [available on GitHub](https://github.com/PSPDFKit/pspdfkit-web-examples-catalog/blob/master/examples/44-digital-signatures-visible-sign/). Since there are different implementations of the `signDocument()`, depending on whether you’re using a Standalone or Server-Backed deployment, there’s a dedicated `standalone.js` or `server.js` file with a specific implementation.
---

## Related pages

- [Add electronic signatures to PDFs with JavaScript](/guides/web/signatures/adding-an-electronic-signature.md)
- [Save and store electronic signatures in our JavaScript viewer](/guides/web/signatures/signature-storage.md)