Go to platform

Your First Feature Flag

You have an SDK connected. Now give it something to read.

Create the flag

Open Flags in your project and press Create Flag. A three-step panel opens.

1

Identity

A name for people ("New checkout") and a key for code (new_checkout). The key is what your application asks for, so it has rules: lowercase letters, numbers and underscores, starting with a letter. Pick it carefully, because your code will quote it. As you type the key, this step also shows the exact code to read the flag, updating live.

2

Type

Boolean for on and off, which is what you want first. String, Number and JSON are there for flags that carry a value rather than a switch: a theme name, a page size, a block of configuration.

3

Variations

The values the flag can return. A boolean flag comes with two, true and false, and you choose which one is the default. You can have up to four variations on any flag. Each one needs its own key and its own value: the panel marks a repeated one as you type, before you create the flag. You can change them later on the flag's Variations page.

  1. Name your flag and pick a key. The rules below the Key field explain what characters are allowed.
  2. The code preview updates as you type, so you can see exactly what your app will call before you finish creating the flag. Once you have picked a type, it uses that type's getter, such as getStringFlag for a string flag.
  3. Closing the panel after you have typed something asks first, so a slip of the Cancel button never throws your work away.

Read it in your code

One line, and a default value. In React, the hook re-renders the component when the value changes.

import { AvsbClient } from '@avsbhq/browser';const client = new AvsbClient({ sdkKey: 'sdk_development_xxxxxxxxxxxxxxxx' });// Your two checkout renderers:declare function renderNewCheckout(): void;declare function renderOldCheckout(): void;// getFlag returns a Flag object; `.value` is the variation value itself.const showNewCheckout = client.getFlag('new_checkout', false).value;if (showNewCheckout) {  renderNewCheckout();} else {  renderOldCheckout();}
TypeScript16 lines
useFlag vs useFlagValue

useFlag returns the full Flag object (value, source, and the reason it evaluated that way), for when you need more than the value. useFlagValue is the shortcut that hands back just the value, which is what a plain if or ternary like the one above wants.

The default value is not a formality

Whatever you pass as the second argument is what your app uses if the flag has not loaded yet, if the flag does not exist, or if the network is having a bad day. Make it the safe, existing behaviour, and a flag outage becomes a non-event.

Turn it on and publish

A new flag is off in every environment, and edits are held as a draft until you publish them. That is deliberate: it means you can set a flag up completely, review it, and choose the moment it starts affecting anything.

1

Open the flag

From the Flags list, click the flag you just created.

2

Pick an environment

Each environment holds its own configuration for this flag. Choose Development if that is the key your app is running with.

3

Turn it on

Switch the flag on for that environment. Your change is saved as a draft, so nothing has reached your application yet.

4

Publish changes

Press Publish changes. This is the step that sends the new configuration to your SDKs. Until you press it, your app keeps reading the last published version.

Full detail on the draft-and-publish workflow, including how conflicting edits are handled, is in Saving and Publishing.

Confirm it worked

Reload your application. getFlag('new_checkout', false) now returns the value you published rather than your default. SDKs also refresh on their own, so a running app picks up a published change within a minute or two without a restart.

What happens next

Change the value and watch your app follow, then make it apply to some people and not others. Continue to See it evaluate.

Was this helpful?