Set Up Feature Flags in Feature Experimentation

Overview

Your team often introduces new features to improve user experience, solve problems, and grow products.

However, releasing new features carries risks, such as introducing unintentional bugs or getting unexpected user reactions. Feature flags offer a smart way to reduce these risks by giving your team control over how and when features are shown to users.

This guide covers the essentials of feature flags, including their benefits and how to create your first one using VWO.

What are feature flags?

Feature flags are switches within your software that turn features on or off without deploying new code.

They allow you to introduce new features safely, test them on specific user groups, or quickly disable them if necessary.

Feature flags are sometimes known by other terms:

• Feature toggles
• Feature switches
• Conditional features
• Release toggles
• Feature gates

No matter what you call them, their core job is controlling who sees specific features and when.

Why do teams use VWO's feature flags?

Here are some of the most common ones.

De-risk software releases

Feature flags let you first release new features to a small group of users, like internal teams or beta testers. This way, you can watch how the system behaves, collect feedback, and make improvements before exposing it to everyone. If something goes wrong, you can limit the damage. It’s like a safety net for product rollouts.

Improve system reliability

When things break in production, feature flags can act like emergency switches. You can instantly turn off the problematic feature without waiting for a full deployment. They also help reduce load, debug issues, and test backend changes safely, making the system more stable overall.

Target and personalize experiences

Not every user needs to see the same thing. With feature flags, you can show different features to different users based on who they are, where they are, what device they use, or what plan they are on. It helps teams run targeted rollouts, test ideas faster, and personalize the product without needing multiple code versions.

Manage feature entitlements

In the software world, different users often get access to different features. Feature flags help define and manage these entitlements without hardcoding them. Even non-developers can control access for each customer, making it easier to launch new pricing plans or manage multi-tenant environments.

Run experiments and A/B tests

Before launching a feature, you may want to check if it works well. Feature flags allow you to run A/B tests by comparing different feature versions in the real world. You can measure user behavior and business outcomes, and only keep the version that delivers results.

Reduce migration risks

Whether switching cloud providers or moving to the new architecture, migrations are risky. Feature flags help teams shift traffic slowly and test whether things are working fine. You can pause or roll back instantly if anything breaks or performance drops, avoiding downtime and stress.

Set Up Feature Flags in VWO (Step-by-Step Guide)

Prerequisites

Before starting these steps, make sure you have an active VWO account. If not, you can sign up for a 30-day free trial here.

1. Log in to your VWO account.
2. Go to Feature Experimentation > Feature Flags.
3. Click Create.
   
4. Enter the following details:
   1. Name: A clear and descriptive name for your flag.
   2. Description: Briefly explain the purpose and scope of the flag.
   3. Type (Temporary or Permanent):
      • Choose Temporary if you know the flag will be removed relatively soon (e.g., after a new feature is fully launched or an experiment concludes). This type is best for short-term experiments, gradual rollouts, or temporary personalization campaigns.
      • Choose Permanent if the flag is intended to stay in your system as part of your product's ongoing configuration (e.g., controlling access to premium features, managing region-specific compliance settings). Select this when you don't have a planned removal date.
        
5. Create variables for the components of your feature that you want to control directly from the VWO dashboard without deploying new code. For each variable:
   1. Assign a clear Name.
   2. Select the appropriate Type: Boolean (true/false), Text, Number, or JSON (for more complex, dynamic configurations).
   3. Set a Default Value. You'll define alternative values in the next step when creating variations.
      
6. Define different variations of your feature by assigning specific values to the variables you created. Creating variations allows you to:
   • Roll out different feature versions to targeted user groups.
   • Test multiple variations against each other (A/B testing).
   • Personalize user experiences by showing the most relevant variation.
     
7. Choose the metrics you want to track to measure the impact of your feature flag. These can relate to:
   • Business Goals: These include conversions, signups, revenue, etc.
   • Performance/Engagement: This includes bounce rate, time on page, error rates, etc.
     For more information about creating metrics, see Working with Metrics in VWO.
8. Designate a Primary Metric (this will be used for statistical significance calculations if you run an experiment with this flag).
9. Select any relevant Secondary Metrics.
   
   INFO: You can also mark any primary or secondary metric as a Guardrail Metric. Guardrails help you monitor critical metrics during rollouts to ensure the change doesn't negatively impact key areas (e.g., the conversion rate doesn't drop significantly).
   
