Use the digital signature tool in WebViewer

Requirements

The following packages are required to use these features in production. Trial keys have unlimited access to all features.

Package: Digital Signature Live demo

In the Insert toolbar group, select the signature tool, then click the +Signature button to open the signature modal. Here, users can choose a signature type and preview it before adding it to the document.

Signatures can be one of three types:

Ink Signatures, where users can choose from one of three colors.

Text Signatures, where users can choose from one of three colors and different fonts.

Image Signatures, where users can upload a signature file by dragging and dropping a file or using the file explorer.

If you have saved signatures, clicking the signature button opens an overlay where you can choose and apply them directly.

Initials as signature

Starting in WebViewer 8.9, the Signature tool supports an additional mode for initials as signatures. This new feature is disabled by default and can be enabled using the following:

WebViewer({
  ...
}).then(instance => {
  instance.UI.enableFeatures([instance.UI.Feature.Initials]);
});

If this feature is enabled, the signature modal will also require initials to be added.

Ink Signature and Initials

Text Signature and Initials

Image Signature and Initials

Once created, the signature and initials are saved in the signatures overlay, allowing users to choose whether to apply a signature or initials.

Import existing signatures

If you already have a signature stored for the user, you can import it into the signature tool:

WebViewer({
  ...
}).then(instance => {
  const { documentViewer } = instance.Core;
  const signatureTool = documentViewer.getTool('AnnotationCreateSignature');

  documentViewer.addEventListener('documentLoaded', () => {
    signatureTool.importSignatures([base64Image]);
  });
});

WebViewer({
  ...
}).then(instance => {
  const { docViewer } = instance;
  const signatureTool = docViewer.getTool('AnnotationCreateSignature');

  docViewer.on('documentLoaded', () => {
    signatureTool.importSignatures([base64Image]);
  });
});

You can also save the signature by calling exportSignatures.

Import existing initials

Starting in WebViewer 8.9, you can also import and export a user's initials.

You can import them into the signature tool, which will make them available in the saved signatures overlay. You must have this feature enabled in order to view the saved initials in the viewer.

WebViewer({
  ...
}).then(instance => {
  const { documentViewer } = instance.Core;
  const signatureTool = documentViewer.getTool('AnnotationCreateSignature');

  documentViewer.addEventListener('documentLoaded', () => {
    signatureTool.importInitials([base64Image]);
  });
});

You can also save them by calling exportInitials.

Add custom fonts

By default, GreatVibes is the only font that is available in the Type tab. More fonts can be added using the setSignatureFonts API. The following is an example that adds Tangerine from Google Fonts to the tab.

Google recommends importing fonts in your index.html rather than via CSS for performance reasons. You can read more about Google's recommended methods here: https://developers.google.com/fonts/docs/css2

Here are two ways to import your fonts in index.html:

/* inside <head> of index.html */

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
  href="https://fonts.googleapis.com/css2?family=Tangerine&display=swap"
  rel="stylesheet">

/* inside index.html */

<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
</style>

WebViewer({
  ...
  css: 'path/to/stylesheet.css'
}).then(instance => {
  instance.UI.setSignatureFonts(currentFonts => [
    ...currentFonts,
    'Tangerine',
  ]);
});

WebViewer({
  ...
  css: 'path/to/stylesheet.css'
}).then(instance => {
  instance.setSignatureFonts(currentFonts => [
    ...currentFonts,
    'Tangerine',
  ]);
});

Export a signature to blob storage

If you created a signature and want to store it for later use, you can export it as a blob and save it to an external storage solution. If you are on WebViewer 8.9 and have initials enabled, the following code will also save initials as blobs for storage.

WebViewer({
  ...
}).then(instance => {
  const { annotationManager, documentViewer } = instance.Core;

  documentViewer.addEventListener('annotationsLoaded', async () => {
      annotationManager.addEventListener('annotationSelected', async (annotationList) => {
          annotationList.forEach(annotation => {
              if (annotation.Subject === "Signature")
                  extractAnnotationSignature(annotation, documentViewer);
          })
      })
  });
});

WebViewer({
  ...
}).then(instance => {
  const { annotManager, docViewer } = instance;

  docViewer.on('annotationsLoaded', async () => {
      annotManager.on('annotationSelected', async (annotationList) => {
          annotationList.forEach(annotation => {
              if (annotation.Subject === "Signature")
                  extractAnnotationSignature(annotation, docViewer);
          })
      })
  });
});

Sample function to export the signature:

async function extractAnnotationSignature(annotation, docViewer) {
    // Create a new Canvas to draw the Annotation on
    const canvas = document.createElement('canvas');
    // Reference the annotation from the Document
    const pageMatrix = docViewer.getDocument().getPageMatrix(annotation.PageNumber);
    // Set the height & width of the canvas to match the annotation
    canvas.height = annotation.Height;
    canvas.width = annotation.Width;
    const ctx = canvas.getContext('2d');
    // Translate the Annotation to the top-left corner of the canvas, i.e., (0, 0)
    ctx.translate(-annotation.X, -annotation.Y);
    // Draw the Annotation onto the Canvas
    annotation.draw(ctx, pageMatrix);
    // Convert the Canvas to a Blob Object for Upload
    canvas.toBlob((blob) => {
        // Call your Blob Storage Upload Function
    });
}

Starting in WebViewer 12.2, you can add a disclaimer to the signature modal, for example, to cover confidentiality or legal terms. The disclaimer is off by default. To show it, call UI.enableSignatureDisclaimer. To hide it again, call UI.disableSignatureDisclaimer. You can also replace the default text with your own by using UI.setTranslations.

WebViewer({
  // ...Config options
}).then(instance => {
  const { UI } = instance;
  UI.enableSignatureDisclaimer();
  UI.setTranslations('en', {
      'message.signatureDisclaimer': "New legal message"
  });
  UI.disableSignatureDisclaimer();
});

Related links

The following screenshot shows the signature modal with the default disclaimer text. If you set a custom message with UI.setTranslations, it replaces this text.