Quickstart | Plannotator AppNotes

The connected setup has two required parts: AppNotes must know the web origin, and that web app must load the connected SDK.

In AppNotes, choose Add Site and enter a name, exact origin, and starting URL. An agent can do the same operation through the API.

Install the connected SDK

Add the AppNotes package to the registered web app and configure the returned Site ID.

Open the Site from AppNotes

AppNotes creates a short-lived launch credential and opens the real web app. The SDK consumes the credential from the URL fragment, removes it before its first request, and keeps it in the browser session.

Place a note

Choose Leave a note, then select an element. Shift-click up to seven additional elements when one note applies to several elements.

AppNotes prepares an image of the selected area while you write. Review the preview, then choose Add note. Choose Remove image if you do not want to include it. An unavailable image does not prevent you from saving the comment.

Local mode is shorter

Local mode does not require registration, an account, or a backend:

import { createAppNotes } from "@plannotator/appnotes";

const appNotes = createAppNotes({ mode: "local" });
await appNotes.mount();

Connected mode

Use the Site ID returned by registration:

import { createAppNotes } from "@plannotator/appnotes";

const appNotes = createAppNotes({
  mode: "connected",
  siteId: "ansite_01K00000000000000000000000",
});

await appNotes.mount();

Downloading the JavaScript never activates AppNotes by itself. The mode must be explicit. Connected mode also stays dormant until it receives a valid launch or browser session.

Next: install the SDK, review shared comments and images, or let an agent register the Site.