Setup options when customizing WebViewer

There are two ways of adding customization to WebViewer, the first way is by accessing the WebViewer instance within your app and the second is by using a config file, which is a stand-alone JavaScript file executed inside WebViewer's iframe.

Config file

You can organize your custom code in a separate JavaScript file that is executed in the context of the iframe. In this way, you have direct access to the iframe window and document, and you can use WebViewer's global methods directly. See more details about config files.

Config files are recommended when you are hosting the WebViewer lib folder on a separate server from your application. Since the config file is executed directly in the iframe there are no cross origin issues.

// app.js
// Instantiate WebViewer
WebViewer({
  path: 'https://myotherserver.com/webviewer/lib',
  licenseKey: 'YOUR_LICENSE_KEY'
  initialDoc: '/files/webviewer-demo-annotated.pdf',
  config: 'config.js' // path/to/your/config.js
}, document.getElementById('viewer'));

JavaScript (SDK v8.0+)

// config.js executed inside the iframe
instance.UI.addEventListener(instance.UI.Events.VIEWER_LOADED, () => {
  const { documentViewer, annotationManager } = instance.Core;

  // Add customization here
  documentViewer.setMargin(20);
  documentViewer.addEventListener('fitModeUpdated', fitMode => {
    console.log('fit mode changed');
  });

  instance.UI.disableElement('searchButton');
  instance.UI.setTheme('dark');
});

instance.UI.addEventListener(instance.UI.Events.DOCUMENT_LOADED, () => {
  const { documentViewer, annotationManager } = instance.Core;

  // Add customization here
  // Draw rectangle annotation on first page
  // "Annotations" can be directly accessed since we're inside the iframe
  const rectangle = new Annotations.RectangleAnnotation();
  rectangle.PageNumber = 1;
  rectangle.X = 100;
  rectangle.Y = 100;
  rectangle.Width = 250;
  rectangle.Height = 250;
  rectangle.Author = annotationManager.getCurrentUser();
  annotationManager.addAnnotation(rectangle);
  annotationManager.drawAnnotations(rectangle.PageNumber);
})

JavaScript (SDK v6.0+)

// config.js executed inside the iframe
window.addEventListener('viewerLoaded', () => {
  const docViewer = readerControl.docViewer;
  const annotManager = docViewer.getAnnotationManager();

  // Add customization here
  docViewer.setMargin(20);
  docViewer.on('fitModeUpdated', fitMode => {
    console.log('fit mode changed');
  });

  readerControl.disableElement('searchButton');
  readerControl.setTheme('dark');
});

window.addEventListener('documentLoaded', () => {
  const docViewer = readerControl.docViewer;
  const annotManager = docViewer.getAnnotationManager();

  // Add customization here
  // Draw rectangle annotation on first page
  // "Annotations" can be directly accessed since we're inside the iframe
  const rectangle = new Annotations.RectangleAnnotation();
  rectangle.PageNumber = 1;
  rectangle.X = 100;
  rectangle.Y = 100;
  rectangle.Width = 250;
  rectangle.Height = 250;
  rectangle.Author = annotManager.getCurrentUser();
  annotManager.addAnnotation(rectangle);
  annotManager.drawAnnotations(rectangle.PageNumber);
})