Docs
Get it runningPut it to use

Framework Guides

Install SessionSight in your specific framework

Last updated:

All frameworks use the same @sessionsight/insights package. The only difference is where you call init(). For consent control, use SessionSight.setConsent(true/false) from your cookie banner — see Consent.

Auto-fill your keys
Sign in and select a property and API key from the top nav dropdowns. The code examples below will fill in your real values.

React / Next.js

Initialize in your root layout or app component. Use useEffect so it only runs in the browser:

Next.js
// app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
'use client';
import { useEffect } from 'react';
import SessionSight from '@sessionsight/insights';

export default function RootLayout({ children }) {
  useEffect(() => {
    SessionSight.init({
      publicApiKey: 'YOUR_PUBLIC_API_KEY',
      propertyId: 'YOUR_PROPERTY_ID',
    });
    // No teardown needed — the SDK lives for the page's lifetime.
    // Call SessionSight.setConsent(false) from your consent UI to withdraw.
  }, []);

  return <>{children}</>;
}

Works with both App Router and Pages Router. For the App Router, add 'use client' since the SDK needs browser APIs.

SvelteKit

Initialize in your root layout’s onMount:

SvelteKit
<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import SessionSight from '@sessionsight/insights';

  onMount(() => {
    SessionSight.init({
      publicApiKey: 'YOUR_PUBLIC_API_KEY',
      propertyId: 'YOUR_PROPERTY_ID',
    });
    // No teardown needed — the SDK lives for the page's lifetime.
    // Call SessionSight.setConsent(false) from your consent UI to withdraw.
  });
</script>

<slot />

Nuxt 3

Create a client-only plugin:

Nuxt 3
// plugins/sessionsight.client.ts
import SessionSight from '@sessionsight/insights';

export default defineNuxtPlugin(() => {
  SessionSight.init({
    publicApiKey: 'YOUR_PUBLIC_API_KEY',
    propertyId: 'YOUR_PROPERTY_ID',
  });
});

The .client.ts suffix ensures it only runs in the browser.

Vue

Initialize after mounting your app:

Vue
// src/main.ts
import { createApp, onMounted, onUnmounted } from 'vue';
import SessionSight from '@sessionsight/insights';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

SessionSight.init({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  propertyId: 'YOUR_PROPERTY_ID',
});

Angular

Initialize in your root component’s lifecycle:

Angular
// src/app/app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import SessionSight from '@sessionsight/insights';

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent implements OnInit, OnDestroy {
  ngOnInit() {
    SessionSight.init({
      publicApiKey: 'YOUR_PUBLIC_API_KEY',
      propertyId: 'YOUR_PROPERTY_ID',
    });
  }
  ngOnDestroy() {
    // No teardown needed — the SDK lives for the page's lifetime.
    // Call SessionSight.setConsent(false) from your consent UI to withdraw.
  }
}

Plain HTML

Add the script tag before </body>:

HTML
<!-- SessionSight · sessionsight.com -->
<!-- Paste this just before </head> on every page you want to track. -->
<script>
    (function sessionsight(w,i,n,s){
        var q=w._ssq=[],p=P=>new Proxy(function(){},{
            get:(_,k)=>k=='then'||typeof k=='symbol'?void 0:p(P.concat(k)),
            apply:(_,__,a)=>new Promise((rs,rj)=>q.push({p:P,a,rs,rj}))
        });
        w.SessionSight=p([]);
        var e=i.createElement('script');e.async=1;e.src=n;i.head.appendChild(e);
        w.SessionSight.init(s);
    })(window,document,'https://cdn.sessionsight.com/sessionsight.js',{
        publicApiKey:'YOUR_PUBLIC_API_KEY',
        propertyId:'YOUR_PROPERTY_ID'
    });
</script>

No build step needed. Works on any static site, WordPress, Shopify, or CMS.

Verify It’s Working

After adding the SDK:

  1. Open your site in a browser
  2. Navigate around for a few seconds
  3. Go to your SessionSight dashboard and open Live View
  4. You should see your session appear in real-time

If you don’t see it, check the browser console for errors. The most common issues are an incorrect API key or property ID.