Sign PDF

Learn with this guide how you can add one or more signatures to a PDF, in the location of your choice.

Basic signature addition

To add signatures with the Visual PDF API, use a sign task in a file processing pipeline.

    
      // Creating the form data for the pipeline
      const form = new FormData();

      // Adding the PDF to add the signature to
      form.append('file-1', myFile);

      // Adding the signature image
      form.append('signature-1', mySignature);

      // Inserting the signature on the PDF
      form.append(
        'tasks',
        [
          {
            tool: 'sign',
            options: {
              signatures: [
                {
                  // Inserting the signature at x=30 y=50 (center)
                  // with a maximum width of 150 and maximum height of 100
                  box: [30, 50, 150, 100],
                  // Indicate which file is to be used for signature
                  file: 'signature-1',
                  pages: [0],
                },
                // We could have added additional signatures here
              ],
            },
          },
        ],
      );
    
  

Adding text signature or content

The add text signature functionality allows you to add for example

• a name
• any mention ("Read and approved", "Good for agreement", etc.)
• a date

    
      options: {
        signatures: [
          {
            box: [250, 50, 200, 100],
            text: 'Good for agreement',
            color: '#0000ff',
            font: 'libre-baskerville',
            pages: ['last'],
          },
        ],
      }
    
  

Adding multiple signatures

You can insert as many signatures as needed on a PDF.

To achieve this, you will need to add all the necessary signature images, and add several instructions in the signatures option:

    
      // Creating the form data for the pipeline
      const form = new FormData();

      // Adding the PDF to add the signature to
      form.append('file-1', myFile);

      // Adding the signature images
      form.append('signature-1', mySignature);
      form.append('signature-2', johnSignature);

      // Inserting the signature on the PDF
      form.append(
        'tasks',
        [
          {
            tool: 'sign',
            options: {
              signatures: [
                {
                  box: [30, 50, 150, 100],
                  file: 'signature-1',
                  pages: ['all'],
                },
                {
                  box: [250, 50, 150, 100],
                  file: 'signature-2',
                  pages: ['all'],
                },
                {
                  box: [250, 100, 200, 100],
                  text: 'John\'s signature',
                  color: '#000000',
                  font: 'libre-baskerville',
                  pages: ['all'],
                },
              ],
            },
          },
        ],
      );
    
  

Signature settings

We have seen in the previous examples that various parameters are available to position and personalize the signatures.

Let's see here an exhaustive list of these options, their meaning and their possible values.

Box

This is a rectangle in which the signature will be included. It will not be visible on the PDF, but allows you to indicate the position, maximum width and maximum height of the signature. Depending on the shape of the signature, it will occupy the entire width or the entire height of this rectangle.

It is represented by an array in the format [x, y, width, height] and can be expressed in relative or absolute values.

The x and y parameters represent the coordinates of the center of the box. This way, if you rotate the signature, this coordinate will always be the center of the signature.

Rotation

This parameter allows you to rotate a signature, with the angle of your choice, expressed in degrees.

The origin of the rotation is the center of the signature.

    
      options: {
        signatures: [
          {
            box: [250, 50, 200, 100],
            file: 'signature-1',
            pages: [0],
            // Rotate the signature 15 degrees
            rotation: 15,
          },
        ],
      }
    
  

Text options

When you add a signature in text format, you can configure its appearance via various options:

• color: the color of the text
• font: the font of the text, among those available