Quickstart

You can install the Observerbee SDK via npm for modern JavaScript applications (React, Vue, Nuxt, Next.js) or via a CDN script tag for traditional websites.

Prerequisites

Before installing the SDK, you need an API key.

Log in to the Observerbee Dashboard.
Navigate to Settings > API Keys.
Create a project if you haven’t already, and copy your key. ob_live_ keys record into your live environment, ob_test_ keys into your test environment. See Environments.
Add your website’s domain to the project’s allowed domains. The API key and the page origin are validated together server-side, so recording only works from domains you have allowed.

Option 1: npm / yarn / pnpm (recommended)

Because Observerbee is currently in closed beta, the SDK is hosted on GitHub Packages. Point the @web-analytics-ai scope at the GitHub Packages registry before installing.

Add a .npmrc file to your project root

.npmrc

@web-analytics-ai:registry=https://npm.pkg.github.com/

GitHub Packages requires authentication to install. If your environment is not already logged in to npm.pkg.github.com, ask us for access during onboarding.

Install the package

npm install @web-analytics-ai/obweb

Initialize the SDK

Initialize as early as possible in your application lifecycle (for example in app.tsx, main.ts, or your root layout):

import { SessionRecorder } from '@web-analytics-ai/obweb';

// Initialize the recorder
const recorder = await SessionRecorder.init({
  apiKey: 'ob_live_your_api_key_here',
  maskAllInputs: true, // Recommended for strict privacy
  onReady: () => console.log('Observerbee is watching'),
});

// Identify logged in users
recorder.identify('user_123', { plan: 'pro' });

Option 2: CDN script tag

If you aren’t using a bundler, you can place the script tag directly in the <head> of your HTML document.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.observerbee.com/obweb/latest/obweb.min.js"></script>
    <script>
      Obweb.init({
        apiKey: 'ob_live_your_api_key_here',
        maskAllInputs: true
      }).then(() => {
        console.log('Observerbee recording started');
      });
    </script>
  </head>
  <body>
    <!-- Your application -->
  </body>
</html>

Verifying the installation

Once the SDK is initialized:

Navigate around your application locally or in staging.
Open your browser’s Network tab. You should see event batches being sent to the Observerbee ingestion endpoint at /api/v1/events/bulk.
Open your Observerbee Dashboard. Within a few seconds, your active session should appear in the Sessions list.

Single-page apps need no extra setup. Route changes are detected automatically and each route gets a fresh snapshot. See Reliability for how events are buffered and delivered.

Getting Started

SDK Reference

Core Concepts

Integrations

Prerequisites

Option 1: npm / yarn / pnpm (recommended)

Option 2: CDN script tag

Verifying the installation

Next steps

Configure privacy

Identify users

​Prerequisites

​Option 1: npm / yarn / pnpm (recommended)

​Option 2: CDN script tag

​Verifying the installation

​Next steps

Configure privacy

Identify users

Prerequisites

Option 1: npm / yarn / pnpm (recommended)

Option 2: CDN script tag

Verifying the installation

Next steps