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:
This example is implemented in a codepen where you can see the actual code, or fork it to quickly test your own Dynamic Configs.
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.
First, let's add the Window's 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!
This is the rough schema we want to return:
Let's edit the return value for the windows rule, and fill it in:
Let's repeat this process for people using Mac OS. Adding the rule:
Updating the return value:
Don't forget to click "Save Changes" to apply these new rules to your config. Your Dynamic Config should now look something like this:
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:
Now, let's fetch our config and construct the banner:
Note that this js relies on the html page having the homepageBanner div:
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.