> 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/annotation-types/stickynoteannotation.md).
# Sticky Note Annotations
Enhance document collaboration with sticky note annotations. Learn how to add comments, replies, and customize properties for precise feedback using web. The Apryse Web SDK streamlines secure, serverl
Sticky note annotations are annotations that are positioned to leave a comment on an area of a document. They are occasionally referred to as comments. [Replies](/web/annotation/annotationmanager/replies.md) to annotations are also represented by sticky note annotations.
Sticky notes are created with `NoZoom` and `NoRotate` set to `true` by default. This means they will remain the same size at all zoom levels and will not rotate with the view/page. Stroke color is also used as the primary color of the icons as opposed to fill color.
In terms of dimensions, `Width` and `Height` are ignored and the static property `SIZE` should be used instead to set the width and height of the annotation.
## Instantiation
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
documentViewer.addEventListener('annotationsLoaded', () => {
const annot = new Annotations.StickyAnnotation({
PageNumber: 1,
X: 100,
Y: 50,
Icon: Annotations.StickyAnnotation.IconNames.CHECK,
StrokeColor: new Annotations.Color(0, 255, 0, 1),
});
annot.setContents(`Visited: ${new Date()}`);
annotationManager.addAnnotation(annot);
annotationManager.redrawAnnotation(annot);
});
});
```
{% endcode %}
[DocumentViewer#annotationsLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:annotationsLoaded) [StickyAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html) [StickyAnnotation.IconNames](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html#.IconNames) [Color](https://sdk.apryse.com/api/web/Core.Annotations.Color.html) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { docViewer, annotManager, Annotations } = instance;
docViewer.on('annotationsLoaded', () => {
const annot = new Annotations.StickyAnnotation();
annot.PageNumber = 1;
annot.X = 100;
annot.Y = 50;
annot.Icon = Annotations.StickyAnnotation.IconNames.CHECK;
annot.StrokeColor = new Annotations.Color(0, 255, 0, 1);
annot.setContents(`Visited: ${new Date()}`);
annotManager.addAnnotation(annot);
annotManager.redrawAnnotation(annot);
});
});
```
{% endcode %}
[DocumentViewer#annotationsLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:annotationsLoaded) [StickyAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html) [StickyAnnotation.IconNames](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html#.IconNames) [Color](https://sdk.apryse.com/api/web/Core.Annotations.Color.html) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}
{% endtabs %}
## XFDF
Element name: `text`
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Required properties
### PageNumber
Gets or sets the page number of a document that the annotation appears on.
### X
Gets or sets the annotation's x-axis position.
### Y
Gets or sets the annotation's y-axis position.
## Notable properties
For the full list of properties, please visit the annotation's [API docs](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html).
### \[static] SIZE
The size of the width and height of all sticky annotations.
### \[static] IconNames
An [enum](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html#.IconNames) with possible icon names.
### Icon
The name of the icon to use for this sticky annotation. Possible default icon types:
* Comment
* Insert
* Circle
* NewParagraph
* Help
* Key
* Check
* Checkmark
* Cross
* CrossHairs
* Paragraph
* RightArrow
* RightPointer
* Star
* UpArrow
* UpLeftArrow
### InReplyTo
The ID of the annotation that this annotation is replying to or the parent annotation it is grouped with. This should be set if you are creating a reply.
### ReplyType
The type of the reply. Setting this to `group` will group this annotation to the annotation referenced by `InReplyTo`.
### State
Gets or sets the state of the annotation. Annotations may have an author-specific state associated with them depending on their `StateModel`.
If the annotation's `StateModel` is set to `Marked`, there are possible two states: `Marked` and `Unmarked`.
With `Review`, there are a number of states:
* Accepted
* Rejected
* Cancelled
* Completed
* None
### StateModel
Gets or sets the statemodel of the annotation. There are two default statemodels: `Marked` and `Review`. Each statemodel has different states. See the `State` property for details.
### Author
The author of the annotation.
### Color
Gets or sets the annotation's stroke color.
### Hidden
Gets or sets whether the annotation is hidden.
### Invisible
Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden".
### IsClickableOutsideRect
Gets or sets whether any parts of the annotation drawn outside of the rect are clickable.
### Listable
Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable.
### Locked
Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited.
### LockedContents
Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted.
### NoDelete
Gets or sets if this annotation can be deleted.
### NoMove
Gets or sets whether or not the annotation can be moved.
### NoResize
Gets or sets if this annotation can be resized by the user.
### NoRotate
Gets or sets if this annotation can be rotated.
### NoView
Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set.
### NoZoom
Gets or sets if this annotation scales with the page.
### Opacity
Gets or sets the opacity of the annotation.
### Printable
Gets or sets whether the annotation should be displayed when printing the page.
### ReadOnly
Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted.
### StrokeColor
Gets or sets the color of the annotation's stroke.
### ToggleNoView
Gets or sets whether the ToggleNoView flag is set on the annotation.
## Useful methods
### setContents
Most of the time, you will be creating a sticky note with a comment. To set that comment, you use the [`setContents`](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html#setContents) method to provide it a remark.
### getContents
As the content of the sticky note is the primary focus, there should be a way to read it from the sticky note. This can be done with the [`getContents`](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html#getContents) API.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
documentViewer.addEventListener('annotationsLoaded', () => {
const annotList = annotationManager.getAnnotationsList();
annotList.forEach(annot => {
if (annot instanceof Annotations.StickyAnnotation) {
const contents = annot.getContents();
// Check contents
}
});
});
});
```
{% endcode %}
[AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList) [StickyAnnotation.getContents](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html#getContents)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { docViewer, annotManager, Annotations } = instance;
docViewer.addEventListener('annotationsLoaded', () => {
const annotList = annotManager.getAnnotationsList();
annotList.forEach(annot => {
if (annot instanceof Annotations.StickyAnnotation) {
const contents = annot.getContents();
// Check contents
}
});
});
});
```
{% endcode %}
[AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList) [StickyAnnotation.getContents](https://sdk.apryse.com/api/web/Core.Annotations.StickyAnnotation.html#getContents)
{% endtab %}
{% endtabs %}
## Other notes
The `Checkmark` icon has a fixed color. Please use the `Check` icon if you need to adjust the color. Icon types are fixed in accordance to the PDF specification but their visual representation may change from viewer to viewer.
---
# 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/annotation-types/stickynoteannotation.md?ask=&goal=
```
`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.