> 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/outlines-bookmarks/user-bookmarks.md).
# Creating user-defined bookmarks in WebViewer
Learn how to create user-defined bookmarks in WebViewer. Easily navigate to saved pages, export bookmarks, and enable bookmarking features using web. The Apryse Web SDK streamlines secure, serverless
{% hint style="info" %}
**Requirements**
*These packages are required to use these features in production. Trial keys have unlimited access to all features*
Package: Page ManipulationLive demo
{% endhint %}
WebViewer allows users to create bookmarks for each page. When clicked, these bookmarks will navigate to the saved page. In order to persist these bookmarks, WebViewer can easily export them. They can then be saved to a server. See our [user-defined bookmarks demo](https://showcase.apryse.com/add-personal-bookmark-pdf) to try it out.
You can enable bookmarks by enabling the following elements. The rest of this guide will demonstrate a ready to go sample and how you can export them.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
instance.enableElements(['bookmarksPanel', 'bookmarksPanelButton']);
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
[WebViewerInstance.enableElements](https://sdk.apryse.com/api/web/UI.html#.enableElements)
## Prerequisites
* [**Node.js**](https://nodejs.org/en/download/) and [**NPM**](https://www.npmjs.com/get-npm/)
* Try out the [WebViewer Sample](/web/get-started/samples/webviewer-user-bookmarks-nodejs.md)
## Initial setup
Clone from the [sample](https://github.com/ApryseSDK/webviewer-user-bookmarks-nodejs-sample/). The directory should look something like this:
{% tabs %}
{% tab title="HTML" %}
{% code lineNumbers="true" %}
```html
webviewer-user-bookmarks-nodejs-sample
├── ...
├── package.json
├── README.md
├── client
│ ├── lib
│ │ ├── ...
│ ├── index.html
│ ├── index.js
│ └── webviewer-demo.pdf
└── server
├── bookmarks
│ ├── ...
├── bookmarksHandler.js
└── serve.js
```
{% endcode %}
{% endtab %}
{% endtabs %}
## How to run
1. Navigate to the extracted `sample` folder and install the required dependencies to run the samples by executing:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
npm install
```
{% endcode %}
{% endtab %}
{% endtabs %}
1. Next run the sample by executing:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
npm start
```
{% endcode %}
{% endtab %}
{% endtabs %}
You should see a message that reads:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
...
Server is listening at http://localhost:3000/client/index.html
```
{% endcode %}
{% endtab %}
{% endtabs %}
1. Navigate to `http://localhost:3000/client/index.html` and you will see the sample WebViewer. Open the left panel and navigate to the last tab to see bookmarks. You should see the same bookmarks as the image above.
## Import and Exporting Bookmarks
The webviewer instance contains the functions [exportBookmarks](https://sdk.apryse.com/api/web/WebViewerInstance.html#exportBookmarks__anchor) and [importBookmarks](https://sdk.apryse.com/api/web/WebViewerInstance.html#importBookmarks__anchor). You can use these along with AJAX requests to save and load the user bookmark data from a server, and setup the server to write and read XFDF files.
To save user bookmarks, the sample, uses `POST` and `GET` requests. In the sample you will find fetch request that are similar to the following:
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(function(instance) {
// load the user bookmarks data for id 'doc123'
fetch('/server/bookmarksHandler.js?documentId=doc123', {
method: 'GET'
}).then(function(response) {
if (response.status === 200) {
response.text().then(function(bookmarksString) {
// {"0":"Bookmark 1","2":"Bookmark 2"}
const bookmarks = JSON.parse(bookmarksString);
instance.importBookmarks(bookmarks);
});
}
});
// ...
// later save the annotation data for doc123
const bookmarks = instance.exportBookmarks();
const bookmarksString = JSON.stringify(bookmarks);
fetch('/server/bookmarksHandler.js?documentId=doc123', {
method: 'POST',
body: bookmarksString // written into a json file on server
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
[WebViewerInstance.importBookmarks](https://sdk.apryse.com/api/web/UI.html#importBookmarks__anchor) [WebViewerInstance.exportBookmarks](https://sdk.apryse.com/api/web/UI.html#exportBookmarks__anchor)
To automatically save user bookmark changes you are able to listen to the `userBookmarksChanged` event. This event fires whenever there is any change to user bookmarks.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
instance.iframeWindow.addEventListener('userBookmarksChanged', e => {
const bookmarks = e.detail;
const bookmarksString = JSON.stringify(bookmarks);
// ...save string to server
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
The sample uses `Node.js` as a backend for fulling the `POST` and `GET` requests, but other backends can also be used.
## Quick Bookmarking
WebViewer v8.8.0 introduced a convenient shortcut to quickly add or remove a bookmark. This API `instance.UI.enableBookmarkIconShortcutVisibility()` enables this feature and shows a bookmark icon near the top right of the page. If the page is already bookmarked, users will see an filled blue icon.
Creating a bookmark this way will automatically populate into the panel using the “Untitled” title. Users who have the left panel open on the bookmark tab can also toggle whether or not they want to see the bookmark icon on the page.
To disable this feature, use this API `instance.UI.disableBookmarkIconShortcutVisibility()`.
---
# 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/outlines-bookmarks/user-bookmarks.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.