React Web - Custom Modal on click of attach icon

WebViewer Version: 8.3.1

I want to implement custom modal on click of attachment widget and image in insert menu
how can i do this?

  1. whenever receiver try to click stamp or attachment icon its opening default signature modal
    I want to open my custom modal.

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:


Hello there.

This Attach placeholder is not native. Could you tell me exactly what it is?

@dfelix @skumarwudza is trying to create a custom widget placeholder for attachment and want to open custom modal.
We also facing the same issue . Not only for attachment but also have issue with opening existing modal.
Consider below scenario:

  1. As there is signatureWidgetAnnotation to create the signature placeholder and when we click on that signature modal get auto open.
  2. We want same type of widget for Stamp and attachment placeholder and when we click on that we able to open either existing Stamp modal or our own custom modal.

We are stuck at this place please help us on this . Thanks in advance.

@vtiwari Sounds good. But since this is not native, I need to know how are you guys creating it and what type of thing it is so I can tell you how to open a custom modal when clicking it.

Is it a custom annotation? if yes, does it extend some other annotation?

@dfelix It’s SignatureWidget annotation with Image in background. We tried to use ButtonWidgetAnnotation but in this background image does not applying.


Unfortunately, there is no easy and clean way to do this with the current API, but I could achieve the desired behavior with the following code snippet:

const { annotationManager, Annotations } = instance.Core;
  const {setCustomModal, openElements} = instance.UI;

  const modal = {
    dataElement: 'meanwhileInFinlandModal',
    render: () => {
      const div = document.createElement("div"); = 'white'; = 'hotpink'; = '20px 40px'; = '5px';
      div.innerText = 'Meanwhile in Finland';
      return div;

  annotationManager.addEventListener('annotationChanged', (annotations, action) => {
    if (action === 'add') {
      setTimeout(() => {
        annotations.forEach((annotation) => {
          if (annotation instanceof Annotations.SignatureWidgetAnnotation) {
            annotation.innerElement.childNodes[0].childNodes[0].addEventListener('click', (e) => {
      }, 1)
1 Like

Thanks @dfelix . It really worked. Just to add here setTimeout((),timeDuration) , Here timeDuration should be enough to render PDF properly otherwise annotation.innerElement will be undefined. I have used 1000 for safer side as Large size PDF takes time to download from server.

@dfelix Now we are able to open the attachment modal and able to attach the file .
Now we are facing issue that after attach the file when we generate final pdf and open final pdf in Pdf Adob reader but attachment does not open clicking of attachment icon.
Below is the method we are using to generate final PDF:

  • Load the pdf from local device and create the attachment placeholder on the pdf.

  • Get the byte array from pdfViewer and upload into our server as file . for eg. sample.pdf

  • Load the pdf from the server using url and click on attachment placeholder icon and attach a file (for eg. image file)

  • Export the xfdf using for const xfdf = await annotManager.exportAnnotations({
    widgets: false,
    links: false,

  • Then we upload xfdf server and our and server used pdftron sdk and merge xfdf into original pdf .

  • when we download the the final PDF and open it in pdf Adobe reader we are not able to open attachment from final PDF.

  • While If we download the pdf from webviewer setting menu , adob reader able to detect the attachment and able to open the attached file but it doesn’t work when we generate pdf using merging xfdf with pdf.

Thanks in advance


What does the XFDF look like when you import it? And if you export the XFDF again right after importing it, what does it look like?