Build Your First Feature

Walk through creating a feature gate, targeting audiences, and rolling out your first feature with the JavaScript SDK.

Statsig refers to feature flags as feature gates across the console and SDKs. The terms are interchangeable throughout this guide.

Once your Statsig account is ready, follow the steps below to create and test-drive a new feature gate.

1. Create a feature gate

   Navigate to the Feature Gates page and click Get Started (or Create if you already have gates).

   

   Give the gate a clear name and description—for example, Mobile Registration with a note about the new mobile sign-up flow.

2. Target mobile platforms

   New gates default to returning false until you add targeting. Click Add New Rule, choose Operating System → Any of, and select Android and iOS. Set the pass percentage to 100% and click Add Rule, then Save.

   
3. Add an internal testing rule

   Layer on a second rule for your team—for example Email → Contains any of with your company domain—so employees can exercise the feature regardless of device.

   
4. Generate a client API key

   Head to Project Settings → API Keys and copy the Client API key. Keep server secret keys on backends only, and use console API keys for programmatic configuration work.

5. Load the JavaScript SDK

   Statsig supports many platforms—see Client SDK options for alternatives. This walkthrough uses the browser SDK so you can experiment directly in DevTools.

   Paste the snippet below into the browser console on any site to fetch the SDK from jsDelivr:

   const script = document.createElement('script');
   script.src = 'https://cdn.jsdelivr.net/npm/@statsig/js-client@3/build/statsig-js-client+session-replay+web-analytics.min.js';
   document.head.appendChild(script);
   

   
6. Initialize and check the gate

   Replace YOUR_SDK_KEY with the client key from Step 4 and run:

   const client = new window.Statsig.StatsigClient('YOUR_SDK_KEY', {});
   await client.initializeAsync();
   

   Then call:

   client.checkGate('mobile_registration');
   

   You should see false because the current session is not mobile and doesn’t use the employee email domain.

7. Simulate a mobile environment

   Enable the mobile device toolbar in Chrome DevTools.

   

   Re-evaluate the user to pick up the new environment and re-check the gate:

   await client.updateUserAsync({});
   client.checkGate('mobile_registration');
   

   The gate should now return true for the mobile profile.

   
8. Test the employee backdoor

   Switch DevTools back to the desktop view and update the user with a company email:

   await client.updateUserAsync({ email: '[e-mail]' });
   client.checkGate('mobile_registration');
   

   The gate passes again thanks to the email rule.

   
9. Flush exposures and inspect diagnostics

   client.flush();
   

   Open the gate’s Diagnostics tab to confirm each exposure, including the failing desktop check, mobile pass, and employee pass.

   

Use the gate in production

Wrap feature logic in a gate check so only targeted users see the experience:

if (client.checkGate('mobile_registration')) {
  show(mobileRegistrationPage);
} else {
  show(oldRegistrationPage);
}

Happy feature gating!