Some test text!

menu
Signature toolkeyboard_arrow_down

Signature tool in WebViewer

Clicking the signature button in the header will open the signature dialog immediately.
Users can also choose to save the signature and preview it before being drawn on the document.

Signatures can be created by:

  • drawing signature modal - draw
  • typing signature modal - type
  • uploading an image signature modal - upload

If there are any saved signatures, clicking the signature button will open an overlay in which signatures can be chosen and applied directly.

new signature overlay

linkImporting existing signatures

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

WebViewer({
  ...
  css: 'path/to/stylesheet.css'
}).then(instance => {
  const { docViewer } = instance;
  const signatureTool = docViewer.getTool('AnnotationCreateSignature');

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

You can also save them by calling exportSignatures.

linkAdding 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. Following is an example that adds Tangerine from Google Fonts to the tab.

The css option is not necessary when adding a web safe font.
/* inside stylesheet.css */
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
WebViewer({
  ...
  css: 'path/to/stylesheet.css'
}).then(instance => {
  instance.setSignatureFonts(currentFonts => [
    ...currentFonts,
    'Tangerine',
  ]);
});

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close