{% callout type="info" %}
Statsig refers to feature flags as <em>feature gates</em> across the console and SDKs. The terms are interchangeable throughout this guide.
{% /callout %}

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

{% steps %}
{% step title="Create a feature gate" %}
Navigate to the [Feature Gates page](https://console.statsig.com/gates) and click <strong>Get Started</strong> (or <strong>Create</strong> if you already have gates).

{% figure %}
![Feature Gates page with Create button](/images/guides/first-feature/feature-gates-page.png)
{% /figure %}

Give the gate a clear name and description. For example, <code>Mobile Registration</code> with a note about the new mobile sign-up flow.
{% /step %}

{% step title="Target mobile platforms" %}
New gates default to returning <code>false</code> until you add targeting. Click <strong>Add New Rule</strong>, choose <strong>Operating System → Any of</strong>, and select <strong>Android</strong> and <strong>iOS</strong>. Set the pass percentage to 100% and click <strong>Add Rule</strong>, then <strong>Save</strong>.

{% figure %}
![Adding a mobile targeting rule](/images/guides/first-feature/add-rule.png)
{% /figure %}
{% /step %}

{% step title="Add an internal testing rule" %}
Layer on a second rule for your team. For example, use <strong>Email → Contains any of</strong> with your company domain so employees can exercise the feature regardless of device.

{% figure %}
![Gate with mobile and email rules](/images/guides/first-feature/gate-rules.png)
{% /figure %}
{% /step %}

{% step title="Generate a client API key" %}
Go to [Project Settings → API Keys](https://console.statsig.com/api_keys) and copy the <strong>Client API key</strong>. Keep server secret keys on backends only, and use console API keys for programmatic configuration work.
{% /step %}

{% step title="Load the JavaScript SDK" %}
{% callout type="tip" %}
Statsig supports many platforms. Refer to [Client SDK options](/sdks/getting-started) for alternatives. This walkthrough uses the browser SDK so you can experiment directly in DevTools.
{% /callout %}

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

{% figure %}
![Injecting the SDK via DevTools](/images/guides/first-feature/add-sdk-script.png)
{% /figure %}
{% /step %}

{% step title="Initialize and check the gate" %}
Replace <code>YOUR\_SDK\_KEY</code> 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 <code>false</code> because the current session is not mobile and doesn’t use the employee email domain.
{% /step %}

{% step title="Simulate a mobile environment" %}
Enable the mobile device toolbar in Chrome DevTools.

{% figure %}
![Chrome DevTools mobile device toolbar icon](/images/guides/first-feature/devtools-mobile-toolbar.png)
{% /figure %}

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 <code>true</code> for the mobile profile.

{% figure %}
![Gate returning true for mobile rule](/images/guides/first-feature/mobile-rule-true.png)
{% /figure %}
{% /step %}

{% step title="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.

{% figure %}
![Gate returning true via email rule](/images/guides/first-feature/email-rule-true.png)
{% /figure %}
{% /step %}

{% step title="Flush exposures and inspect diagnostics" %}
```js
client.flush();
```

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

{% figure %}
![Diagnostics exposure stream showing recent checks](/images/guides/first-feature/diagnostics-stream.png)
{% /figure %}
{% /step %}
{% /steps %}

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