Feature flags

Prerequisites

Complete the quickstart first — the SDK must be installed and your domain allowed.

1. Create a flag

In the console, open your project and go to Feature flags → Create flag. Set:

• Key — lowercase identifier used in code (pattern [a-z][a-z0-9_]*, e.g. new_checkout)
• Type — boolean or string
• Rollout % — percentage of visitors who receive the on value
• On / off values — what visitors see when in or out of rollout
• Country rule (optional) — include or exclude specific countries

Active flags sync to the edge within seconds. Use the flag key in your code, not the internal document ID.

2. Check a boolean flag

analytics.isEnabled waits for render context (up to 2 seconds by default), then returns true only when the flag evaluates to boolean true. On timeout or failure it returns your default value.

if (await analytics.isEnabled("new_checkout", false)) {
  showNewCheckout();
} else {
  showLegacyCheckout();
}

3. Read string flags

String flags (and all flag values at once) come from analytics.flags(). Do not use isEnabled for string flags.

const flags = await analytics.flags();
const theme = flags["checkout_theme"]; // string | boolean

if (theme === "compact") {
  renderCompactLayout();
}

4. Scope flags (optional)

Flags belong to a group (default global). Request only the groups you need via a script attribute:

<script
  defer
  src="https://cdn.rendercontext.com/analytics.js"
  data-project="pk_live_YOUR_KEY"
  data-flag-groups="checkout,billing"
></script>

Or refresh context at runtime for specific keys:

await analytics.refreshContext({
  flagKeys: ["new_checkout"],
});

Next steps

Ready to compare variants? See Experiments.