Optimizely Rollouts

The Rollouts Developer Hub

Welcome to the Rollouts developer hub. You'll find comprehensive guides and documentation to help you start working with Rollouts as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

JavaScript (Browser)

Quickstart guide for Optimizely Rollouts

Welcome to the quickstart guide for Optimizely's JavaScript SDK. The instructions below will help you implement Optimizely Rollouts and launch your first feature flag.

This guide will help you:

  1. Install the SDK
  2. Install the datafile
  3. Instantiate Optimizely when your app starts
  4. Create a feature flag
  5. Roll the feature out

1. Install the SDK

The JavaScript SDK can be used in browser and is distributed through npm. Add it to your package with NPM:

npm install --save @optimizely/optimizely-sdk

Or using Yarn:

yarn add @optimizely/optimizely-sdk

We also distribute a prebuilt UMD bundle of the SDK, which allows installing the SDK via an HTML <script> tag:

<script src="https://unpkg.com/@optimizely/optimizely-sdk@3.2.0/dist/optimizely.browser.umd.min.js"></script>

2. Install the datafile

The datafile automatically handles all configuration and updates in your account, including all instructions to run feature flags. Whenever you make a change in Optimizely, the datafile is automatically updated.

Get a copy of the datafile from our server by including the following script in the <head> of your web application. This script adds the datafile on the window variable window.optimizelyDatafile:

<script src="https://cdn.optimizely.com/datafiles/<Your_SDK_KEY>.json/tag.js"></script>

Here's where to find your SDK Key:

  1. Navigate to Settings > Datafile.
  2. Copy the SDK Key / Primary URL.
Click to enlarge.

Click to enlarge.

3. Instantiate the client

We recommend creating an optimizely.js that exports an instantiated Optimizely client. This file can be required anywhere you want to use feature flagging.

// optimizely.js
import optimizelySDK from '@optimizely/optimizely-sdk'

const optimizelyClientInstance = optimizelySDK.createInstance({
  datafile: window.optimizelyDatafile,
})

export default optimizelyClientInstance
  

The optimizely instance can be required and used anywhere that is needed.

import optimizelyClientInstance from './optimizely'

const enabled = optimizelyClientInstance.isFeatureEnabled('new_feature', 'user123');
if (enabled) {
  // Show your feature
}

This is just one way to maintain reference to an Optimizely client. Other options include storing it as a global variable on window or putting it in a Redux store.

4. Create a feature flag

Choose a feature in your app to turn on and off with a feature flag. For your first flag, consider starting with a link or visual element that's simple to change, show, or hide based on a boolean.

To set up your first feature flag, navigate to Features > Create New Feature.

Here's how to set it up:

Click to enlarge.

Click to enlarge.

After saving, use the boolean Is Feature Enabled function to show, hide, or change some visual part of your application. Note: you should see a value of false from this function because you haven't rolled out the feature yet. You'll turn it on in the next step.

import optimizelyClientInstance from './optimizely'

const enabled = optimizelyClientInstance.isFeatureEnabled('new_feature', 'user123');
if (enabled) {
  // Show your feature
}

The userID enables you to create consistent experiences for a user across multiple visits, but you don't need it for this quickstart. Make the userID any non-null string for now.

5. Roll out the feature

Navigate back to Features and select your feature flag.

You'll return to this modal whenever you want to update this feature flag. For example, roll out your feature incrementally by moving the slider up by 10% per day or show it to a certain group of users. Move it to 100% for a big reveal, or 0% if issues arise in production. No code deployment necessary.

Click to enlarge.

Click to enlarge.

A basic way to confirm that your feature flag is working:

Show the feature to yourself

  1. Navigate to your feature.
  2. Toggle it ON and move the slider to 100% traffic. Click Save.
  3. Confirm that you see the feature.

Hide the feature from yourself

  1. Navigate back to the feature.
  2. Toggle it OFF. Click Save.
  3. Confirm that you no longer see the feature.

When you're ready, go ahead and roll out your feature in production. Come back and adjust its configuration any time, without deploying code.


What's Next

Now that you've seen how feature flags work with Optimizely, learn about configuring our SDKs for your development workflow.

Run a beta
Feature flags in production

JavaScript (Browser)


Quickstart guide for Optimizely Rollouts

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.