Setting the file. One moment.
Skill 77 · Instrument Feature Flags
Subchapter 77.25
references/web.mdMarkdown7 KBView on GitHub
AI agents: this is one page from PostHog’s docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt (opens in a new tab)
1
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 && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(
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-jsyarn add posthog-jspnpm add posthog-jsbun add posthog-jsJavaScript
import posthog from 'posthog-js'
posthog.init('<ph_project_token>', {
api_host: 'https://us.i.posthog.com',
defaults: '2026-05-30'
})2
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' })3
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.getFeatureFlagResult('flag-key')?.payload
}4
Optional
For multivariate flags, check which variant the user has been assigned:
const matchedFlag = posthog.getFeatureFlagResult('flag-key')
if (matchedFlag?.variant == 'variant-key') { // replace 'variant-key' with the key of your variant
// Do something differently for this user
// Optional: read the payload from the same result
const
5
Optional
Feature flags can include payloads with additional data. Fetch the payload like this:
const matchedFlagPayload = posthog.getFeatureFlagResult('flag-key')?.payload6
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
7
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
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.
9
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 (opens in a new tab) | How to create a feature flag in PostHog |
| Adding feature flag code (opens in a new tab) | How to check flags in your code for all platforms |
| Framework-specific guides |
Ask PostHog AI
HelpfulCould be better
| Setup guides for React Native, Next.js, Flutter, and other frameworks |
| How to do a phased rollout (opens in a new tab) | Gradually roll out features to minimize risk |
| More tutorials (opens in a new tab) | Other real-world examples and use cases |