App
Docs/Embed/Embed Script Overview
Embed

Embed Script Overview

Learn about the Inpera embed script for data collection.

2 min read

Embed Script Overview

The Inpera embed script is a production-grade, dependency-free JavaScript snippet that collects DOM metadata, tracks user interactions, and sends serialized page snapshots to Inpera.

Features

  • Automatic DOM Scanning: Captures full DOM structure, metadata, and computed styles
  • Event Tracking: Monitors clicks, hovers, and input interactions (with privacy-safe masking)
  • Dynamic Content Detection: Uses MutationObserver to track DOM changes incrementally
  • Batched Data Transmission: Efficiently batches and sends data every 2 seconds
  • Retry Logic: Automatic retry with exponential backoff (max 5 attempts)
  • Fail-Safe Mode: Silently degrades if API is unavailable
  • Zero Dependencies: Standalone IIFE with no external dependencies
  • Performance Optimized: Uses requestIdleCallback for heavy operations

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_HERE");
</script>

Data Collected

DOM Snapshot

The script captures and sends:

  • Element structure (tag, id, classes, attributes)
  • Text content (trimmed to 100 characters)
  • Computed styles for key elements (h1-h6, p, div, button, img, input)
  • Element positions and dimensions
  • Asset URLs (images, videos, scripts, stylesheets)
  • Loaded font families
  • Viewport dimensions

Events

Clicks:

{
  "elementMetadata": {...},
  "position": { "x": 150, "y": 320 },
  "timestamp": 1703433600
}

Hovers (throttled to 100ms):

{
  "elementMetadata": {...},
  "position": { "x": 200, "y": 400 },
  "timestamp": 1703433600
}

Inputs (privacy-safe):

{
  "elementMetadata": {...},
  "inputType": "text",
  "valueLength": 25,
  "timestamp": 1703433600
}

API Endpoint

Data is sent to:

POST https://api.inpera.app/v1/collect

Headers:

Content-Type: application/json
x-project-key: YOUR_PROJECT_KEY

Payload:

{
  "projectKey": "string",
  "timestamp": 1234567890,
  "url": "string",
  "userAgent": "string",
  "sessionId": "string",
  "snapshot": {
    "timestamp": 1234567890,
    "url": "string",
    "title": "string",
    "elements": [...],
    "assets": [...],
    "fonts": [...],
    "viewport": { "width": 1920, "height": 1080 }
  },
  "events": [...]
}

Privacy & Security

  • No sensitive data: Input values are masked (only length and type are sent)
  • No storage access: Script never accesses cookies, localStorage, or sessionStorage
  • No console logging: Production build has no console output
  • Fail-safe: Script never breaks website execution, fails silently
  • Closure isolation: All code runs in IIFE, no global pollution

Performance

Metric Value
Size < 35KB gzipped
CPU Usage < 2% average
Memory Minimal footprint with WeakSet
Network Batched every 2 seconds
DOM Operations Uses requestIdleCallback