Widget Overview
Learn about the Annot8 feedback widget
Widget Overview
The Annot8 widget is a lightweight JavaScript component that enables visual feedback collection on any website.
Features
- Pin Comments - Click anywhere to leave contextual feedback
- Screenshot Capture - Automatically captures the page state
- Real-time Sync - Comments appear instantly for all team members
- Device Info - Captures browser, viewport, and device details
- Keyboard Shortcuts - Quick access with keyboard commands
How It Works
┌─────────────────────────────────────────────────────┐
│ Your Website │
│ ┌───────────────────────────────────────────────┐ │
│ │ │ │
│ │ Content 📌 Comment Pin │ │
│ │ │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ 💬 Comment │ │
│ │ 🔔 Inbox │ │
│ └──────────────┘ │
└─────────────────────────────────────────────────────┘Widget Components
Floating Toolbar
The main interface for the widget, positioned in the corner of the screen.
- Comment Button - Enter comment mode
- Inbox Button - View all feedback on current page
- User Avatar - Shows logged-in user
Comment Pins
Visual markers showing where feedback was left.
- Click pins to expand comments
- Color-coded by status (open/resolved)
- Shows comment count
Comment Popover
The interface for writing and viewing comments.
- Rich text input
- File attachments
- Priority selector
- Status controls
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
C | Toggle comment mode |
Escape | Exit comment mode |
I | Open inbox |
Browser Support
| Browser | Version |
|---|---|
| Chrome | 90+ |
| Firefox | 88+ |
| Safari | 14+ |
| Edge | 90+ |
Performance
The widget is optimized for minimal impact:
- ~25KB gzipped bundle size
- Lazy loaded - doesn't block page render
- Shadow DOM - isolated styles, no conflicts
- Efficient updates - only re-renders when needed