Installing and Configuring Inspectlet

Take the Tour Plans and Pricing Sign up Free Sign in

Installing and Configuring Inspectlet

Installing Inspectlet

Inspectlet's tracker is asynchronous — it never blocks your site or slows down rendering (details here). Pick the install method that matches your stack:

npm install @inspectlet/browser @inspectlet/react

// app/providers.tsx (Next.js App Router) or your root component
'use client';

import { InspectletProvider } from '@inspectlet/react';

export function Providers({ children }) {
  return (
    <InspectletProvider config={{ wid: '12345678' }}>
      {children}
    </InspectletProvider>
  );
}

For automatic SPA pageview tracking, also import the router adapter for your framework:

// Next.js App Router
import { useNextPageviews } from '@inspectlet/react/next';

// React Router v6+
import { useReactRouterPageviews } from '@inspectlet/react/router';

npm install @inspectlet/browser

import { init, inspectlet } from '@inspectlet/browser';

init({ wid: '12345678' });

inspectlet.identify('user_123');
inspectlet.tagSession({ plan: 'pro' });

<!-- Begin Inspectlet Tracking Code -->
<script type="text/javascript">
(function() {
window.__insp = window.__insp || [];
__insp.push(['wid', 12345678]);
var ldinsp = function(){
if(typeof window.__inspld != "undefined") return; window.__inspld = 1; var insp = document.createElement('script'); insp.type = 'text/javascript'; insp.async = true; insp.id = "inspsync"; insp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.inspectlet.com/inspectlet.js?wid=12345678&r=' + Math.floor(new Date().getTime()/3600000); var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(insp, x); };
setTimeout(ldinsp, 0);
})();
</script>
<!-- End Inspectlet Tracking Code -->

After adding a site in your Dashboard, click the blue wrench icon in the Actions column ("Edit this site's settings"), then "Get Install Code" on the top right to grab a snippet pre-filled with your real WID.

Where Does the Install Code Go?

HTML snippet: place it anywhere in your site's HTML — we recommend just before </head> or near the top of <body>. Inspectlet loads asynchronously and won't slow down your site.

npm (React / Next.js / Vue / Vite): mount <InspectletProvider> near the root of your component tree (e.g. app/layout.tsx in Next.js or your root App component). The tracker still loads from cdn.inspectlet.com, so improvements reach your users without redeploying.

If you're having trouble installing Inspectlet on your site, send us an email and we'd be happy to help!

Using the npm packages

Inspectlet ships two official packages on npm:

@inspectlet/browser — tiny typed wrapper around the tracker. Works in any browser app.
@inspectlet/react — provider, hooks, and automatic pageview tracking for Next.js and React Router.

Both packages are MIT-licensed, fully typed, SSR-safe, and tree-shakeable. Source is on GitHub.

Identifying users

import { useInspectletIdentify } from '@inspectlet/react';

function App() {
  const { user } = useAuth();
  useInspectletIdentify(user?.email, { plan: user?.plan });
  return <Routes />;
}

Tagging sessions

import { useInspectlet } from '@inspectlet/react';

function CheckoutButton() {
  const insp = useInspectlet();
  return <button onClick={() => insp.tagSession({ event: 'checkout-clicked' })}>Buy</button>;
}

SPA pageview tracking

For Next.js (App Router) or React Router v6+, import the matching subpath and pass disableVirtualPage: true to the provider so we don't double-count:

import { useNextPageviews } from '@inspectlet/react/next';
// or:
import { useReactRouterPageviews } from '@inspectlet/react/router';

See the package READMEs for full examples and a working Next.js demo.

Optional Variables

The embed code allows you to specify variables that change Inspectlet's behavior. Your variables go after the first call to __insp.push.

The following variables are available:

debug (true/false) - Put Inspectlet in Debug mode so it prints messages to the Console that can be helpful during development or working with Custom Metrics.

Example usage:

__insp.push(['debug', true]);

Place this snippet after the main Inspectlet embed code.

Handling Sensitive Data

In order to make sure that Inspectlet does not capture private or sensitive data in its screen captures, add the inspectletIgnore class to inputs. Please note that this class is not needed for password fields. Inspectlet ignores those automatically. Any fields that Inspectlet ignores are never read, therefore the data is not transmitted to our servers. For example, the following credit card input field is tagged as sensitive and will not be recorded:

<input type="text" class="inspectletIgnore" name="ccnumber" />