Web SDK

The Kixo Web SDK works in any browser environment. Install it via a script tag or npm package.

Installation

Script tag

Add the following snippet before the closing </head> or </body> tag:

html
<script src="https://cdn.kixo.io/v1/kixo.min.js"></script>
<script>
  Kixo.init({ projectId: 'YOUR_PROJECT_ID', apiKey: 'YOUR_API_KEY' });
</script>

npm

bash
npm install @kixo/web
js
import Kixo from '@kixo/web';

Kixo.init({
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY',
});

No-Code Platforms

If you are building with an AI-powered builder like Lovable, Bolt, v0, or Replit, you can paste the script tag snippet directly into your builder's chat or code injection settings. Most builders support adding scripts to the <head> or <body> of your site.

Tip

Just paste the script tag snippet in your AI builder's chat and ask it to add it to your project. It will handle the rest.

Configuration options

js
Kixo.init({
  projectId: 'YOUR_PROJECT_ID',     // Required
  apiKey: 'YOUR_API_KEY',           // Required
  autocapture: true,                // Auto-track clicks, page views (default: true)
  sessionTracking: true,            // Track sessions (default: true)
  heatmaps: false,                  // Enable heatmap data collection (default: false)
  debug: false,                     // Log events to console (default: false)
});

Auto-tracked events

With the default configuration, Kixo automatically captures these events with no additional code:

  • page_view -- every page navigation
  • session_start / session_end
  • click -- all click interactions
  • scroll_depth -- 25%, 50%, 75%, 100% thresholds
  • rage_click -- rapid repeated clicks on the same element
  • dead_click -- clicks on non-interactive elements
  • error -- uncaught JavaScript errors
  • performance -- page load timing metrics

See the full list in the Events Reference.

Custom events

Kixo.track()

Send a custom event with optional properties.

js
Kixo.track('purchase', {
  product: 'Pro Plan',
  amount: 49.99,
  currency: 'USD',
});

Kixo.page()

Manually track a page view. Useful in single-page apps if you want explicit control.

js
Kixo.page('Pricing', {
  referrer: document.referrer,
});

Kixo.identify()

Associate the current device with a known user.

js
Kixo.identify('user_123', {
  name: 'Jane Doe',
  email: '[email protected]',
  plan: 'pro',
});

Kixo.group()

Associate the user with a company or organization.

js
Kixo.group('company_456', {
  name: 'Acme Inc',
  plan: 'enterprise',
});

Kixo.reset()

Clear the current user identity. Call this on logout to ensure subsequent events are not attributed to the previous user.

js
Kixo.reset();

Heatmaps

Enable heatmap data collection by setting heatmaps: true in your init configuration. Kixo records click coordinates and scroll positions, then renders them as visual overlays in the dashboard.

js
Kixo.init({
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY',
  heatmaps: true,
});

Note

Heatmaps are opt-in to minimize payload size. Enable them only on pages where you need click and scroll insights.

Feature flags

Check feature flag values at runtime using Kixo.getFeatureFlag().

js
const variant = Kixo.getFeatureFlag('new_checkout');

if (variant === 'enabled') {
  showNewCheckout();
} else {
  showLegacyCheckout();
}