> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/add-link-to-annotation.md).

# Add Link to PDF Annotations

Enhance your PDF annotations by adding clickable links to direct users within the document or to external URLs. Learn how to attach hyperlinks to visual annotations for a more interactive experience.

You can make annotations clickable and link to a page in the same document or an external URL. This is done by [grouping](/web/annotation/annotationmanager/grouping.md) a link annotation with the desired annotation. This can be useful to create links to other content through a visual annotation markup as opposed to plain text. For example, you can leave a stamp annotation of a picture taken somewhere in the world and attach a geolocation URL to it.

## Adding links to annotations through the UI

By default, the ContextMenu of an annotation has an option for annotation links:

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-72fc108a194b94356e3049c375a1bf9c5e4e7f3b%2Fe18e97021fb2d9501c0d1a8ed06f9337cf3412ad-249x268.png?alt=media)

Which, upon being clicked, will pop-up a modal for adding a hyperlink, or intra-document link, to an annotation:

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-1f686c9cce7774295058e5d2c0853fb788905868%2F61f87157832527f2d61a79a0b8c3c124ac3c1904-398x112.png?alt=media)

## Programmatically add hyperlink to an existing annotation

To programmatically add a hyperlink to an existing annotation, we must first create a [link annotation](https://sdk.apryse.com/api/web/Core.Annotations.Link.html) and attach a [URI action](https://sdk.apryse.com/api/web/Core.Actions.URI.html) to it, which is triggered when the existing annotation is clicked. Finally, the link annotation is grouped with the desired annotation.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

  documentViewer.addEventListener('documentLoaded', () => {
    /**
     * Assumes an annotation has been created, with the variable name "originalAnnotation"
     */
    const newLink = new Annotations.Link();
    newLink.PageNumber = originalAnnotation.PageNumber;
    newLink.X = originalAnnotation.X;
    newLink.Y = originalAnnotation.Y;
    newLink.Width = originalAnnotation.Width;
    newLink.Height = originalAnnotation.Height;

    /**
     * Optional: Add styling to link to indicate to user the annotation has a
     * link associated with it
     */
    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
    newLink.StrokeStyle = 'underline';
    newLink.StrokeThickness = 2;

    newLink.addAction(
      'U',
      new Actions.URI({
        uri: 'https://www.apryse.com',
      }),
    );

    annotationManager.addAnnotation(newLink);
    annotationManager.groupAnnotations(originalAnnotation, [newLink]);
    // Re-render annotations (requires major redraw)
    annotationManager.drawAnnotationsFromList(newLink);
  });
});
```

{% endcode %}

[AnnotationManager#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) [Annotations.Link](https://sdk.apryse.com/api/web/Core.Annotations.Link.html) [Actions.URI](https://sdk.apryse.com/api/web/Core.Actions.URI.html) [Actions.Dispatcher.addActions](https://sdk.apryse.com/api/web/Core.Actions.Dispatcher.html#addActions__anchor) [Core.AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [Core.AnnotationManager.groupAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#groupAnnotations) [Core.AnnotationManager.drawAnnotationsFromList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#drawAnnotationsFromList)
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(...).then(instance => {
  const { Actions, Annotations, annotManager, docViewer } = instance;

  docViewer.on('documentLoaded', () => {
    /**
     * Assumes an annotation has been created, with the variable name "originalAnnotation"
     */
    const newLink = new Annotations.Link();
    newLink.PageNumber = originalAnnotation.PageNumber;
    newLink.X = originalAnnotation.X;
    newLink.Y = originalAnnotation.Y;
    newLink.Width = originalAnnotation.Width;
    newLink.Height = originalAnnotation.Height;

    /**
     * Optional: Add styling to link to indicate to user the annotation has a
     * link associated with it
     */
    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
    newLink.StrokeStyle = 'underline';
    newLink.StrokeThickness = 2;

    newLink.addAction(
      'U',
      new Actions.URI({
        uri: 'https://www.apryse.com',
      }),
    );

    originalAnnotation.associateLink([newLink.Id]);
    annotManager.addAnnotation(newLink);
    // Re-render annotations (requires major redraw)
    annotManager.drawAnnotationsFromList(newLink);
  });
});
```

