1. Home
  2. /Platforms
  3. /Web
  4. /Feature Flags

Feature Flags

A Feature Flag is a toggle for controlling the availability of content or functionality in your app or website. Flag properties enable making immediate app or website code updates.

Accessing flags

 Note

Feature Flags are only available after a channel has been registered in the browser. For information on how to register a channel, see Creating a channel in the Web Getting Started documentation.

The Airship SDK will automatically refresh Feature Flag definitions on flag request if the current definitions are out of date. Once defined in the dashboard, a Feature Flag can be accessed by its name after the Airship SDK is loaded.

The SDK provides asynchronous access to Feature Flags using Promises , which are supported in all browser versions that the Airship SDK targets. If async/await syntax is available in your toolchain, it is recommended for simplifying interactions with Feature Flags.

Flags are accessed through the Feature Flag Manager interface:

Determining Feature Flag eligibility
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

if (flag.eligible) {
  // user is eligible for the flag, enable the feature
} else {
  // user is not eligible, disable the feature or use default behavior
}

A user is said to be eligible for a flag if the flag exists and if the current user is a member of the flag’s audience. You may also check if the flag exists, if you are verifying correct operation during development. A flag is said to exist when:

  • A flag with a given name has been created in the dashboard
  • If the flag has a start or end date, the current time falls within that range
 Note

A user can never be eligible for a flag that does not exist.

Checking Feature Flag properties
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

let booleanProperty = flag.variables?.["bool_property_name"]
let stringProperty = flag.variables?.["string_property_name"]
let jsonProperty = flag.variables?.["json_property_name"]
let numberProperty = flag.variables?.["number_property_name"]

Checking if a Feature Flag definition exists
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

if (!flag.exists) {
  // for debugging purposes; not recommended for production deployments
  console.debug("flag did not exist!")
} else if (flag.eligible) {
  // user is eligible for the flag, enable the feature
} else {
  // user is not eligible, disable the feature or use default behavior
}

Tracking interaction

If a user has interacted with a feature that is controlled by a Feature Flag, you will want to emit an event to inform Airship of that usage. This event will be collated for reporting purposes and may also be used to trigger ScenesA single or multi-screen in-app experience cached on users’ devices and displayed when users meet certain conditions in your app or website, such as viewing a particular screen or when a Custom Event occurs. They can be presented in fullscreen, modal, or embedded format using the default swipe/click mode or as a Story. Scenes can also contain survey questions. and SequencesA series of messages that is initiated by a trigger. Airship sends messages in the series based on your timing settings, and you can also set conditions that determine its audience and continuation. Sequences can be connected to each other and to other messaging components to create continuous user experiences in a Journey.. See Using Feature Flags with messaging in our Feature Flags user guide.

Emitting an Interaction Event
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

// later, when the feature the flag controls is interacted with by the user
await sdk.components.featureFlags.trackInteraction(flag)

Error handling

The Airship SDK will always return a Feature Flag object, regardless of the flag existing or not. The promise returned from the featureFlags.get method will only reject if there was an exceptional event while fetching flag data.

Guarding against errors while checking a flag
const sdk = await UA
let flag
try {
  flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")
} catch (e) {
  // report or handle error as necessary for your app
}

if (flag && flag.eligible) {
  // user is eligible for the flag, enable the feature
} else {
  // user is not eligible, disable the feature or use default behavior
}