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
• typing
• uploading an image

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

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.

/* 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',
  ]);
});