Statsig Flags SDK Example

This example uses Statsig for feature flags with the Flags SDK along with the

@flags-sdk/statsig

Demo

https://flags-sdk-statsig.vercel.app/

How it works

This demo uses two feature gates on Statsig to control the visibility of two banners on the page. Both gates are configured to show/hide each banner 50% of the time.

Once you visit the page, you can see a variation of both/one/none of the banners. Since this example is using a stable id to identify users, you will see the same variation until you reset your id.

To test different variations, you can use the Dev Tools at the bottom to reset the stable id and reload the page. This allows you to test different variations of the banners.

If you deployed your own and configured the feature gates on Statsig, you can also use the Flags Explorer to test different variations by creating overrides.

Deploy this template

The easiest way to get started with Statsig is through the native integration in the Vercel Marketplace.

Step 1: Link the project

In order to use the Flags Explorer, you need to link the project on your local machine.

vercel link

Select the project from the list you just deployed.

Step 2: Pull all environment variables

This allows the Flags SDK and the Flags Explorer to work correctly, by getting additional metadata.

vercel env pull

Step 3: Create Feature Gates and Experiments

Head over to the Statsig Console and create the feature gates and experiments required by this template.

Ensure you select

Stable ID

User ID

Feature Gates:

• Summer Sale

  with the gate id

  summer_sale

  , targeting the

  Stable ID

• Free Shipping

  with the gate id

  free_delivery

  , targeting the

  Stable ID

Experiments:

• Proceed to Checkout

  with the id

  proceed_to_checkout

  , targeting the

  Stable ID

You can also find the gate ids in the

flags.ts

Step 4: Configure the Feature Gates

Select the

Summer Sale

Free Shipping

Create a new rule by clicking on "+ Add New Rule" and set the percentage to 50%.

After that, click on "Save" at the bottom right corner.

Step 5: Configure the Experiments

Configure the

Proceed to Checkout

• Besides the default

  Control

  and

  Test

  groups, add a new group called

  Test #2

• Add a parameter called

  color

  of type

  string

• Use

  blue

  ,

  green

  and

  red

  as the values for the different groups

After that, start the Experiment.

Step 6 (optional): Set additional environment variables

If you provide the

STATSIG_CONSOLE_API_KEY

STATSIG_PROJECT_ID

This will show the description (if set) and displays a link to the feature gate on the Statsig Console.

You can find both values in the Statsig Console.