Web feature flags installation

Choose an installation method

Required

You can either add the JavaScript snippet directly to your HTML or install the JavaScript SDK via your package manager.

Add this snippet to your website within the <head> tag. This can also be used in services like Google Tag Manager:

HTML
<script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group identify setPersonProperties setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags resetGroups onFeatureFlags addFeatureFlagsHandler onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('<ph_project_token>', {
        api_host: 'https://us.i.posthog.com',
        defaults: '2026-01-30'
    })
</script>

Install the PostHog JavaScript library using your package manager. Then, import and initialize the PostHog library with your project token and host:

npm install posthog-js
yarn add posthog-js
pnpm add posthog-js

JavaScript
import posthog from 'posthog-js'

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

2
Send events
Recommended
Once installed, PostHog will automatically start capturing events. You can also manually send events to test your integration:
Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.
If you'd like, you can also manually capture custom events:
JavaScript
posthog.capture('my_custom_event', { property: 'value' })

Use boolean feature flags

Required

Check if a feature flag is enabled:

if (posthog.isFeatureEnabled('flag-key')) {
    // Do something differently for this user
    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')
}

Use multivariate feature flags

Optional

For multivariate flags, check which variant the user has been assigned:

if (posthog.getFeatureFlag('flag-key') == 'variant-key') { // replace 'variant-key' with the key of your variant
    // Do something differently for this user
    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')
}

Use feature flag payloads

Optional

Feature flags can include payloads with additional data. Fetch the payload like this:

const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')

6
Ensure flags are loaded
Optional
Every time a user loads a page, we send a request in the background to fetch the feature flags that apply to that user. We store those flags in your chosen persistence option (local storage by default).

This means that for most pages, the feature flags are available immediately — except for the first time a user visits.

To handle this, you can use the onFeatureFlags callback to wait for the feature flag request to finish:
posthog.onFeatureFlags(function (flags, flagVariants, { errorsLoading }) { // feature flags are guaranteed to be available at this point if (posthog.isFeatureEnabled('flag-key')) { // do something } })

Reload feature flags

Optional

Feature flag values are cached. If something has changed with your user and you'd like to refetch their flag values:

posthog.reloadFeatureFlags()

8
Running experiments
Optional
Experiments run on top of our feature flags. Once you've implemented the flag in your code, you run an experiment by creating a new experiment in the PostHog dashboard.

Next steps

Recommended

Now that you're evaluating flags, continue with the resources below to learn what else Feature Flags enables within the PostHog platform.

Resource	Description
Creating a feature flag	How to create a feature flag in PostHog
Adding feature flag code	How to check flags in your code for all platforms
Framework-specific guides	Setup guides for React Native, Next.js, Flutter, and other frameworks
How to do a phased rollout	Gradually roll out features to minimize risk
More tutorials	Other real-world examples and use cases

Web feature flags installation

Choose an installation method

Send events

Use boolean feature flags

Use multivariate feature flags

Use feature flag payloads

Ensure flags are loaded

Reload feature flags

Running experiments

Next steps

Community questions

Was this page useful?