> ## Documentation Index
> Fetch the complete documentation index at: https://statsig-4b2ff144-serverless-cloudflare.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Setting up Sidecar

> Learn how to install and configure the Statsig Sidecar Chrome extension and integrate it with your website.

<Info>
  * This guide assumes you have an existing Statsig account.  Please go here to create a new free account if you don't already have one: [https://statsig.com/signup](https://statsig.com/signup)
  * You will need to use Google Chrome web browser for this exercise.
</Info>

## Setup Sidecar Chrome Extension

### Step 1: Install Chrome Extension

If you don't already have the Sidecar extension, visit the [Chrome store](https://chromewebstore.google.com/detail/statsig-sidecar/blkgemeefnlkmicphlkodgdkhceibgcb) and click on the "Add to Chrome" button

<Frame>
  <img src="https://github.com/statsig-io/docs/assets/74584483/0fc7cf69-3668-4f1b-bdaf-c75a25ca96af" alt="Statsig Sidecar Extension in the Chrome Web Store" />
</Frame>

### Step 2: Activate the extension

Click on the Extensions toolbar button and select "Statsig Sidecar" to activate the Sidecar extension

<Frame>
  <img src="https://github.com/statsig-io/.github/assets/74588208/e069d1f2-c437-4398-a381-681b76663178" alt="Chrome extensions menu with Statsig Sidecar option" />
</Frame>

You will now see an Experiment Config UI like this:

<Frame>
  <img src="https://mintcdn.com/statsig-4b2ff144-serverless-cloudflare/cRn3cHH1SyD33E06/images/sidecarempty.png?fit=max&auto=format&n=cRn3cHH1SyD33E06&q=85&s=9dd59627b27d287d1ad045fe38278775" alt="Sidecar Empty Interface" width="1080" height="696" data-path="images/sidecarempty.png" />
</Frame>

### Step 3: Update settings

You will need to update API keys in the Settings Dialog for the extension to work.  You can invoke the Settings dialog from the "Settings" link on the top header.

<Frame>
  <img src="https://mintcdn.com/statsig-4b2ff144-serverless-cloudflare/cRn3cHH1SyD33E06/images/sidecarsettings.png?fit=max&auto=format&n=cRn3cHH1SyD33E06&q=85&s=112071a51ac4ea9a06eab70727f7a73e" alt="Sidecar Settings Dialog" width="1354" height="748" data-path="images/sidecarsettings.png" />
</Frame>

You can retrieve these keys from your Statsig project.  In order to get this, login to Statsig Console here: [https://console.statsig.com](https://console.statsig.com) and navigate to the Settings page ([https://console.statsig.com/settings](https://console.statsig.com/settings))

Once you're there, select the "Keys & Environments" panel and copy both the Console API Key and Client API Key and paste them in the Settings dialog.

<Frame>
  <img src="https://github.com/statsig-io/.github/assets/74588208/754cc245-1821-4f75-a87d-08b536422587" alt="Statsig console Keys & Environments panel showing API keys" />
</Frame>

Hit "OK" to commit the API Keys.

## Install Sidecar on your website

Add a single script tag within the `<head>` portion of your website, replacing with your own [Client SDK Key](https://docs.statsig.com/sdk-keys/api-keys/) as shown below.

```
<script src="https://cdn.jsdelivr.net/npm/statsig-sidecar/dist/index.min.js?apikey=REPLACE_WITH_YOUR_CLIENT_SDK_KEY"></script>
```

<Info>
  Installing Sidecar JS via a Tag Manager can potentially lead to flickering and other unpredictable behavior. We strongly encourage installing Sidecar as a synchronous script tag.
</Info>

### Additional Options

Add these query string parameters to the Sidecar script URL for additional controls over Sidecar client behavior

* `&reduceflicker=0` will disable the brief hiding of the `<body>` tag while the client initializes
* `&autocapture=0` will disable event autocapture

Most website builders also support the ability to add script tags on your website.  Here are some common website builder examples:
[Webflow](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags?topics=site-settings), [Wordpress](https://wordpress.com/go/website-building/how-to-properly-add-javascript-to-wordpress-3-top-methods/), [Wix](https://support.wix.com/en/article/embedding-custom-code-on-your-site), [Squarespace](https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site), [Weebly](https://weeblytutorials.com/embed-javascript-weebly).

You can copy the script code from within the Sidecar Chrome extension

<Frame>
  <img src="https://mintcdn.com/statsig-4b2ff144-serverless-cloudflare/cRn3cHH1SyD33E06/images/sidecargetscript.png?fit=max&auto=format&n=cRn3cHH1SyD33E06&q=85&s=7686cbe4441f9868af8c53c16a67ebc5" alt="Sidecar Script Code" width="1061" height="245" data-path="images/sidecargetscript.png" />
</Frame>

#### You are now all set to create your first experiment

## Next up: [Creating Experiments](/guides/sidecar-experiments/creating-experiments)
