> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components/openfeature-providers/web-sdk.md).

# OpenFeature Provider for Web SDK

Integrate your web applications with Harness FME using the Web OpenFeature Provider, a standardized, vendor-agnostic feature flagging API. This provider implements the OpenFeature specification and bridges the OpenFeature SDK with the Harness FME Browser SDK.

This page walks you through installing, configuring, and using the Web OpenFeature provider to evaluate feature flags in your web applications.

### Before you begin <a href="#before-you-begin" id="before-you-begin"></a>

Before you begin, ensure you have the following:

* A valid [Harness FME SDK key](/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components.md#api-keys) for your project
* A modern browser environment that supports ES6 modules
* Access to `npm` or `yarn` to install dependencies

### Version compatibility <a href="#version-compatibility" id="version-compatibility"></a>

| Component                                        | Minimum Version |
| ------------------------------------------------ | --------------- |
| Browser SDK (`@splitsoftware/splitio-browserjs`) | ≥ 1.0.0         |
| `@splitsoftware/openfeature-web-split-provider`  | ≥ 1.0.0         |
| OpenFeature Web SDK                              | ≥ 1.0.0         |

### Install the provider and dependencies <a href="#install-the-provider-and-dependencies" id="install-the-provider-and-dependencies"></a>

Install the Harness FME OpenFeature provider and required peer dependencies:

```bash
npm install @splitsoftware/openfeature-web-split-provider
npm install @splitsoftware/splitio-browserjs
npm install @openfeature/web-sdk
```

### Initialize the provider <a href="#initialize-the-provider" id="initialize-the-provider"></a>

Register the Harness FME OpenFeature provider by using a `SplitFactory` instance.

For example:

```javascript
import { OpenFeature } from '@openfeature/web-sdk';
import { SplitFactory } from '@splitsoftware/splitio-browserjs';
import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider';

const splitFactory = SplitFactory({
  core: {
    authorizationKey: '<YOUR_CLIENT_SIDE_SDK_KEY>' 
    key: '<TARGETING_KEY>'
  }
});
const provider = new OpenFeatureSplitProvider(splitFactory);

// Wait for the default SDK client for '<TARGETING_KEY>' to be ready
await OpenFeature.setProviderAndWait(provider);
```

### Construct an evaluation context <a href="#construct-an-evaluation-context" id="construct-an-evaluation-context"></a>

Provide an evaluation context with a targeting key to evaluate flags. The evaluation context passes targeting information such as user IDs, email addresses, or plan types for flag targeting.

For example:

```javascript
const context: EvaluationContext = {
  targetingKey: '<TARGETING_KEY>',
  trafficType: 'account'
};
await OpenFeature.setContext(context)
```

### Evaluate with details <a href="#evaluate-with-details" id="evaluate-with-details"></a>

Use the `get*Details(...)` APIs to get flag values and metadata (such as variant, reason, error code, and configuration). The FME treatment configuration is returned as a raw JSON string under `flagMetadata["config"]`.

For example:

```javascript
const booleanTreatment = client.getBooleanDetails('boolFlag', false);
const config = booleanTreatment.flagMetadata.config;
```

### Evaluate with attributes <a href="#evaluate-with-attributes" id="evaluate-with-attributes"></a>

To include user or session attributes in flag evaluations, define them in the evaluation context before calling the evaluation methods.

For example:

```javascript
const context = {
  targetingKey: '<TARGETING_KEY>',
  trafficType: 'account',
  plan: 'premium',
  coupon: 'WELCOME10'
};

await OpenFeature.setContext(context);
const booleanTreatment = client.getBooleanDetails('boolFlag', false);
```

### Track events <a href="#track-events" id="track-events"></a>

The Harness FME OpenFeature provider supports tracking user actions or conversion events directly from your web application.

To enable event tracking, your evaluation context must include the following:

* A non-empty `targetingKey`
* A [`trafficType`](/feature-management-experimentation/management-and-administration/traffic-types.md) (for example, `"user"` or `"account"`)
* A non-blank event name

Optionally, you can include a numeric value (defaults to 0) and additional event properties (prefers primitives such as string, number, boolean, or null). For more information, see [Sending Events](/feature-management-experimentation/management-and-administration/api-best-practices/events.md#event-record-fields).

For example:

```javascript
const context = { targetingKey: 'user-123', trafficType: 'account' }
const details = { value: 19.99, properties: { plan: 'pro', coupon: 'WELCOME10' }}

await client.setContext(context)
client.track('checkout.completed', details)
```

For more information, go to the [Harness FME Web OpenFeature Provider GitHub repository](https://github.com/splitio/split-openfeature-provider-web-js).