# Get started with the Statsig SDK
For a more detailed guide, go to the [SDK Overview](https://docs.statsig.com/sdks/getting-started) or read about choosing between [client or server SDKs](https://docs.statsig.com/sdks/client-vs-server).
{% tabs %}
{% tab title="React" %}
{% steps %}
{% step title="Install Statsig packages" %}
```bash
npm install @statsig/react-bindings
```
{% /step %}
{% step title="Wrap child components" %}
Update your app's default function (typically App.tsx or Layout.tsx) so that the StatsigProvider wraps all child components.
```tsx
import { StatsigProvider } from "@statsig/react-bindings"; // [!code ++]
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
Loading...}> // [!code ++]
{children}
// [!code ++]
);
}
```
{% callout type="note" %}
This example assumes client-side React. For Server-Side Rendering, refer to the [Next.js docs](https://docs.statsig.com/client/Next).
{% /callout %}
{% /step %}
{% step title="Add client key" %}
Create a client API key in the [Statsig console Settings](https://console.statsig.com/api_keys). Copy and paste it to replace `` in the code snippet from the previous step.
{% /step %}
{% step title="Basic Usage" %}
{% tabs %}
{% tab title="Check a Gate" %}
First, create a gate on the [Feature Gates page](https://console.statsig.com/gates) in console, then check it in-code:
```jsx
const { client } = useStatsigClient();
return (
Gate is {client.checkGate('check_user') ? 'passing' : 'failing'}.
);
```
{% /tab %}
{% tab title="Get an Experiment Value" %}
First, create an Experiment on the [Experiments page](https://console.statsig.com/experiments) in console
```jsx
const { client } = useStatsigClient();
const experiment = client.getExperiment('my_experiment_name');
return (
);
```
{% /tab %}
{% tab title="Log an Event" %}
Use events to power metrics in your experiment or gates. You don't need to set up events in console first. Add them to your code:
```jsx
const { client } = useStatsigClient();
return
```
{% /tab %}
{% /tabs %}
{% /step %}
{% /steps %}
## Next steps
You've set up the Statsig SDK in React. Continue with the tutorials, or go to the full [Next.js](https://docs.statsig.com/client/Next) or [React](https://docs.statsig.com/client/React) SDK reference.
{% /tab %}
{% tab title="JS snippet" %}
{% steps %}
{% step title="Paste the code snippet" %}
In the `` section of your website, paste the following code snippet:
```html
```
{% /step %}
{% step title="Add client key" %}
Create a client API key in the [Statsig console Settings](https://console.statsig.com/api_keys). Copy and paste it to replace `` in the code snippet from the previous step.
{% /step %}
{% step title="Basic usage" %}
{% tabs %}
{% tab title="Check a Gate" %}
First, create a gate on the [Feature Gates page](https://console.statsig.com/gates) in console, then check it in-code:
```jsx
window.Statsig.instance().checkGate("my_feature_gate_name");
```
{% callout type="note" %}
Wait for the SDK to initialize before checking a gate to ensure it has fresh values. One way to do this is to wait for the ["values\_updated"](https://docs.statsig.com/client/javascript-sdk#client-event-emitter) event.
{% /callout %}
{% /tab %}
{% tab title="Get an Experiment Value" %}
First, create an Experiment on the [Experiments page](https://console.statsig.com/experiments) in console
```jsx
window.Statsig.instance().getExperiment("my_experiment_name").get('my_experiment_parameter_name');
```
{% callout type="note" %}
Wait for the SDK to initialize before getting an experiment to ensure it has fresh values. One way to do this is to wait for the ["values\_updated"](https://docs.statsig.com/client/javascript-sdk#client-event-emitter) event.
{% /callout %}
{% /tab %}
{% tab title="Log an Event" %}
Use events to power metrics in your experiment or gates. You don't need to set up events in console first. Add them to your code:
```jsx
window.Statsig.instance().logEvent("my_checkout_event_name", "event_value_item_1234", {"event_metadata": "my_metadata"})
```
{% /tab %}
{% /tabs %}
{% /step %}
{% /steps %}
## Next steps
You've set up the Statsig JavaScript snippet. You can now:
* [Record events](https://docs.statsig.com/webanalytics/overview)
* [Watch session replays](https://docs.statsig.com/session-replay/overview)
* [Run experiments](https://docs.statsig.com/experiments/overview)
* [Use feature flags](https://docs.statsig.com/feature-flags/overview)
Go to the [Javascript SDK reference](https://docs.statsig.com/client/javascript-sdk) for more information.
{% /tab %}
{% tab title="Python" %}
{% steps %}
{% step title="Install the Statsig package" %}
```shell
pip install statsig-python-core
```
{% /step %}
{% step title="Initialize the Statsig SDK" %}
```python
from statsig_python_core import Statsig, StatsigOptions
options = StatsigOptions()
options.environment = "development"
statsig = Statsig("", options)
statsig.initialize().wait()
statsig.shutdown().wait()
```
{% /step %}
{% step title="Add server secret key" %}
Create a server secret key in the [Statsig console Settings](https://console.statsig.com/api_keys). Copy and paste it to replace `` in the code snippet from the previous step.
{% /step %}
{% step title="Basic Usage" %}
{% tabs %}
{% tab title="Check a Gate" %}
First, create a gate on the [Feature Gates page](https://console.statsig.com/gates) in console, then check it in-code:
```python
user_object = StatsigUser(user_id="123", email="testuser@statsig.com") //add any number of other attributes
gate_value = statsig.check_gate(user_object, "my_feature_gate_name"):
```
{% /tab %}
{% tab title="Get an Experiment Value" %}
First, create an Experiment on the [Experiments page](https://console.statsig.com/experiments) in console
```python
user_object = StatsigUser(user_id="123", email="testuser@statsig.com"
my_experiment_object = statsig.get_experiment(user_object, "my_experiment_name")
my_experiment_parameter_value = my_experiment_object.get_string('my_experiment_parameter_name')
```
{% /tab %}
{% tab title="Log an Event" %}
Use events to power metrics in your experiment or gates. You don't need to set up events in console first. Add them to your code:
```python
user_object = StatsigUser(user_id="123", email="testuser@statsig.com"
statsig.log_event(
user=user_object,
event_name="my_checkout_event_name",
value="SKU_12345"
)
```
{% /tab %}
{% /tabs %}
{% /step %}
{% /steps %}
## Next steps
You've set up the Statsig SDK in Python. Continue with the tutorials, or go to the full [Python SDK Reference](https://docs.statsig.com/server-core/python-core).
{% /tab %}
{% tab title="Node" %}
{% steps %}
{% step title="Install the Statsig package" %}
```bash
npm i @statsig/statsig-node-core
```
{% /step %}
{% step title="Initialize the Statsig SDK" %}
```jsx
// Basic initialization
const statsig = new Statsig("");
await statsig.initialize();
// or with StatsigOptions
const options: StatsigOptions = { environment: "staging" };
const statsigWithOptions = new Statsig("secret-key", options);
await statsigWithOptions.initialize();
```
{% /step %}
{% step title="Add server secret key" %}
Create a server secret key in the [Statsig console Settings](https://console.statsig.com/api_keys). Copy and paste it to replace `` in the code snippet from the previous step.
{% /step %}
{% step title="Basic Usage" %}
{% tabs %}
{% tab title="Check a Gate" %}
First, create a gate on the [Feature Gates page](https://console.statsig.com/gates) in console, then check it in-code:
```js
const userObject = new StatsigUser({ userID: "123", email="testuser@statsig.com" });
const is_gate_enabled = statsig.checkGate(userObject, "my_feature_gate_name"):
```
{% /tab %}
{% tab title="Get an Experiment Value" %}
First, create an Experiment on the [Experiments page](https://console.statsig.com/experiments) in console
```js
const userObject = new StatsigUser({ userID: "123", email="testuser@statsig.com" });
const myExperimentObject = statsig.getExperiment(userObject, "my_experiment_name")
const myExperimentParameterValue = myExperimentObject.getValue('my_experiment_parameter_name')
```
{% /tab %}
{% tab title="Log an Event" %}
Use events to power metrics in your experiment or gates. You don't need to set up events in console first. Add them to your code:
```js
userObject = StatsigUser(user_id="123", email="testuser@statsig.com"
statsig.logEvent(
userObject,
"my_checkout_event_name",
"SKU_12345" //value for the event
);
```
{% /tab %}
{% /tabs %}
{% /step %}
{% /steps %}
## Next steps
You've set up the Statsig SDK in Node.js. Continue with the tutorials, or go to the full [Node.js SDK reference](https://docs.statsig.com/server-core/node-core).
{% /tab %}
{% tab title="+24 more SDKs" %}
## Explore SDKs
Statsig offers SDKs for a wide variety of platforms:
### Client SDKs
{% card-grid columns="3" %}
{% card title="JavaScript" href="https://docs.statsig.com/client/javascript-sdk" icon="js" %}
Browser JavaScript
{% /card %}
{% card title="React" href="https://docs.statsig.com/client/React" icon="react" %}
Client-Side React
{% /card %}
{% card title="React Native" href="https://docs.statsig.com/client/ReactNative" icon="react" %}
Bare React Native SDK
{% /card %}
{% card title="Next.js" href="https://docs.statsig.com/client/Next" icon="n" %}
Next.js SSR, SSG & Client-Side
{% /card %}
{% card title="Angular" href="https://docs.statsig.com/client/Angular" icon="angular" %}
Angular bindings for Javascript SDK
{% /card %}
{% card title="Swift" href="https://docs.statsig.com/client/iosClientSDK" icon="swift" %}
iOS, MacOS, tvOS SDK
{% /card %}
{% card title="Android" href="https://docs.statsig.com/client/Android" icon="android" %}
Android Kotlin/Java SDK
{% /card %}
{% card title=".NET Client" href="https://docs.statsig.com/client/DotNet" icon="dotnet" %}
Client SDK for .NET framework
{% /card %}
{% card title="Roku" href="https://docs.statsig.com/client/Roku" icon="roku" %}
Roku Brightscript SDK
{% /card %}
{% card title="Unity" href="https://docs.statsig.com/client/Unity" icon="unity" %}
Unity game engine SDK
{% /card %}
{% card title="Dart/Flutter" href="https://docs.statsig.com/client/Dart" icon="flutter" %}
Flutter/Dart Mobile App SDK
{% /card %}
{% card title="C++ Client" href="https://docs.statsig.com/client/CPP" icon="cplusplus" %}
C++ client-side SDK
{% /card %}
{% /card-grid %}
### Server side SDKs
{% card-grid columns="3" %}
{% card title="Node.js" href="https://docs.statsig.com/server-core/node-core" icon="node-js" %}
Node.js server SDK
{% /card %}
{% card title="Java" href="https://docs.statsig.com/server-core/java-core" icon="java" %}
Java server SDK
{% /card %}
{% card title="Python" href="https://docs.statsig.com/server-core/python-core" icon="python" %}
Python server SDK
{% /card %}
{% card title="Go" href="https://docs.statsig.com/server/go" icon="golang" %}
Go server SDK
{% /card %}
{% card title="Ruby" href="https://docs.statsig.com/server/ruby" icon="ruby" %}
Ruby server SDK
{% /card %}
{% card title=".NET Server" href="https://docs.statsig.com/server-core/dotnet-core" icon="dotnet" %}
.NET server SDK
{% /card %}
{% card title="PHP" href="https://docs.statsig.com/server-core/php-core" icon="php" %}
PHP server SDK
{% /card %}
{% card title="Rust" href="https://docs.statsig.com/server-core/rust-core" icon="rust" %}
Rust server SDK
{% /card %}
{% card title="C++ Server" href="https://docs.statsig.com/server-core/cpp-core" icon="cplusplus" %}
C++ server SDK
{% /card %}
{% /card-grid %}
### Integrations
{% card-grid columns="3" %}
{% card title="Webflow" href="https://docs.statsig.com/guides/webflow-sidecar-ab-test" icon="w" %}
Webflow integration
{% /card %}
{% card title="Shopify" href="https://docs.statsig.com/guides/shopify-ab-test" icon="shopify" %}
Shopify integration
{% /card %}
{% card title="Segment" href="https://docs.statsig.com/integrations/data-connectors/segment" icon="segment" %}
Segment data connector
{% /card %}
{% card title="Rudderstack" href="https://docs.statsig.com/integrations/data-connectors/rudderstack" icon="rudderstack" %}
Rudderstack connector
{% /card %}
{% card title="Hightouch" href="https://docs.statsig.com/integrations/data-connectors/hightouch" icon="hightouch" %}
Hightouch integration
{% /card %}
{% card title="mParticle" href="https://docs.statsig.com/integrations/data-connectors/mparticle" icon="mparticle" %}
mParticle connector
{% /card %}
{% card title="Framer" href="https://docs.statsig.com/guides/framer-analytics" icon="f" %}
Framer integration
{% /card %}
{% card title="Slack" href="https://docs.statsig.com/integrations/slack" icon="slack" %}
Slack notifications
{% /card %}
{% card title="Integrations" href="https://docs.statsig.com/integrations/introduction" icon="puzzle" %}
View more integrations
{% /card %}
{% /card-grid %}
{% /tab %}
{% /tabs %}