# Build Your First Feature

> For AI agents: a documentation index is available at [/llms.txt](/llms.txt). Append `.md` to any page URL for markdown, or send `Accept: text/markdown`.

> **Info:**
>
> Statsig refers to feature flags as _feature gates_ across the console and SDKs. The terms are interchangeable throughout this guide.

A feature gate controls who sees a new feature and rolls it out gradually without deploying code. This tutorial creates a feature gate, targets mobile platforms and internal testers, then checks it live with the JavaScript SDK in your browser console.

1. **Create a feature gate**

   Navigate to the [Feature Gates page](https://console.statsig.com/gates) and click **Get Started** (or **Create** if you already have gates).

   ![Feature Gates page with Create button](https://docs.statsig.com/images/guides/first-feature/feature-gates-page.png)

   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**.

   ![Adding a mobile targeting rule](https://docs.statsig.com/images/guides/first-feature/add-rule.png)
3. **Add an internal testing rule**

   Add a second rule for your team. For example, use **Email → Contains any of** with your company domain so employees can exercise the feature regardless of device.

   ![Gate with mobile and email rules](https://docs.statsig.com/images/guides/first-feature/gate-rules.png)
4. **Generate a client API key**

   Go to [Project Settings → API Keys](https://console.statsig.com/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**

   > **Tip:**
   >
   > Statsig supports many platforms. Refer to [Client SDK options](https://docs.statsig.com/sdks/getting-started) 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 load the SDK from jsDelivr:

   ```js
   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);
   ```

   ![Injecting the SDK via DevTools](https://docs.statsig.com/images/guides/first-feature/add-sdk-script.png)
6. **Initialize and check the gate**

   Replace `YOUR\_SDK\_KEY` with the client key from Step 4 and run:

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

   Then call:

   ```js
   client.checkGate('mobile_registration');
   ```

   You should see `false` because the current session isn’t mobile and doesn’t use the employee email domain.
7. **Simulate a mobile environment**

   Enable the mobile device toolbar in Chrome DevTools.

   ![Chrome DevTools mobile device toolbar icon](https://docs.statsig.com/images/guides/first-feature/devtools-mobile-toolbar.png)

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

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

   The gate should now return `true` for the mobile profile.

   ![Gate returning true for mobile rule](https://docs.statsig.com/images/guides/first-feature/mobile-rule-true.png)
8. **Test the employee backdoor**

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

   ```js
   await client.updateUserAsync({ email: 'teammate@statsig.com' });
   client.checkGate('mobile_registration');
   ```

   The gate passes again because of the email rule.

   ![Gate returning true via email rule](https://docs.statsig.com/images/guides/first-feature/email-rule-true.png)
9. **Flush exposures and inspect diagnostics**

   ```js
   client.flush();
   ```

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

   ![Diagnostics exposure stream showing recent checks](https://docs.statsig.com/images/guides/first-feature/diagnostics-stream.png)

## Use the gate in production

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

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

Your feature gate is ready for production.