JavaScript SDK Documentation

The guide will walk you through the installation and usage of the Floodgate JavaScript SDK.


Table of contents

Getting started

The first step is to install the Floodgate SDK as a dependency in your application using your application's dependency manager.

npm i floodgate-javascript-sdk

Next import the package into your application.

import * as floodgate from "floodgate-javascript-sdk";

// or

const floodgate = require('floodgate-javascript-sdk');

Via CDN

Alternatively you can use the SDK via the CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/floodgate.min.js"></script>

Now you have the Floodgate SDK installed and imported you can create a new instance of the Floodgate Client.

const floodgateClient = floodgate.createClient("ENTER-YOUR-API-KEY");

Evaluating a Flag

Using the floodgateClient object you can now evaluate a flag using the GetValue method. The GetValue method requires two parameters with an optional third.

# Parameter Description
1 Key (required) This is the Flag Key which you entered when creating the flag.
2 Default Value (required) This is the value which you want the flag to evaluate to if no flag data can be found.
3 User Object (optional) This is an optional value which can be passed containing information about the user. This information is required to evaluate flags when doing user targeting or percentage rollout releases.

The example below shows an evaluation of a flag called buy-now-button-colour passing in a default value of orange. We are then going to dynamically change the background colour of a button with the Id of buy-now.

client.on('ready', function() {
  const colour = floodgateClient.GetValue('buy-now-button-colour', 'orange');
  document.getElementById('buy-now').style.backgroundColor = colour;
});

Customising the Floodgate Client

The Floodgate Client offers the following customisation options to help with your implementation.

Option Description
refreshInterval The Floodgate Client stores and evaluates your flag configurations locally. From time-to-time the client will request an update from the server to make sure it always has the most up-to-date flag configuration data. By default this happens every 60 seconds. You can override this value using the RefreshInterval setting. The RefreshInterval expressed in seconds.

In the example below we are setting the RefreshInterval to 5 seconds.

const config = {
  refreshInterval: 10
};
const floodgateClient = floodgate.createAutoUpdateClient("ENTER-YOUR-API-KEY", config);

Targeting users with the User Object

User targeting is a key aspect of getting the most benefit out of using feature flags. By defining users we are able to take advantage of features like user targeting and percentage rollouts (canary releases).

User Object

Property Type Description
User Id (required) string Every user is required to be assigned a unique id. This could be a database id or the users email address for example. Session IDs or UUIDs are suited best.
Email (optional) string You can optionally set the users email address if you would like to evaluate against specific users emails.
Custom Attributes (optional) Json Each user can have any number of custom attibutes assigned to them. This is a very powerful feature of Floodgate as it gives you the flexability to evaluate flags against any data element that may belong to your users.

Below is an example of creating a Floodgate User Object.

const customAttributes = {
  name: "Peter Parker",
  subscription: "Gold",
  country: "UK",
  role: "Admin"
};

const user = floodgate.createUser("a-unique-id", "[email protected]", customAttributes);

Once we have created the User Object we can pass this into the GetValue method to have the flag evaluated specifically for the user as shown below.

const colour = floodgateClient.GetValue('buy-now-button-colour', 'orange', user);

View the code

All our SDKs are open source and you are free to check out what's going on inside them. In fact we encourage contributions from the Floodgate community. You can view the source code on GitHub.