Skip to main content

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.

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:

ui for windows users CROPPED

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":

Screen Shot 2021-06-14 at 5 14 16 PM

Screen Shot 2021-06-14 at 5 14 37 PM

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:

Screen Shot 2021-06-14 at 5 14 55 PM

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:

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

Screen Shot 2021-06-14 at 5 15 26 PM

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

Screen Shot 2021-06-14 at 5 15 52 PM

Updating the return value:

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

Screen Shot 2021-06-14 at 5 16 07 PM

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

Screen Shot 2021-06-14 at 5 16 50 PM

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. When you open it up, you should see the proper banner based on the operating system you are currently using - and the code powering it.

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:

ui for mac users

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.