> ## Documentation Index
> Fetch the complete documentation index at: https://launchdarkly.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Using the JavaScript SDK in Salesforce Lightning Web Components

This guide explains how to configure your Salesforce environment to use the LaunchDarkly JavaScript or React Web client-side SDKs in Lightning Web Components (LWCs).

Salesforce Lightning Web Components are an implementation of standard web components that allow you to leverage HTML, CSS, and JavaScript in a lightweight framework. To learn more, read [Introducing Lightning Web Components](https://developer.salesforce.com/docs/component-library/documentation/en/lwc).

The example code in this guide is extracted snippets. We show it here as if it is being used in a JavaScript class.

## Prerequisites

To complete this guide, you must have the following prerequisites:

* Basic working knowledge of the LaunchDarkly [JavaScript client-side SDK](/docs/sdk/client-side/javascript) or [React Web client-side SDK](/docs/sdk/client-side/react/react-web)
* Basic working knowledge of [Salesforce Lightning Web Components](https://developer.salesforce.com/docs/component-library/documentation/en/lwc)

## Download the LaunchDarkly JavaScript Client

To begin, find the latest version under [Releases](https://github.com/launchdarkly/js-client-sdk/releases) in the JavaScript SDK GitHub repository. Then download the desired version from `https://unpkg.com/launchdarkly-js-client-sdk@<VERSION>/dist/ldclient.min.js`.

## Set up your Salesforce environment

Next, set up your Salesforce environment. To do this:

1. Upload the file to your Salesforce organization as a static resource in your org
2. [Enable Lightning Web Security](https://developer.salesforce.com/docs/platform/lwc/guide/security-lwsec-intro.html) in your org
3. Add `https://*.launchdarkly.com` as a CSP Trusted Site, under [Manage CSP Trusted Sites](https://help.salesforce.com/s/articleView?id=sf.csp_trusted_sites.htm\&type=5)

## Using the LaunchDarkly client in a Lightning Web Component

In the JavaScript file of your Lightning Web Component, import the static resource:

```js title="Import LaunchDarkly client" lines wrap theme={null}
import ldclient from '@salesforce/resourceUrl/ldclient';

```

Then, load the imported script for usage in the file, using the Lightning Web Component [Platform Resource Loader](https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-resource-loader/documentation):

```js title="Load script" lines wrap theme={null}
Promise.all([
	loadScript(this, ldclient)
])
.then(() => {
// Post Script Load Code Here
})

```

Finally, initialize the LaunchDarkly client:

```js title="Initializing LaunchDarkly client" lines wrap theme={null}
const context = {
  kind: 'user',
  key: 'example-context-key'
};
this.LDClient = ldclient.initialize('example-client-side-id', context);

try {
  await this.LDClient.waitForInitialization(5)
  // initialization succeeded,
  // flag values are now available through the client
} catch (err) {
  // initialization failed or did not complete before timeout
}

```

You can access the flag value using a JavaScript `getter` method:

```js title="Example flag getter method" lines wrap theme={null}
get exampleFlag() {
    return await this.LDClient.variation['example-flag-key', false];
}


```

To learn more, read [LWC Data Binding](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter.html).
You can then use HTML to allow feature flags to control your user interface (UI) display.

Here is an example of an LWC HTML snippet:

```html title="LWC HTML snippet" lines wrap theme={null}
<template if:true={exampleFlag}>
     Flag evaluation is TRUE
</template>
<template if:false={exampleFlag}>
     Flag evaluation is FALSE
</template>

```

## Conclusion

In this guide, we discussed how to use the LaunchDarkly JavaScript and React Web client-side SDKs in Lightning Web Components. This allows you to leverage HTML, CSS, and JavaScript in a lightweight framework.

<View title="Developer">
  > [!NOTE]
  >
  > **Want to know more? Start a trial.**
  >
  > Your 14-day trial begins as soon as you sign up. Get started in minutes using the in-app Quickstart. You'll discover how easy it is to release, monitor, and optimize your software.\
  > \\
  >
  > Want to try it out? [Start a trial](https://app.launchdarkly.com/signup).
</View>

<View title="Federal docs" />

<View title="EU docs" />