Docusaurus

Docusaurus is a static documentation site generator. vTilt drops in via a client module (npm) or an injected script tag (inline).

#1. Add your environment variables

# .env
VTILT_TOKEN=YOUR_PROJECT_TOKEN
VTILT_HOST=https://www.vtilt.com

#2. Install & initialise

Choose how you load the Browser SDK. npm boots the SDK from a client module; the inline script injects a stub via injectHtmlTags with no package to install. Both expose the same window.vt global — the rest of this guide is identical either way.

npm install @v-tilt/browser

// docusaurus.config.js
module.exports = {
  customFields: {
    vtiltToken: process.env.VTILT_TOKEN,
    vtiltHost: process.env.VTILT_HOST,
  },
  clientModules: [require.resolve('./src/vtilt.ts')],
}

// src/vtilt.ts
import { vt } from '@v-tilt/browser'
import siteConfig from '@generated/docusaurus.config'

if (typeof window !== 'undefined') {
  const { vtiltToken, vtiltHost } = siteConfig.customFields as Record<
    string,
    string
  >

  vt.init(vtiltToken, {
    api_host: vtiltHost,
    autocapture: true,
    capture_pageview: true,
    capture_pageleave: true,
  })
}

#3. Identify visitors (optional)

Most docs sites stay anonymous, but if your site has authentication (e.g. customer-only docs gated through a login proxy), identify users on every page load by reading whatever cookie or local-storage value your auth integration sets.

// src/vtilt.ts (continued)
import { vt } from '@v-tilt/browser'

function readUser() {
  try {
    return JSON.parse(localStorage.getItem('docs_user') || 'null')
  } catch {
    return null
  }
}

export function onRouteDidUpdate() {
  const user = readUser()
  if (user) vt.identify(user.id, { email: user.email })
}

onRouteDidUpdate is the Docusaurus client lifecycle hook that runs after every route change. Using the inline script? Replace vt with window.vt and drop the import.

#4. Capture custom events

// src/components/CtaButton.tsx
import { vt } from '@v-tilt/browser'

export default function CtaButton() {
  return (
    <button
      onClick={() => vt.capture('docs_cta_clicked', { location: 'sidebar' })}
    >
      Try the API
    </button>
  )
}

#Next steps

• Autocapture — what's captured automatically.
• Identify & alias — full identification model.
• Reverse proxy — block-resistant ingestion.
• Common mistakes — integration pitfalls to avoid before you ship.