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

# JS Quickstart

The [Frigade JS SDK](https://www.npmjs.com/package/@frigade/js) is a lightweight library that allows you to easily integrate Frigade into any stack that runs Javascript.
Unlike the React SDK, it is completely headless and does not include any UI components. Instead, it provides a simple API that allows you to quickly build
your own components powered by Frigade with any Javascript framework or library.

<Steps>
  <Step title="Install the JS SDK">
    <CodeGroup>
      ```txt npm theme={"system"}
      npm install @frigade/js
      ```

      ```txt yarn theme={"system"}
      yarn add @frigade/js
      ```

      ```txt pnpm theme={"system"}
      pnpm install @frigade/js
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK">
    Simply `import { Frigade }  from '@frigade/js'` and initialize the SDK with your **public API key** from the **Developer** page of the dashboard.

    ```js theme={"system"}
    import { Frigade } from '@frigade/js'

    const frigade = new Frigade('FRIGADE_API_KEY')

    await frigade.identify('USER_ID', {
      name: 'USER_NAME',
      email: 'USER_EMAIL',
      signed_up_at: 'USER_SIGNED_UP_AT' // ISO 8601 format
    })

    // Optional: send organization/group id
    await frigade.group('ORGANIZATION_ID', {
      name: 'COMPANY_NAME',
    })
    ```
  </Step>

  <Step title="Start building with Frigade">
    That's pretty much it! You can now use the Frigade JS SDK. Here's how to get a Flow:

    ```js theme={"system"}
      const flow = await frigade.getFlow('FLOW_ID')
      console.log('Flow status:', flow.isCompleted)

      const currentStep = flow.getCurrentStep();

      /*
      * You'll usually want to ensure that the flow and current step are both
      * marked as "started" when a user sees them.
      */
      await flow.start();
      await currentStep.start();

      /*
      * Handling interaction is easy -- Flows and Steps have built-in methods
      * to update their state.
      */
      async function handleStepComplete() {
        await currentStep.complete();
      }
    ```

    We recommend taking a quick look at the [JS SDK API documentation](./frigade) to get a better understanding of the available methods and how to use them. Also, check out our guide on [building custom components](/guides/custom) for more information on how to build custom experiences with Frigade.
  </Step>
</Steps>