Deep link to specific annotation

Using WebViewer is there a way to deep link to a specific annotation for example when sending email notifications the user can click on hyperlink to navigate directly to specific annotation.

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello Vineet,

Basically you will need some way of parsing the ID of the annotation from the URL. This can be implemented however you want (read query parameter, hash, etc). Here’s a code example where I read the ID from the hash.

Webviewer(/*webviewer settings*/).then((instance) => {
  const { docViewer, annotManager } = instance;

  // Get the ID from the window hash (you could do query params
  // instead, whatever matches your use case).
  const jumpToId = window.location.hash;

  // If the ID exists in the URL, wait for annotations to load.
  if (jumpToId) {
    docViewer.on('annotationsLoaded', () => {

      // Once annotations are loaded, find the annotation with
      // the matching ID and jump to it on the page (slice(1)
      // to remove the '#' from the hash string).
      const annot = annotManager.getAnnotationById(jumpToId.slice(1));
      if (annot) {
        annotManager.jumpToAnnotation(annot);
      }
    });
  }
});

If you are loading your annotations from an XFDF string, you can ignore the docViewer.on event listener and do something like this instead:

await annotManager.importAnnotations(xfdfString);

Best Regards,

Liam

Thanks @Liam this should help. Appreciate the code snippet as well!

1 Like