Loading Telesense
T
Telesense
Dashboard Playground Documentation GitHub
Telesense Active

Behavioral Telemetry
Beautifully Captured.

A lightweight, zero-dependency behavioral telemetry SDK
Capture clicks, scrolls, keypresses, and heatmap data with a drop-in script tag or clean JS API in less than 20 kB.

Launch Live Demo View Setup Guide
$
npm install telesense
✓ 20 kB Minified Size
✓ Zero Dependencies
✓ UMD + ESM Native Bundles
✓ Supabase Ready
✓ TypeScript Types Shipped

Telemetry Dashboard

Interact with this page to watch telemetry capture events in real-time.

Events Captured
0
Total raw telemetry records
Clicks & Taps
0
Mouse clicks & touchscreen taps
Max Scroll Depth
0%
Percentage of page scrolled
Local Queue Size
0
Events stored locally before flush

Live Event Feed

Real-time log of captured user actions
LATENCY: <10ms

Move your mouse, click anywhere, scroll the page, or type in the forms to populate this feed.

Interaction Heatmap Sandbox

Hover, drag, and click inside to generate heat spots

Hover & Draw Here

Mouse moves draw blue glows, touches draw pink glows

Mouse moves
Touchmove

Developer Playground

Experiment with PII data masking and trigger the JavaScript APIs directly.

PII Masking & Triggers

Telesense auto-masks sensitive credentials

JavaScript API Console

Invoke package methods directly on the running instance
TRACKING LISTENERS Toggle active DOM telemetry capture listeners
CONSOLE OUTPUT
// Call any API button above to view return logs

The Lightweight Difference

How Telesense stacks up against legacy analytics and session recorders.

Feature Telesense Hotjar Mixpanel Heap
Bundle Footprint < 20 kB (minified) ~60 kB ~80 kB ~120 kB
Self-Host Option ✓ Yes ✗ No ✗ No ✗ No
Zero Dependencies ✓ Yes ✗ No ✗ No ✗ No
Custom Transport Hooks ✓ Yes ✗ No ✗ No ✗ No
TypeScript Ready ✓ Yes ✗ No Partial Partial
Open Source License ✓ MIT ✗ Closed ✗ Closed ✗ Closed

Integration Guide

Learn how to drop in Telesense and customise your data streams.

index.html
<!-- 1. Configure the script options before loading -->
<script>
  window.TELE_CONFIG = {
    endpoint: '/telemetry',   // Send queue logs to your custom server endpoint
    flushInterval: 5000        // Flush queue automatically every 5 seconds
  };
</script>

<!-- 2. Load the lightweight bundle -->
<script src="https://cdn.jsdelivr.net/npm/telesense/dist/tele.umd.min.js"></script>

<!-- 3. SDK automatically hooks up DOM listeners and is ready to use -->
<script>
  tele.on('click', event => {
    console.log('User clicked:', event.x, event.y);
  });
</script>
app.ts
// Install via: npm install telesense
import tele from 'telesense';

// Configure settings at runtime
tele.config({
  endpoint: 'https://api.yourdomain.com/telemetry',
  capture: {
    mousemove: false // Example: skip tracking mouse moves to save network data
  }
});

// Listen to any event type
tele.on('*', evt => {
  console.log(`Logged: ${evt.type}`);
});

// Record custom events with payload
tele.track('purchase_completed', {
  amount: 29.99,
  currency: 'USD'
});
custom-transport.js
import tele from 'telesense';

// Intercept the flush batching mechanism and route to custom handlers
tele.config({
  onFlush: async (events) => {
    // Send batches to your custom logging microservice or analytics provider
    // IMPORTANT: Always validate data in server-side!
    await fetch('/my-analytics-gateway', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        sentAt: Date.now(),
        payload: events
      })
    });
  }
});
Supabase Setup (SQL / JS)
-- 1. Create a table in your Supabase SQL editor
create table telemetry_events (
  id         bigint      generated always as identity primary key,
  session_id text        not null,
  event_json jsonb       not null,
  created_at timestamptz default now()
);
alter table telemetry_events enable row level security;
create policy "anon_insert" on telemetry_events for insert to anon with check (true);
create policy "anon_select" on telemetry_events for select to anon using (true);

// 2. Configure Telesense directly in your frontend app
tele.config({
  supabaseUrl:     'https://yourproject.supabase.co',
  supabaseAnonKey: 'your-anon-public-key'
});