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

# Quickstart

> From an empty page to a working Libra chat widget

export const sdkVersion = "0.13.0";

## Prerequisites

* A **product ID** for your integration (for example `wko_de`). Every product Libra serves has one; see [Products and sources](/capabilities/products-and-sources).
* For npm installs, a **WK Artifactory token** in `ARTIFACTORY_TOKEN`. For the CDN, nothing.
* Your page must not send `X-Frame-Options: DENY` or `frame-ancestors 'none'`; see step 4.

## Get started

<Steps>
  <Step title="Install the SDK">
    <Tabs>
      <Tab title="npm">
        Add the following to your `.npmrc`. You will need an `ARTIFACTORY_TOKEN` environment variable set to your WK Artifactory token.

        ```
        @libra:registry=https://artifactory.wolterskluwer.io/artifactory/api/npm/libra-expert-ai-npm/
        //artifactory.wolterskluwer.io/artifactory/api/npm/libra-expert-ai-npm/:_authToken=${ARTIFACTORY_TOKEN}
        ```

        ```bash theme={null}
        npm install @libra/sdk
        ```
      </Tab>

      <Tab title="CDN">
        The same released version is promoted to the WK CDN. Replace `<VERSION>` with a release from the [changelog](/changelog); the current one is **{sdkVersion}**.

        ```html theme={null}
        <script type="module">
          import { Libra } from 'https://cdn.wolterskluwer.io/wk/libra-sdk/<VERSION>/libra.js';

          Libra.init({
            productId: 'wko_de',
            onClose: () => Libra.detach()
          });
        </script>
        ```

        A classic script tag works too; see [Installation](/guides/installation).
      </Tab>
    </Tabs>
  </Step>

  <Step title="Give the widget a place to live">
    The SDK positions its iframe over an element you own. Size that element however your layout needs: a side panel, a modal, a fixed corner.

    ```html theme={null}
    <button id="open-chat">Open Chat</button>
    <div id="chat" style="position: fixed; right: 16px; bottom: 16px; width: 400px; height: 600px;"></div>
    ```
  </Step>

  <Step title="Initialise once, attach when the user opens the chat">
    ```javascript theme={null}
    import { Libra } from '@libra/sdk';

    Libra.init({
      productId: 'wko_de',
      onClose: () => {
        Libra.detach();
      }
    });

    document.getElementById('open-chat').addEventListener('click', () => {
      Libra.attach('chat');
    });
    ```

    `init()` creates the iframe but makes **no network requests**. The chat session starts on the first `attach()`. Providing `onClose` gives the widget a Libra headbar with a close button; the callback hides your container and calls `Libra.detach()`.
  </Step>

  <Step title="Allow the SDK's own iframe in your security headers">
    The chat renders in a `blob:` iframe generated by your page. Safari applies your page's framing CSP to it, so SDK-enabled pages must allow it:

    ```
    Content-Security-Policy: frame-ancestors 'self'; frame-src 'self' blob:
    X-Frame-Options: SAMEORIGIN
    ```

    Details, including the microphone permission for voice input, are in [Security headers](/guides/security-headers).
  </Step>
</Steps>

<Check>
  Click **Open Chat**. The widget signs the user in through an Auth0 popup (or a **Create account** flow for new users), then renders the chat. The conversation, scroll position and any in-progress answer survive `detach()` / `attach()` cycles.
</Check>

## Next steps

<CardGroup cols={2}>
  <Card title="How it works" icon="layout-template" href="/getting-started/how-it-works">
    Lifecycle, isolation and session persistence, in two minutes.
  </Card>

  <Card title="Embedding" icon="plug" href="/guides/embedding">
    Header ownership, stacking context, SPA route changes.
  </Card>

  <Card title="Authentication" icon="key-round" href="/guides/authentication">
    Auth events, account gating, sign-out; or route everything through your own BFF with proxy mode.
  </Card>

  <Card title="Playground" icon="flask-conical" href="/getting-started/playground">
    Exercise every API call against staging without writing code.
  </Card>
</CardGroup>