Create a feature flag

Here's how to create a feature flag, with detailed steps listed below:

1. In your Full Stack project, click Feature Flags.

2. Click New Feature Flag...

3. Enter a name for your feature flag and a description.

4. Configure your feature flag by specifying the variable keys, types, and default values.
   
   Title of the modal: String
   Body copy in the modal: String
   Hyperlink to landing page: String
   Color of CTA button: String
   Discount amount: Double or Integer
   
   For each of these variables, you choose a default value.
   
   

5. Click Save.

Default values for features

Just like with live variables, the default values you specify for feature variables are the value that will be returned if the app user is not in a variation of an A/B test. Default values will be returned if:

• The feature isn’t added to a running A/B test or to a rollout

• The user doesn’t meet the audience conditions for an A/B test using the feature

• The user is excluding according to traffic allocation

Feature flags in code

There are two main questions developers will have about feature flags:

• Is the feature enabled for an app user?

• What are the values of the variables contained within the feature?

A feature is “enabled” if the app user meets audience conditions and traffic allocation for an A/B test (or rollout) using the feature. If not, the feature is disabled, and you’ll get the default values if you try to return variables within the feature.

var enabled = optimizely.isFeatureEnabled('offer_discount_modal', userId);

The variable enabled will contain a boolean: true if the feature is enabled for the user and false if not. If your feature requires an audience condition to be enabled, pass your attributes in like this:

var enabled = optimizely.isFeatureEnabled('offer_discount_modal', userId, {'attributes':'values'});

Here's how to retrieve the values for each variable:

var title = optimizely.getFeatureVariableString('offer_discount_modal', 'title', userId);
var body = optimizely.getFeatureVariableString('offer_discount_modal', 'body', userId);
var cta_href = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_href', userId);
var cta_color = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_color', userId);
var discount_value = optimizely.getFeatureVariableString('offer_discount_modal', 'discount_value', userId);

Just like with isFeatureEnabled, you have to provide your attributes if an audience condition is required for the feature.

Example feature code usage

Suppose you’re a developer who created a function showDiscountOfferModal() that shows the discount modal if an app user is eligible. Here’s how you might use the code examples listed above:

var enabled = optimizely.isFeatureEnabled('offer_discount_modal', userId, {'attributes':'values'});
if (enabled) {
   showDiscountOfferModal();
}
function showDiscountOfferModal() {
   var title = optimizely.getFeatureVariableString('offer_discount_modal', 'title', userId);
   var body = optimizely.getFeatureVariableString('offer_discount_modal', 'body', userId);
   var cta_href = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_href', userId);
   var cta_color = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_color', userId);
   var discount_value = optimizely.getFeatureVariableString('offer_discount_modal', 'discount_value', userId);
   
   var template = [
     "<div id='myModal'>",
       "<p>"+title+"</p>",
       "<p>"+body+"</p>",
       "<a style='background:"+cta_color+"' href='"+cta_href+"'>Get discount!</a>",
       "<p>"+discount_value+" off!</p>"
     "</div>"
   ].join("");
   jQuery("body").append(template);
}

Create a rollout

Here's how to create a rollout, with step-by-step instructions below:

In your Full Stack project, click Rollouts.

1. Click New Rollout...

2. Choose the feature you want to roll out and enter a description for the rollout if desired.

3. Specify the rules for the rollout: the percentage of app users who should have the feature enabled.

To target the rollout by audience, add an audience to it. Define different experiences for each audience by changing the variable values and percentage of users in the audience who should have the feature enabled.

Update rollout rules

You may want to enable a new feature for only a small percentage of users and slowly increase that amount over time. To increase the portion of users who experience a feature:

1. Navigate to Rollouts and click the rollout you want to change.

2. Under Rollout Rules, update the percentage.

3. Click Save.