{% endcode %}

[AnnotationManager#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) [Annotations.Link](https://sdk.apryse.com/api/web/Core.Annotations.Link.html) [Actions.URI](https://sdk.apryse.com/api/web/Core.Actions.URI.html) [Actions.Dispatcher.addActions](https://sdk.apryse.com/api/web/Core.Actions.Dispatcher.html#addActions__anchor) [Annotations.Annotation.associateLink](https://sdk.apryse.com/api/web/7.3/Annotations.Annotation.html#associateLink__anchor) [CoreControls.AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [CoreControls.AnnotationManager.drawAnnotationsFromList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#drawAnnotationsFromList)
{% endtab %}
{% endtabs %}

## Programmatically add a page link to an existing annotation

Similar to the example above, a link annotation is used to trigger an action when the annotation is clicked. However, in this case, a [GoTo action](https://sdk.apryse.com/api/web/Core.Actions.GoTo.html) is used instead to go to a certain page in the document.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

  documentViewer.addEventListener('documentLoaded', () => {
    /**
     * Assumes an annotation has been created, with the variable name "originalAnnotation"
     */
    const newLink = new Annotations.Link();
    newLink.PageNumber = originalAnnotation.PageNumber;
    newLink.X = originalAnnotation.X;
    newLink.Y = originalAnnotation.Y;
    newLink.Width = originalAnnotation.Width;
    newLink.Height = originalAnnotation.Height;

    /**
     * Optional: Add styling to link to indicate to user the annotation has a
     * link associated with it
     */
    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
    newLink.StrokeStyle = 'underline';
    newLink.StrokeThickness = 2;

    const pageToLinkTo = 2;

    newLink.addAction(
      'U',
      new Actions.GoTo({
        dest: new Actions.GoTo.Dest({
          page: pageToLinkTo,
        }),
      }),
    );

    annotationManager.addAnnotation(newLink);
    annotationManager.groupAnnotations(originalAnnotation, [newLink]);
    // Re-render annotations (requires major redraw)
    annotationManager.drawAnnotationsFromList(newLink);
  });
});
```

{% endcode %}

[Actions.GoTo](https://sdk.apryse.com/api/web/Core.Actions.GoTo.html) [Actions.Dest](https://sdk.apryse.com/api/web/Core.Actions.Dest.html)
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(...).then(instance => {
  const { Actions, Annotations, annotManager, docViewer } = instance;

  docViewer.on('documentLoaded', () => {
    /**
     * Assumes an annotation has been created, with the variable name "originalAnnotation"
     */
    const newLink = new Annotations.Link();
    newLink.PageNumber = originalAnnotation.PageNumber;
    newLink.X = originalAnnotation.X;
    newLink.Y = originalAnnotation.Y;
    newLink.Width = originalAnnotation.Width;
    newLink.Height = originalAnnotation.Height;

    /**
     * Optional: Add styling to link to indicate to user the annotation has a
     * link associated with it
     */
    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
    newLink.StrokeStyle = 'underline';
    newLink.StrokeThickness = 2;

    const pageToLinkTo = 2;

    newLink.addAction(
      'U',
      new Actions.GoTo({
        dest: new Actions.GoTo.Dest({
          page: pageToLinkTo,
        }),
      }),
    );

    originalAnnotation.associateLink([newLink.Id]);
    annotManager.addAnnotation(newLink);
    // Re-render annotations (requires major redraw)
    annotManager.drawAnnotationsFromList(newLink);
  });
});
```

{% endcode %}

[Actions.GoTo](https://sdk.apryse.com/api/web/Core.Actions.GoTo.html) [Actions.Dest](https://sdk.apryse.com/api/web/Core.Actions.Dest.html)
{% endtab %}
{% endtabs %}

## Next steps

Check out how you can [group](/web/annotation/annotationmanager/grouping.md) annotations or perhaps create your own [custom annotation](/web/annotation/customize/creating-custom-annotations.md)!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/annotation/add-link-to-annotation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.