Programmatically create signature elements

Product: PDFJS Express Plus

Our requirement is to be able to add signing fields programmatically onto a PDF document with set X, Y coordiantes. This is so that the sign here fields are already populated and the end user can easily click on it to sign. We are able to add annotations just fine programmatically but the document does not specify how to do this with signature fields.

To accomplish this, we started with this code. The code actually creates a SignHereElement. However, we are not sure how best to add this to the pdf document so that when the viewer opens the Sign Here indicates where the end user needs to click and sign.

 WebViewer({
   path: '/lib', // path to the PDF.js Express'lib' folder on your server
   initialDoc: '/sign.pdf',
 // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
}, document.getElementById('viewer'))  
 .then(instance => {
  const docViewer = instance.Core.documentViewer;
  const annotationManager = instance.Core.annotationManager;

  const Tools = instance.Core.Tools;
  const Annotations = instance.Core.Annotations;

  const createSignHereElement = Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement;    
Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function() {
  const signHereElement = createSignHereElement.apply(this, arguments);
  signHereElement.style.background = 'red';
  return signHereElement;
};
//can we add the signHereElement someplace to the document here??
  

docViewer.addEventListener('documentLoaded', () => {
  // Easily able to add a rectangle 
  const rectangleAnnot = new Annotations.RectangleAnnotation();
  rectangleAnnot.PageNumber = 1;
  rectangleAnnot.X = 100;
  rectangleAnnot.Y = 150;
  rectangleAnnot.Width = 200;
  rectangleAnnot.Height = 50;
  rectangleAnnot.Author = annotationManager.getCurrentUser();
  annotationManager.addAnnotation(rectangleAnnot);

  annotationManager.redrawAnnotation(rectangleAnnot);
       
   **//HOW DO WE ADD A SIGNING ELEMENT HERE AT A Preset X and Y** 
});
 });

Any guidance would be greatly appreciated.

Hello there.

For questions related to PDFJS Express, please use its respective forum: https://pdfjs.community/

Best regards