10. Within your flag's configuration in VWO, go to the API Settings tab.
11. Copy the necessary code snippets and integrate them into your application's codebase, where the feature is controlled. You'll typically need to perform these four actions:
    
    
    • Initialize the VWO SDK: Provide your Account ID and SDK Key.
      

      // Example: Initialize SDK
      
      const options = {
      
          accountId: 'YOUR_ACCOUNT_ID', // Replace with your actual Account ID
      
          sdkKey: 'YOUR_SDK_KEY'        // Replace with your actual SDK Key
      
      };
      
      const vwoClient = await vwo.init(options);
      

    • Set User Context: Identify the current user for VWO. You must provide a unique userID for correct bucketing and targeting. You can also pass custom attributes for segmentation.
      

      // Example: Set User Context
      
      const userContext = {
      
          id: 'unique_user_id', // Replace with the actual unique user identifier
      
          // You can add custom attributes here for targeting:
      
          // planType: 'premium',
      
          // location: 'uk'
      
      };

    • Check Flag Status: Use the flag's key (name) to check if the feature should be enabled for the current user context.
      

      // Example: Get flag status
      
      const featureFlag = await vwoClient.getFlag("your_flag_key", userContext); // Replace with your flag's key
      
      const isFeatureEnabled = featureFlag.isEnabled();
      
      // Use the status to control your application's flow
      
      if (isFeatureEnabled) {
      
          // Show the feature or execute feature-related code
      
      } else {
      
          // Hide the feature or execute alternative code
      
      }

    • Get Variable Values: Retrieve the values of the variables you defined based on the variation assigned to the user. Provide a sensible default value within your code if the SDK can't fetch the value.
      

      // Example: Get a single variable's value
      
      const discountText = featureFlag.getVariable("discounttext", "default text if flag inactive", userContext); // Replace "discounttext" with your variable key
      
      // Use the 'discountText' variable in your UI or logic
      
      // Example: Get all variables associated with the flag as an object
      
      // Iterate over the list to get different variables values
      
      const allVariables = featureFlag.getVariables();

    • (Optional) Track Events & Attributes: Send user actions (events) or update user attributes within the VWO platform for analysis or targeting purposes.

      // Example: Track a custom event
      
      vwoClient.trackEvent('signup_completed', userContext, { method: 'google' }); // eventProperties are optional
      
      // Example: Set/update a custom user attribute
      
      vwoClient.setAttribute('has_completed_onboarding', true, userContext);

      For more information, see Working with Events in VWO.
12. With the flag created in VWO and implemented in your code, return to the VWO dashboard. Configure the targeting rules to control who sees which variation. You can set up:
    • Rollouts: Gradually release the feature to increase the percentage of your users.
    • Experimentation: Define variations and traffic distribution for A/B testing.
    • Personalization: Target specific variations to user segments based on attributes.
13. Activate your rules to start using the feature flag.
    For more information, refer to the steps to set up rules.
    

Use VWO Feature Flags for Dynamic Configuration with JSON Variables

You can use VWO Feature Flags not just for simple on/off toggles but also as a powerful tool for dynamic configuration. This means you can change how parts of your application behave or look without updating and releasing new code.

Here's how you can achieve this using the JSON variable type within a VWO feature flag:

1. Create a Feature Flag: Set up a feature flag as you normally would in VWO. This flag will act as the container for your configuration settings.
2. Add a JSON Variable: When defining variables for this flag, choose the JSON type.
3. Define Your Configuration: Structure your configuration settings inside the value field for this JSON variable. You can include multiple parameters, such as theme settings, feature parameters, text labels, thresholds, etc.
   Example JSON Configuration in VWO:
   

   {
   
     "theme": "dark",
   
     "itemsPerPage": 20,
   
     "showNewFeatureBanner": true,
   
     "apiEndpoint": "https://api.example.com/v2",
   
     "discountPercentage": 15
   
   }

Examples of Feature Flags in Action

Chatbot Model Testing

Onboarding Flow A/B Test

Need more help?

For further assistance or more information, contact VWO Support.