Annotation Overlay

The Inpera Overlay is a minimal, dependency-free JavaScript overlay that enables point-and-click annotations on any page.

Features

• Floating comment button - Always accessible UI for adding annotations
• Click element to annotate - Click any element to leave feedback
• Drag rectangle to select area - Select regions for more precise feedback
• DOM fingerprinting - Captures selector, XPath, text, and styles
• Visual snapshot capture - Screenshots of annotated elements
• Console log collection - Captures console logs and errors
• Minimal footprint - < 50KB total size

Installation

Script Tag

<script>
  window.InperaConfig = {
    apiUrl: 'https://api.inpera.app',
    projectId: 'your-project-id',
    apiKey: 'optional-api-key'
  };
</script>
<script src="https://cdn.inpera.app/overlay.js"></script>

Data Attribute

<div data-inpera-config='{"apiUrl":"https://api.inpera.app","projectId":"your-project-id"}'></div>
<script src="https://cdn.inpera.app/overlay.js"></script>

Manual Initialization

import { AnnotationOverlay } from '@inpera/overlay';

const overlay = new AnnotationOverlay({
  apiUrl: 'https://api.inpera.app',
  projectId: 'your-project-id',
  apiKey: 'optional-api-key'
});

overlay.init();

Configuration Options

Option	Required	Description
apiUrl	Yes	Inpera API endpoint
projectId	Yes	Your project ID
apiKey	No	API key for authentication

DOM Fingerprinting

When a user clicks an element, the overlay captures:

• CSS Selector - Unique path to the element
• XPath - Alternative element path
• Text content - Element text for rebinding
• Computed styles - Key style properties
• Position - Element coordinates

This fingerprint allows annotations to be re-bound even when the DOM changes.

Annotation Workflow

1. User clicks the floating annotation button
2. Overlay enters annotation mode
3. User clicks or drags to select an element/area
4. Annotation form appears
5. User enters feedback and submits
6. Annotation is saved with DOM fingerprint
7. Annotation appears pinned to the element

API Integration

Annotations are sent to:

POST https://api.inpera.app/annotations/public

With header:

x-project-key: YOUR_PROJECT_KEY