Making Your Code More Flexible with Dynamic Config

Now that you have created your Statsig account, and perhaps even your first feature, this guide will help you make your app a bit more flexible with Dynamic Config.

info

NOTE: This guide focuses on a client-side example, as it is easier to illustrate how Dynamic Configs work and can be used. You can and still should use Dynamic Config on the server side as well. Whether it be for server-side rendered UI, rate limiting configurations, ranking systems, algorithms, etc. Dynamic Config can help you update things on the fly.

In this guide, we will be building a front page banner - something that may show up on an ecommerce site to advertise an upcoming sale, for instance. Here, I will apply it to a stripped down version of the Statsig homepage. It will look something like this blue banner when we are finished:

Codepen Example

This example is implemented in a codepen where you can see the actual code, or fork it to quickly test your own Dynamic Configs.

Step 1 - Create a new Dynamic Config

Start by creating a new Dynamic Config. Pick a name related to the set of variables this config will hold. Since we are building a homepage banner, let's call it "Banner Config":

Great! We have created an (empty) Dynamic Config. It returns the default value (an empty JSON object) whenever it is evaluated. For our example, we are going to add some options to populate a homepage banner. The end goal is to show a targeted banner to a few different sets of developers: those likely to use a .NET SDK, and those more likely to use a Swift SDK. Let's keep our targeting simple here: we want to promote the new .NET SDK to anyone that is browsing our site on the Windows operating system, and the new Swift SDK to anyone browsing on MacOS. That takes us to steps 2 and 3.

Step 2 - Create Targeting Rule(s) and Conditions

First, let's add the Window's rule. Select "Add Targeting", and then "Add new Rule":

Though Feature Gates and Dynamic Config share the same powerful user segmentation and targeting tools, they differ in what you return for those different sets of users. Feature Gates are intended to be super lightweight, and only return a boolean indicating the user matched one of the rules. Dynamic Configs, on the other hand, can return a different JSON blob of data for each rule!

Step 3 - Update the Return Value for Users Matching Each Rule

This is the rough schema we want to return:

{
  text,
  backgroundColor,
  color,
  fontSize,
  isCloseable,
}

Let's edit the return value for the windows rule, and fill it in. Under "Return" on the right hand side, hit "edit". Then paste the following:

{
  text: 'New!  Introducing the Statsig .NET SDK',
  backgroundColor: '#194b7d',
  color: 'white',
  fontSize: 14,
  isCloseable: false,
}

Remember to hit "Save Changes" - now your config should look like this:

Let's repeat this process for people using Mac OS. Adding the rule:

Updating the return value:

{
  text: 'New!  Introducing the Statsig Swift SDK',
  backgroundColor: '#197d4b',
  color: 'white',
  fontSize: 16,
}

Once again, don't forget to click "Save Changes" to apply these new rules to your config. Your Dynamic Config should now look something like this:

Step 4 - Call getConfig In Your App

Now let's use this Dynamic Config to create a different landing page experience for different sets of developers. Check out this codepen to follow along. If you fork the code and put in the API Key from your Statsig project, you should be able to see the banner for your platform.

After adding the SDK to the webpage via the jsdelivr cdn, we initialize the SDK:

await statsig.initialize("<CLIENT-SDK-KEY>");

Now, let's fetch our config and construct the banner:

const bannerConfig = statsig.getConfig("banner_config");
const text = bannerConfig.get("text", null);
const backgroundColor = bannerConfig.get("backgroundColor", "black");
const color = bannerConfig.get("color", "white");
const fontSize = bannerConfig.get("fontSize", 14);
if (text == null) {
  return;
}
const banner = document.getElementById("homepageBanner");
const bannerText = document.createElement("p");
banner.style.display = "block";
bannerText.innerHTML = text;
banner.style.color = color;
banner.style.fontSize = fontSize + "px";
banner.style.backgroundColor = backgroundColor;
banner.appendChild(bannerText);

Note that this js relies on the html page having the homepageBanner div:

<div id="homepageBanner"></div>

And that's it! With just a handful of javascript, we integrated with the Statsig SDK and started using the Dynamic Config we created. Now, without updating our website, we can add a new rule to the Dynamic Config and return a completely new banner to a different set of people!

Here's what it looks like for me, viewing this webpage in chrome on a Mac:

We hope this inspires some ideas of what you could do with your app/website/backend service, and we can't wait to see what you build.