Feature flag installation

Feature flags enable safer deployment and roll back of new features and code. This helps roll out new features to your users in a managed way. If something goes wrong, flags enable roll backs without having to re-deploy your application.

Feature flags also help you control access to certain parts of your product, such as only showing paid features to users with an active subscription or early access features to users enrolled in a beta.

To start using feature flags, you first need to install PostHog (if you haven't already):

Option 1: Add the JavaScript snippet to your HTML Recommended

This is the simplest way to get PostHog up and running on your website, and only takes a few minutes to set-up.

Add to your website & app

Paste this snippet within the <head> tags of your website - ideally just inside the closing </head> tag - on all pages that you wish to track.

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+"/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="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".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_api_key>', {api_host: '<ph_instance_address>'})
</script>

Be sure to replace <ph_project_api_key> and <ph_instance_address> with your project's values. (You can find the snippet pre-filled with this data in the PostHog app under Project / Settings. (Quick links if you use PostHog Cloud US or PostHog Cloud EU)

What this code does

After adding the snippet to your website, it will automatically start to:

Capture $pageview events when a user visits a page
Track when users click on links or buttons
Record videos of user sessions that you can play back (if you've enabled the Session recordings feature, which we highly recommend!)

Option 2: Install via package manager

yarn add posthog-js

And then include it in your files:

Web

import posthog from 'posthog-js'
posthog.init('<ph_project_api_key>', { api_host: '<ph_instance_address>' })

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

Web

if (!window.location.host.includes('127.0.0.1') && !window.location.host.includes('localhost')) {
    posthog.init('<ph_project_api_key>', { api_host: '<ph_instance_address>' })
}

If you're using React or Next.js, checkout our React SDK or Next.js integration.

Option 1: Add the JavaScript snippet to your HTML Recommended

Add to your website & app

What this code does

Option 2: Install via package manager

Questions?

Was this page useful?

Creating feature flags