Guided Tutorial

A step-by-step tutorial to create your first dynamic config for building a flexible homepage banner

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. Whether it be for server-side rendered UI, rate limiting configurations, ranking systems, algorithms, etc. Dynamic Config can help you update configurations on the fly.

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.

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 green 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. Dynamic Configs live under the “Feature Management” tab in the Statsig Console.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,
}
```text

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:

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

<Frame>
  <img src="/images/guides/first-dynamic-config/a2dc7b2a-98f4-4570-86db-34b390d80a89.png" alt="Return Value" />
</Frame>

Remember to hit "Save" in the bottom right.

<Frame>
  <img src="/images/guides/first-dynamic-config/b6e0eb73-c623-4a05-b605-ad9eb2c42792.png" alt="Config with one rule" />
</Frame>

Let's repeat this process for people using Mac OS. Adding the the same OS rule, but this time select "Mac OS X".

Then, lets update the return value:

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

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

<Frame>
  <img src="/images/guides/first-dynamic-config/a04575a8-6afb-4380-8cb6-77052a2d5943.png" alt="Dynamic Config with two rules" />
</Frame>

### Step 4 - Call getDynamicConfig In Your App

This is a specific guide for creating a Dynamic Config using the Statsig Javascript SDK - for more guides to calling the statsig SDKs in code, use the Statsig SDK [quickstart guides](https://docs.statsig.com/sdks/quickstart) where you can select which SDK you'll be using!
You can also reference the code snippet you'll want to use for a particular dynamic config by clicking into the code snippet button on the dynamic config page and selecting the desired SDK
<Frame>
  <img src="/images/guides/first-dynamic-config/8211d6ea-db5f-448b-9589-e112de3ac4b2.png" alt="dynamic config code snippet button" />
</Frame>

Now let's use this Dynamic Config to create a different landing page experience for different sets of developers. Check out this [codepen](https://codepen.io/tore-statsig/pen/mdWEajo) 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](https://www.jsdelivr.com/package/npm/@statsig/js-client), we initialize the SDK:

```js
const client = new window.Statsig.StatsigClient("<CLIENT-SDK-KEY>", {});
```text

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

```js
const bannerConfig = client.getDynamicConfig("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);
```text

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

```html
<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.