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

# Installation

> Install and set up the ClickTerm Web SDK in your project.

The ClickTerm Web SDK lets you display clickwrap agreements to end users in your web application. It's distributed as an npm package ([`@clickterm/widget`](https://www.npmjs.com/package/@clickterm/widget)) and as a single JavaScript file loaded via a script tag.

<Note>
  **Latest SDK versions:** Web `2.3.0` · Android `2.2.0` · React Native `0.3.0` — [View changelog](/dev/resources/changelog)
</Note>

## Installation

<Tabs>
  <Tab title="npm">
    ```sh theme={null}
    npm install @clickterm/widget
    ```

    Then import the SDK in your code:

    ```javascript theme={null}
    import { ClicktermClient, ClicktermDialog, ClicktermDom } from "@clickterm/widget";
    ```

    The package ships ESM and CJS builds with bundled TypeScript types.
  </Tab>

  <Tab title="Script tag">
    Add the SDK script tag to your frontend app:

    ```html theme={null}
    <script src="https://unpkg.com/@clickterm/widget"></script>
    <!-- or <script src="https://cdn.jsdelivr.net/npm/@clickterm/widget"></script> -->
    ```

    The script exposes the SDK on the `window.Clickterm` global:

    ```javascript theme={null}
    const { ClicktermClient, ClicktermDialog, ClicktermDom } = window.Clickterm;
    ```
  </Tab>
</Tabs>

<Info>
  Both distributions contain the same SDK. Code samples in these docs use the
  `window.Clickterm` global — if you installed from npm, replace that line with
  the import above.
</Info>

## Initialization

Initialize the SDK with your App ID:

```javascript theme={null}
const { ClicktermClient, ClicktermDialog } = window.Clickterm;
ClicktermClient.initialize("YOUR_CLICKTERM_APP_ID");
```

Get your App ID from the [Integrations page](https://app.clickterm.com/integrations) in the ClickTerm Dashboard.

<Warning>
  Never expose your **App Key** in client-side code. The App Key is used
  only for backend verification calls. The client SDK uses only the **App ID**.
  Store the App Key safely — it won't display again after creation, but can be
  regenerated. Regenerating the key requires updating your backend configuration.
</Warning>

## Verify initialization

After calling `initialize()`, you can immediately use `ClicktermDialog` methods. Without initialization, the SDK will throw an error when requesting a clickwrap.

```javascript theme={null}
// Full setup example
const { ClicktermClient, ClicktermDialog } = window.Clickterm;
ClicktermClient.initialize("YOUR_CLICKTERM_APP_ID");

// Now you can show clickwraps (dialog mode)
ClicktermDialog.show({
  endUserId: "user-123",
  clickwrapTemplateId: "YOUR_TEMPLATE_ID",
}).then((result) => {
  console.log("Result:", result);
});

// Or use inline mode (SDK v2.2.0+)
// See ClicktermDom for details
```

## Requirements

* The template must be **Enabled** in the dashboard
* The template must have at least one published content version in the **Effective** state

## Next steps

<CardGroup cols={2}>
  <Card title="ClicktermClient" icon="gear" iconType="light" href="/dev/sdk/web/clickterm-client">
    Client initialization and configuration.
  </Card>

  <Card title="ClicktermDialog" icon="window-maximize" iconType="light" href="/dev/sdk/web/clickterm-dialog">
    Showing clickwrap dialogs and accepted content.
  </Card>

  <Card title="ClicktermDom" icon="square-check" iconType="light" href="/dev/sdk/web/clickterm-dom">
    Inline clickwrap rendering (v2.2.0+).
  </Card>
</CardGroup>