> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/digital-signature/interacting-with-signature-field.md).
# Work with PDF Signature Fields Using JavaScript
Learn how to add approval signature in PDF using JavaScript. Here you can find full code samples showing how with the digital signature API you can sign or certify documents.The Apryse Web SDK streaml
{% hint style="info" %}
**Requirements**
*These packages are required to use these features in production. Trial keys have unlimited access to all features*
Package: Digital SignatureLive demo
{% endhint %}
Signature fields will show the text "sign here" and clicking on them will show the signature dialog or the signature overlay depending on if there are any saved signatures. After a signature is created or selected, instead of seeing the preview of the signature, it will be scaled based on the size of the signature field and added directly to it.
## Applying initials to a Signature field
Starting in WebViewer 8.9, signature fields can be set to accept either initials or signatures. For more details on how to set the signature field to accept one or the other, refer to [this guide](/web/digital-signature/interacting-with-signature-field.md). Please note that the initials feature must be enabled in order for this to be displayed in the viewer. For a sample on how to do this refer to [this guide](#applying-initials-to-a-signature-field).
If a field is set to accept initials, the initials set by the user in the signature modal will be added to the signature field.
## Signature field APIs
Besides the interaction between signature fields and the signature tool, two APIs, [isSignedDigitally](https://sdk.apryse.com/api/web/Core.Annotations.SignatureWidgetAnnotation.html#isSignedDigitally) and [createSignHereElement](https://sdk.apryse.com/api/web/Core.Annotations.SignatureWidgetAnnotation.html#SignatureWidgetAnnotation__anchor) are available for developers' use.
## Placing the signature image on click
If you want to place a signature on click of a Sign Here field, you can [sign](https://sdk.apryse.com/api/web/Core.Annotations.SignatureWidgetAnnotation.html#sign__anchor) it by listening on `locationSelected` event. The sign method takes a freehand annotation or a stamp annotation as a parameter. The following example for V8.10+ shows how we can use a stamp annotation to sign a signature widget.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer({
...
css: 'path/to/stylesheet.css'
}).then(instance => {
const { Tools, documentViewer, Annotations } = instance.Core;
// Disable the signature modal as we will be signing on click
instance.UI.disableElements(['signatureModal']);
const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
signatureTool.addEventListener('locationSelected', async (_, widget) => {
const signatureImage = 'data:image/png;base64....'// Base 64 string of the image
const stamp = new Annotations.StampAnnotation();
stamp.PageNumber = 1;
stamp.X = 100;
stamp.Y = 250;
stamp.Width = 275;
stamp.Height = 40;
await stamp.setImageData(signatureImage);
// sign method takes a stamp or freehand annotation
widget.sign(stamp);
});
});
```
{% endcode %}
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer({
...
css: 'path/to/stylesheet.css'
}).then(instance => {
const { Tools, docViewer } = instance;
const signatureTool = docViewer.getTool('AnnotationCreateSignature');
signatureTool.on('locationSelected', async () => {
await signatureTool.setSignature(base64Image);
signatureTool.addSignature();
instance.closeElements(['signatureModal']);
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
## isSignedDigitally
`isSignedDigitally` returns a promise that will be resolved with a boolean value indicating if the signature field is signed digitally.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager } = instance.Core;
documentViewer.addEventListener('annotationsLoaded', () => {
const signatureWidgetAnnots = annotationManager.getAnnotationsList().filter(
annot => annot instanceof Annotations.SignatureWidgetAnnotation
);
signatureWidgetAnnots.forEach(annot => {
annot.isSignedDigitally().then(isSigned => {
if (isSigned) {
// if this signature field is signed initially
} else {
// if this signature field is not signed initially
}
});
});
});
});
```
{% endcode %}
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { docViewer, annotManager } = instance;
docViewer.on('annotationsLoaded', () => {
const signatureWidgetAnnots = annotManager.getAnnotationsList().filter(
annot => annot instanceof Annotations.SignatureWidgetAnnotation
);
signatureWidgetAnnots.forEach(annot => {
annot.isSignedDigitally().then(isSigned => {
if (isSigned) {
// if this signature field is signed initially
} else {
// if this signature field is not signed initially
}
});
});
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
## createSignHereElement
`createSignHereElement` is a function that creates the "sign here" element in the annotation field. The return value of this function is a DOM element which will be appended to the field. This can be replaced with your own function.
By default the sign here element has white text and a dark blue background:
You can change the background to red by directly modifying the returned DOM element.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
const createSignHereElement = Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement;
Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function() {
// signHereElement is the default one with dark blue background
const signHereElement = createSignHereElement.apply(this, arguments);
signHereElement.style.background = 'red';
return signHereElement;
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
If you want to create your own sign here element, say a div element with inline svg, you can assign your function to `createSignHereElement`. The following is an example that uses inline svg:
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function() {
const div = document.createElement('div');
div.style.width = '100%';
div.style.height = '100%';
div.style.cursor = 'pointer';
const inlineSvg = '';
div.innerHTML = inlineSvg;
return div;
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Signing with annotation vs signing with appearance
Starting in WebViewer 11 signature fields will be signed by appearance by default. Signing by annotation will still be supported. Signing with an annotation is used primarily for e-signatures which have no additional identifiable information about the creator other than an author field which can be altered. Signing with a signature appearance, on the other hand, can be used for [Digital Signatures](/web/digital-signature/signature.md#digital-signature-vs-esignature) as they don't create additional annotations and cause invalid digital signature validation.
You can change signing modes using the Signature Tool [setSigningMode](https://sdk.apryse.com/api/web/Core.Tools.SignatureCreateTool.html#setSigningMode__anchor) API.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...).then(instance => {
const tool = instance.Core.documentViewer.getTool('AnnotationCreateSignature');
tool.setSigningMode(instance.Core.Tools.SignatureCreateTool.SigningModes.APPEARANCE);
})
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Annotation associated with signature widget
When signing a signature widget with an annotation, after the signature annotation (drawing, typing or image) is added to a signature widget, you can access that annotation through the `annot` property of the signature widget object.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
signatureWidgetAnnots.forEach(signatureWidgetAnnot => {
console.log(signatureWidgetAnnot.annot);
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
## isSignedByAppearance
Starting in WebViewer 8.12, you can check if a widget is signed by an appearance using the [isSignedByAppearance API](https://sdk.apryse.com/api/web/Core.Annotations.SignatureWidgetAnnotation.html#isSignedByAppearance__anchor).
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
signatureWidgetAnnots.forEach(annot => {
if (annot.isSignedByAppearance()) {
// if this signature field is signed by an appearance
} else {
// if this signature field is not signed by an appearance
}
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Signing a Signature field programatically
Starting in WebViewer 8.10, signature fields can be signed programatically using the [signSignatureWidget API](https://sdk.apryse.com/api/web/UI.html#.signSignatureWidget__anchor). This will add a signature to the field using whichever signing mode you are using.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
instance.UI.signSignatureWidget(signatureWidget);
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Clearing a Signature from a Signature field
Starting in WebViewer 8.12, signature fields can be cleared using the [clearSignature API](https://sdk.apryse.com/api/web/Core.Annotations.SignatureWidgetAnnotation.html#clearSignature__anchor). This will remove the signature, whether it is an appearance signature or annotation signature, from the field and then redraw it as unsigned.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
signatureWidgetAnnot.clearSignature(annotationManager);
```
{% endcode %}
{% endtab %}
{% endtabs %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/digital-signature/interacting-with-signature-field.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.