How to get the signatures from Signature Panel

WebViewer Version: 8.8.0

Please give a brief summary of your issue:
We’re trying to get the signature annotation from the signature panel so that we can set it as signature.
So the user can immediately add the selected signature to the signing fields.

We’re currently handling it by, disabling the quick sign whenever the user has more than 1 signature in his signature panel.

And if possible, how do we disable when clicking one of the signature in the panel, it won’t get attached to the mouse.

Would like some advice about this.
Thank you!

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:



Thank you for contacting WebViewer Support. You can do something like the following

const signatureTool = instance.docViewer.getToolModeMap().AnnotationCreateSignature;
const saveSignatures = signatureTool.getSavedSignatures();

// you can copy the annotation in the signature panel and add it to the annotation manager
const copyOfAnnot = annotationManager. getAnnotationCopy(saveSignatures[0]);
// can also use getPreview to get a base64 string of the signature
// const base64Signature = await signatureTool.getPreview(saveSignatures[0]);

You will mainly want to use the getSavedSignatures and either copy the saved annotation and get a base 64 string of it.

Please let me know if the above helps or if you want me to clarify something

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.

Hi Andrew Yip,

Thanks for the quick response.
How do I get the signature that the user clicked?
For example, if the user clicked on “Signature 1”, I would like to find that signature annotation.

I checked Signature Tool’s events and none of them are working for me.

Ah by the way, this is the code that I was using to immediately allow users to sign with just a click. It will only work with the 1st signature though:

signatureTool.addEventListener(‘locationSelected’, () => {
const signatures = signatureTool.getSavedSignatures()
const [savedSignature] = signatures


You can use the annotationChanged event to get the newly added annotation

You can also see what button was pressed by doing the following

Webviewer({}, document.getElementById('viewer')).then(async (instance) => {
  const { annotManager, docViewer } = instance;
  const wvIframe = document.querySelector('#viewer > iframe');

  // can listen for the "visibilityChanged" events to see when the popup shows up
  wvIframe.contentWindow.addEventListener('visibilityChanged', (e) => {
    const { isVisible, element } = e.detail;
    if (isVisible && element === 'toolStylePopup') {
      // use setTimeout to wait for UI to update
      setTimeout(() => {
        const signaturePanel = wvIframe.contentDocument.querySelector('.tab-panel[data-element="savedFullSignaturePanel"]');
        if (signaturePanel) {
          signaturePanel.querySelectorAll('.signature-row').forEach((row, index) => {
            row.querySelector('.signature-row-content').addEventListener('click', () => {
              // can know which button was pressed using "index"
              // can use "instance.docViewer.getTool('AnnotationCreateSignature').getSavedSignatures()[index]"
      }, 50);

Let me know if the above helps or if you want me to clarify something

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.

Hi Andrew_Yip,

I used the code you provided as a guide and it is working wonderfully.
Thanks a lot!

One last thing, is it possible to remove this behavior where when I click on a signature in the signature panel, the annotation will get attached to my mouse?
Or when we create a new signature from the modal, it will automatically get attached to my mouse.

I want to avoid that since we only want users to attach their signatures in the signature fields, and this behavior will allow them to place their signatures anywhere.


You can try doing something like following

  const signatureTool = docViewer.getTool('AnnotationCreateSignature'); 

  const defaultMouseLeftUp = signatureTool.mouseLeftUp;
  signatureTool.mouseLeftUp = function(e, widget) {
    // ignore "mouseLeftUp" event when no widget is selected
    if (!widget) {
    defaultMouseLeftUp.apply(this, arguments);

  // disable the default "switchIn" or "showPreview" event
  signatureTool.switchIn = function() {};
  signatureTool.showPreview = function() {};

Please let me know if the above works for you or if you want me to clarify something

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.


The code you provided helped a lot, it does the trick.
No more previews when clicking on the signature.

Thanks a lot!