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

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

  ```
</CodeGroup>

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

<CodeGroup>
  ```js title="Example flag getter method" lines wrap 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" lines wrap 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.

<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.<br /><br />

    Want to try it out? <a href="https://app.launchdarkly.com/signup">Start a trial</a>.
  </Note>
</View>

<View title="Federal docs" />

<View title="EU docs" />