How It Works

Inpera consists of three main components working together to enable visual feedback collection.

Architecture Overview

Your Website
    │
    ├── Embed Script (cdn.inpera.app/embed.min.js)
    │   ├── DOM scanning
    │   ├── Event tracking
    │   └── Batched data → api.inpera.app/v1/collect
    │
    └── Overlay (cdn.inpera.app/overlay.js)
        ├── Annotation UI
        ├── DOM fingerprinting
        └── Annotation data → api.inpera.app/annotations
                                    │
                                    ▼
                            Inpera Dashboard (app.inpera.app)
                                    │
                                    ├── View annotations
                                    ├── Manage projects
                                    └── Integrations → Jira, Slack, etc.

Component 1: Embed Script

The embed script (cdn.inpera.app/embed.min.js) runs silently on your website and collects:

• DOM structure: Elements, IDs, classes, attributes
• Computed styles: Colors, fonts, dimensions
• User interactions: Clicks, hovers (privacy-safe)
• Assets: Images, scripts, stylesheets, fonts

Data is batched and sent every 2 seconds to minimize network overhead.

Installation

<script>
  !function(p){var s=document.createElement("script"); 
  s.src="https://cdn.inpera.app/embed.min.js"; 
  s.defer=true; 
  s.setAttribute("data-project-key", p);
  document.head.appendChild(s);
  }("YOUR_PROJECT_KEY");
</script>

Component 2: Overlay

The overlay (cdn.inpera.app/overlay.js) provides the annotation interface:

• Floating button: Always visible for adding feedback
• Click-to-annotate: Click any element to leave feedback
• Area selection: Drag to select regions
• DOM fingerprinting: Captures selector, XPath, text for rebinding

Installation

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

Component 3: Dashboard

The Inpera dashboard (app.inpera.app) is where you:

• View and manage annotations
• Configure projects and environments
• Set up integrations (Jira, Slack, GitHub, etc.)
• Invite team members
• Monitor usage

Data Flow

Annotation Flow

1. User clicks element on your website
2. Overlay captures DOM fingerprint (selector, XPath, text)
3. User enters feedback
4. Annotation sent to API with fingerprint
5. Appears in dashboard
6. (If configured) Creates issue in Jira/Linear/etc.

Rebinding

When the DOM changes:

1. Original element is searched by selector
2. If not found, try XPath
3. If not found, search by text content
4. If not found, search by computed styles
5. Annotation can be manually rebound if needed

API Endpoints

Endpoint	Purpose
api.inpera.app/v1/collect	Embed script data
api.inpera.app/annotations	Annotation CRUD
api.inpera.app/projects	Project management
api.inpera.app/auth	Authentication

Domain Summary

Domain	Purpose
cdn.inpera.app	Static assets (scripts)
api.inpera.app	REST API
app.inpera.app	Web dashboard
inpera.app	Landing page
changelog.inpera.app	Product updates