> ## Documentation Index
> Fetch the complete documentation index at: https://launchdarkly-preview.mintlify.site/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).

> For the complete documentation index, see [llms.txt](/llms.txt). For the full documentation snapshot, see [llms-full.txt](/llms-full.txt).

## Overview

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](/sdk/client-side/javascript) or [React Web client-side SDK](/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 Launch

Darkly JavaScript ClientTo 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 Launch

Darkly client in a Lightning Web ComponentIn the JavaScript file of your Lightning Web Component, import the static resource:

<CodeGroup>
  ```js title="Import LD client" theme={null}
      import ldclient from '@salesforce/resourceUrl/ldclient';

  ```
</CodeGroup>

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):

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

  ```
</CodeGroup>

Finally, initialize the LaunchDarkly client:

<CodeGroup>
  ```js title="Initializing LaunchDarkly client" 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
      }

  ```
</CodeGroup>

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

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

  ```
</CodeGroup>

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:

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

  ```
</CodeGroup>

## 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.