Installation

Choose the installation method that fits your stack. All methods initialize the SDK with autocapture for pageviews, clicks, and forms.

HTML Snippet

The simplest approach — paste this into your HTML <head>. The stub is under 1KB and loads the full SDK asynchronously from the CDN.

<script>
!function(){"use strict";!function(s,n){const t=n.sessionvision;if(t&&t.__SV)return;const e={_i:[],_q:[],init:function(n,t){e._i.push([n,t]);const i=["capture","identify","reset","getDistinctId","register","registerOnce"];for(const s of i)e[s]=function(...n){e._q.push([s,...n])};const o=s.createElement("script");o.async=!0;const c=t?.version||"latest";o.src=(t?.apiHost||"https://cdn.sessionvision.com")+"/"+(/^\d/.test(c)?"v"+c:c)+"/sessionvision.min.js";const r=s.getElementsByTagName("script")[0];r&&r.parentNode?r.parentNode.insertBefore(o,r):s.head.appendChild(o)}};n.sessionvision=e}(document,window)}();
sessionvision.init('YOUR_TOKEN_HERE');
</script>

JavaScript Web

npm install @sessionvision/core

Then initialize in your app entry point:

import sessionvision from '@sessionvision/core'

sessionvision.init('YOUR_TOKEN_HERE', {
  debug: import.meta.env.DEV,
})

React

The React integration provides a context provider and hooks. Wrap your app in SessionVisionProvider to initialize the SDK once:

npm install @sessionvision/core

Set up the provider in your entry point:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { SessionVisionProvider } from '@sessionvision/core/react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <SessionVisionProvider
      apiKey="YOUR_TOKEN_HERE"
      options={{ debug: import.meta.env.DEV }}
    >
      <App />
    </SessionVisionProvider>
  </StrictMode>,
);

Use hooks in any component to track events:

import { useCapture } from '@sessionvision/core/react';

function PricingCard({ plan }: { plan: string }) {
  const capture = useCapture();

  return (
    <button onClick={() => capture('plan_selected', { plan })}>
      Select {plan}
    </button>
  );
}

Vue

Add the Vue plugin to your root app to initialize sessionvision once. Composables such as useCapture are then available throughout your SFCs.

npm install @sessionvision/core

import { createApp } from 'vue';
import { createSessionVision } from '@sessionvision/core/vue';
import App from './App.vue';

const app = createApp(App);

app.use(createSessionVision('YOUR_TOKEN_HERE', {
  debug: import.meta.env.DEV,
}));

app.mount('#app');

Track events in any component:

<script setup lang="ts">
import { useCapture } from '@sessionvision/core/vue';

const capture = useCapture();
</script>

<template>
  <button @click="capture('plan_selected', { plan })">
    Select plan
  </button>
</template>

Track Custom Events

sessionvision automatically captures pageviews, clicks, and form submissions. You can also track custom events:

sessionvision.capture('my_custom_event', { property: 'value' })

Identify users

When a user logs in, associate their activity with their user ID and traits. User traits let you segment users by properties like plan, role, or signup date.

// Call identify after user logs in
sessionvision.identify('user_123', {
  email: '[email protected]',
  name: 'Jane Doe',
  plan: 'pro',
  created_at: '2024-01-15',
})

Configuration Options

Option	Default	Description
`apiHost`	`https://cdn.sessionvision.com`	`CDN endpoint for SDK loading`
`ingestHost`	`https://app.sessionvision.com`	`API endpoint for event ingestion`
`version`	`latest`	`SDK version to load from CDN`
`debug`	`false`	`Log all events to the browser console`
`optOut`	`false`	`Disable all tracking (for consent management)`
`maskAllInputs`	`true`	`Mask all input values in session recordings`
`autocapture`	`true`	`Enable/disable automatic event capture`

Autocapture Granular Control

Pass an object instead of a boolean to control individual autocapture features:

sessionvision.init('YOUR_TOKEN_HERE', {
  autocapture: {
    pageview: true,
    clicks: true,
    formSubmit: false, // disable form tracking
  },
})