Web surveys installation

Be careful to avoid things which can cause the SDK version to be cached and fail to update. See: Ways SDK versions fall behind

If you're using TypeScript and want type safety for window.posthog, install the @posthog/types package:

npm install @posthog/types

Then create a type declaration file:

// posthog.d.ts
import type { PostHog } from '@posthog/types'

declare global {
    interface Window {
        posthog?: PostHog
    }
}

export {}

See the TypeScript types documentation for more details.

We ship weirdly fast, especially for our JavaScript web SDK. If you choose the npm package instead of the HTML snippet, be sure to update it frequently:

To actually update the package, you need to update the version constraint in your package.json file and then reinstall, or run update instead of install:

npm update posthog-js

pnpm update posthog-js

yarn upgrade posthog-js

By default, the JavaScript Web library only loads the core functionality. It lazy-loads extensions such as surveys or the session replay 'recorder' when needed.

This can cause issues if:

• You have a Content Security Policy (CSP) that blocks inline scripts.
• You want to optimize your bundle at build time to ensure all dependencies are ready immediately.
• Your app is running in environments like the Chrome Extension store or Electron that reject or block remote code loading.

To solve these issues, we have multiple import options available below.

Note: With any of the no-external options, the toolbar will be unavailable as this is only possible as a runtime dependency loaded directly from us.posthog.com.

// No external code loading possible (this disables all extensions such as Replay, Surveys, Exceptions etc.)
import posthog from 'posthog-js/dist/module.no-external'

// No external code loading possible but all external dependencies pre-bundled
import posthog from 'posthog-js/dist/module.full.no-external'

// All external dependencies pre-bundled and with the ability to load external scripts (primarily useful is you use Site Apps)
import posthog from 'posthog-js/dist/module.full'

// Finally you can also import specific extra dependencies
import "posthog-js/dist/posthog-recorder"
import "posthog-js/dist/surveys"
import "posthog-js/dist/exception-autocapture"
import "posthog-js/dist/tracing-headers"
import "posthog-js/dist/web-vitals"
import posthog from 'posthog-js/dist/module.no-external'

// All other posthog commands are the same as usual
posthog.init('<ph_project_token>', { api_host: 'https://us.i.posthog.com', defaults: '2026-01-30' })

Note: You should ensure if using this option that you always import posthog-js from the same module, otherwise multiple bundles could get included. At this time @posthog/react does not work with any module import other than the default.

If you only need a subset of PostHog features, you can use the slim bundle to reduce your bundle size. It gives you the core functionality (event capture, identify, group analytics) and lets you explicitly opt in to additional features via extension bundles. This is currently experimental, but offers the biggest reduction in bundle size.

import posthog from 'posthog-js/dist/module.slim'
import {
    SessionReplayExtensions,
    AnalyticsExtensions,
} from 'posthog-js/lib/src/extensions/extension-bundles'

posthog.init('<ph_project_token>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2026-01-30',
    __extensionClasses: {
        ...SessionReplayExtensions,
        ...AnalyticsExtensions,
    }
})

Note: Always import posthog-js from the same module path (posthog-js/dist/module.slim) throughout your app, otherwise multiple bundles could get included.

Available extension bundles

Note: Each extension bundle includes its own dependencies. You don't need to worry about adding them separately.

If you don't want to send test data while you're developing, you can do the following:

if (!window.location.host.includes('127.0.0.1') && !window.location.host.includes('localhost')) {
    posthog.init('<ph_project_token>', { api_host: 'https://us.i.posthog.com', defaults: '2026-01-30' })
}

The defaults is a date, such as 2026-01-30, for a configuration snapshot used as defaults to initialize PostHog. This default is overridden when you explicitly set a value for any of the options.