Signature Fields


About PDF.js Express Signature Field | Documentation

Can we have 2 types of signatures fields on the same document?

One for signatures and one for initials for example.


Which product are you using?

PDF.js Express Version

Detailed description of issue
{Description here}

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


Hey there!

Right now we only support standard signature fields (this is part of the PDF spec). If you wanted the user to do an initial instead of a signature you would have to enforce that on your end.

I think you might find this guide useful (this is a WebViewer guide but it applies to PDF.js Express as well). What you could do is change the style of your initial fields to say “Add initials here” or something.



I first put StampAnnotations (with different styles for initials and signature) so the user can choose the locations in the document.

Then I change these StampAnnotations to SignatureWidgetAnnotation, but I can’t create different styles for the signature widgets. When I change to what would be the initials, it also changes to what would be the signature.

That is, I cannot make a SignatureWidgetAnnotation with “Sign here” and another with “Initial here” in the same document.

How could I do this?


When you create the SignatureWidgetAnnotation, you could insert some custom data on the annotation which you can use to identify which styling the element should have:

    const annot = new Annotations.SignatureWidgetAnnotation(field, {});
    annot.setCustomData("type", "initial"); // set the type of signature here

    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);

      const type = this.getCustomData("type");

      if (type === "initial") {
        // set initial theme here
      } else {
        // set signature theme here

      return signHereElement;


1 Like

Hi, @Logan!

I’ve tried something like this and it didn’t work.

But it was because I put the SignatureWidgetAnnotation prototype while creating the document and then exporting the xfdf. When I imported the xfdf into another WebViewer, the prototype reverted to the default (white text and blue background).

So I just put the custom SignatureWidgetAnnotation prototype when I want to use the widgets to sign.

Thanks for your help!

1 Like

And I didn’t use customData either. :sweat_smile:

Glad you figured it out!

Let me know if there’s anything else you need help with