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

# Installation

> Install, load and initialize Supertab.js on a Website

## Prerequisites

You'll need your Website's `clientId` to initialize Supertab.js. If you haven't created a Website yet, follow the guide [Create Websites](/supertab-experiences/sites) first.

To find your Website's `clientId`, log in to the [Business Portal](https://business.supertab.co/), navigate to Organization / Websites, then click the "..." button next to your Website.

## Quick Start

Choose an installation method based on your setup:

* **Using a bundler** (Webpack, Vite, Rollup, etc.) → [Install from npm](#from-npm)
* **Modern browsers with ES modules** → [CDN with ES Module import](#with-an-es-module-import)
* **Legacy browser support** → [CDN with global loader](#with-the-global-loader)

## From npm

Install Supertab.js from npm for use with bundlers like Webpack, Vite, or Rollup:

```bash theme={null}
npm install @getsupertab/supertab-js
```

Import, load and initialize the client in your application:

<CodeGroup>
  ```javascript async/await theme={null}
  import { loadSupertab } from "@getsupertab/supertab-js";

  (async () => {
      const { Supertab } = await loadSupertab();
      const supertabClient = new Supertab({ clientId: "test_client.X" });
  })();
  ```

  ```javascript .then() theme={null}
  import { loadSupertab } from "@getsupertab/supertab-js";

  loadSupertab().then(({ Supertab }) => {
      const supertabClient = new Supertab({ clientId: "test_client.X" });
  });
  ```
</CodeGroup>

<Note>
  `loadSupertab()` loads the latest compatible Supertab.js version from our CDN. It must be called in a browser environment—it won't work server-side.
</Note>

## Directly from CDN

Load Supertab.js directly from our CDN without a build step. Two options:

### With an ES Module import

Use this method for modern browsers that support ES modules:

```html theme={null}
<script type="module">
    import { Supertab } from "https://js.supertab.co/v3/supertab.js";

    const supertabClient = new Supertab({ clientId: "test_client.X" });
</script>
```

### With the global loader

Use this method for environments without ES module support. The script `supertab.global.js` exposes the global function `window.loadSupertab()`:

<CodeGroup>
  ```html async/await theme={null}
  <script src="https://js.supertab.co/v3/supertab.global.js"></script>
  <script>
      (async () => {
          const { Supertab } = await window.loadSupertab();
          const supertabClient = new Supertab({ clientId: "test_client.X" });
      })();
  </script>
  ```

  ```html .then() theme={null}
  <script src="https://js.supertab.co/v3/supertab.global.js"></script>
  <script>
      window.loadSupertab().then(({ Supertab }) => {
          const supertabClient = new Supertab({ clientId: "test_client.X" });
      });
  </script>
  ```
</CodeGroup>

## Versioning

CDN URLs are versioned. Using `v3` automatically loads the latest `3.x.x` version (patch and minor releases). Breaking changes are released as new major versions.

## Next Steps

Once installed, you can launch experiences or build custom purchase flows:

* [Starting experiences](/supertab-js/experiences/starting-experiences)
* [SDK Overview](/supertab-js/reference/overview)