Skip to main content

​
Quickstart

Human Behavior works seamlessly to record sessions on your Svelte app.

​
Step 1: Installation

npm install humanbehavior-js
# or
yarn add humanbehavior-js

​
Step 2: Environment Variables

Create an environment file (.env) with your API key: 
VITE_HUMANBEHAVIOR_API_KEY=your-api-key-here
Important: For SvelteKit, environment variables must start with VITE_ to be accessible in the browser.

​
Step 3: Basic Setup

​
For SvelteKit (SSR-enabled)

Update your +layout.svelte file: 
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
import '../app.css';
import Navigation from '$lib/Navigation.svelte';
import { HumanBehaviorTracker } from 'humanbehavior-js';
import { browser } from '$app/environment';

let { children } = $props();

// Initialize HumanBehavior when in browser
if (browser) {
  const apiKey = import.meta.env.VITE_HUMANBEHAVIOR_API_KEY;
  if (apiKey) {
    HumanBehaviorTracker.init(apiKey, undefined, { 
      logLevel: 'debug' 
    });
  }
}
</script>

<svelte:head>
  <link rel="icon" href={favicon} />
</svelte:head>

<div class="min-h-screen bg-gray-50">
  <Navigation />
  {@render children?.()}
</div>
Important: The browser check prevents the tracker from initializing during server-side rendering, which would cause errors since browser APIs aren’t available on the server.

​
For Regular Svelte (non-SSR)

In your main.js or main.ts file: 
import App from './App.svelte';
import { HumanBehaviorTracker } from 'humanbehavior-js';

// Direct initialization (no browser check needed)
const tracker = HumanBehaviorTracker.init('your-api-key-here', undefined, { 
  logLevel: 'debug' 
});

const app = new App({
  target: document.body
});

export default app;

​
Step 4: Using in Components

Now you can use HumanBehavior directly in any Svelte component: 
<script>
  import { HumanBehaviorTracker } from 'humanbehavior-js';
  
  function handleClick() {
    HumanBehaviorTracker.capture('button_clicked', { button: 'cta' });
  }
  
  function handleFormSubmit() {
    HumanBehaviorTracker.identifyUser({ 
      userProperties: { email: 'user@example.com', plan: 'premium' } 
    });
  }
</script>

<button on:click={handleClick}>Click Me</button>
<form on:submit={handleFormSubmit}>
  <!-- form content -->
</form>
That’s it! The SDK now automatically tracks user interactions, navigation, and console events. Everything past here is optional.

​
Features

  • ✅ Direct SDK integration
  • ✅ SvelteKit SSR compatibility
  • ✅ TypeScript support included
  • ✅ Automatic session recording
  • ✅ Custom event tracking
  • ✅ User identification

​
Troubleshooting

  • Check browser console for any error messages
  • Verify your API key is correct and starts with VITE_
  • Ensure the tracker is initialized before any user interaction
  • For SvelteKit: Make sure you’re using the browser check to avoid SSR issues
  • Make sure .env is in your project root directory