Annotator Tool

What it does

Drop two script tags into any site's <head> and instantly add a password-protected annotation layer — floating feedback icon, pin-based comments, threaded replies, and admin resolve/archive controls — all synced in real-time via Supabase.

Quick Setup

1. Add the snippet to your client site's `<head>`

<script>
  window.AnnotatorConfig = {
    sitePassword:   "your-client-password",
    adminPassword:  "your-admin-password",
    projectId:      "my-project",
    supabaseUrl:    "https://xxxx.supabase.co",
    supabaseAnonKey:"your-anon-key"
  };
</script>
<script src="https://design-annotator.netlify.app/annotator.js" defer></script>

2. That's it

Visitors see a password screen. After entering the site password, a floating feedback icon appears in the bottom-right corner. Click it to enter Annotation Mode, click any element to pin a comment.

Config reference

Key	Type	Description
`sitePassword`	string	Password shown to clients
`adminPassword`	string	Extra password for admin features (resolve/archive)
`projectId`	string	Namespace for all comments — one Supabase project can serve multiple sites
`supabaseUrl`	string	Your Supabase project URL
`supabaseAnonKey`	string	Your Supabase anon / publishable key

localStorage keys

Key	Value
`annotator_auth_{projectId}`	"true" when site password has been entered
`annotator_admin_{projectId}`	"true" when admin session is active
`annotator_name`	Commenter's display name (persists across projects)

Supabase setup

The SQL to create the comments and replies tables, enable RLS, and set up real-time is in supabase/schema.sql. Run it once in the Supabase SQL editor for each new Supabase project.

Note: The schema is already applied to the test-site Supabase project. You only need to run the SQL for a brand-new Supabase project.

Features (v0.2)

✓ Password screen with admin login
✓ Floating feedback icon
✓ Annotation mode layout (header, shelf, scaled site)
✓ Supabase connection, data persistence & real-time sync
✓ Single-click comment creation with live pin
✓ Comment modal (click a pin to view)
✓ Shelf comment feed with status filters (live / resolved / archived)
✓ Threaded replies
✓ Admin resolve / archive controls
✓ Pin clustering
✓ Cross-page comment navigation from the shelf