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

# Script Tag Setup

> Add Milana to any website with a script tag.

<Steps>
  <Step title="Get your Product ID and Client Key">
    Open your [Milana Settings](https://app.getmilana.ai/settings) page.

    Copy your **Product ID** (starts with `prd_`) and your **Client Key** (starts with `key_`).
  </Step>

  <Step title="Add the SDK snippet">
    Add the following to the `<head>` of every page you want to record. Replace `YOUR_PRODUCT_ID` and `YOUR_CLIENT_KEY` with your values.

    ```html theme={null}
    <script>
      window._milanaQueue = window._milanaQueue || [];
      function Milana() { window._milanaQueue.push([].slice.call(arguments)); }
    </script>
    <script async src="https://cdn.getmilana.ai/milana.js"></script>
    ```

    The first `<script>` block creates a queue function. You can call `Milana(...)` immediately — commands are buffered and replayed once the SDK loads.

    <Note>
      If your site sends a `Content-Security-Policy` header, allow `https://cdn.getmilana.ai` in `script-src` so the SDK can load and `https://in.getmilana.ai` in `connect-src` so it can send events. The queue snippet above is an inline `<script>`, so `script-src` must also include `'unsafe-inline'` or a nonce.
    </Note>
  </Step>

  <Step title="Initialize recording">
    Call `Milana("init", ...)` when you want to start recording:

    ```html theme={null}
    <script>
      Milana("init", "prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY", {
        environment: "production",
        version: "1.0.0",
      });
    </script>
    ```

    <Note>
      Your Client Key is a public identifier meant to be included in client-side code. It does not grant access to your data.
    </Note>
  </Step>

  <Step title="Identify users">
    When user information is available, call `Milana("identify", ...)` to attach their identity to the session:

    ```javascript theme={null}
    Milana("identify", {
      userId: "usr_12345",
      email: "jane@example.com",
      name: "Jane",
      metadata: {
        createdAt: "2024-03-15T00:00:00Z",
      },
    });
    ```

    You can also update session-level metadata at any time:

    ```javascript theme={null}
    Milana("updateSession", {
      metadata: {
        experiment: "checkout-v2",
      },
    });
    ```
  </Step>

  <Step title="Verify in the dashboard">
    Open the [Integration](https://app.getmilana.ai/integration) page. Within a few seconds of loading a page with the SDK, a new session should appear under **Latest Sessions**.

    If you don't see sessions after a minute:

    * Open the browser console and look for `Milana:` log messages
    * Confirm you see `Milana: Ready` in the console
    * Check that your Product ID starts with `prd_` and your Client Key starts with `key_`
    * See the [Troubleshooting](/troubleshooting) guide for more help
  </Step>
</Steps>

***

## Full page example

```html theme={null}
<!DOCTYPE html>
<html>
<head>
  <!-- Milana SDK -->
  <script>
    window._milanaQueue = window._milanaQueue || [];
    function Milana() { window._milanaQueue.push([].slice.call(arguments)); }
  </script>
  <script async src="https://cdn.getmilana.ai/milana.js"></script>
  <script>
    Milana("init", "prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY", {
      environment: "production",
      version: "1.0.0",
    });
  </script>
</head>
<body>
  <!-- your page content -->
</body>
</html>
```

***

## Available commands

All commands use the `Milana("command", ...)` queue syntax:

```javascript theme={null}
// Initialize recording
Milana("init", productId, clientKey, sessionInfo, options?);

// Update user identity or session metadata
Milana("update", { user: { ... }, session: { ... } });

// Track a custom event
Milana("trackEvent", "event_name", { key: "value" });

// Enable recording inside a cross-origin iframe
Milana("initCrossOriginIframe");
```

***

## Debug mode

Debug mode is controlled from `localStorage`. Run this in your browser console and reload the page:

```javascript theme={null}
localStorage.setItem("milana_debug_mode", "true");
```

API calls will be logged as `Milana [debug]: ...` messages. To disable:

```javascript theme={null}
localStorage.removeItem("milana_debug_mode");
```

Reload the page after changing the setting.

***

## What's next

<CardGroup cols={2}>
  <Card title="Track custom events" icon="bolt" href="/sdk/track-events">
    Mark important actions so the AI can surface them in query results.
  </Card>

  <Card title="Privacy controls" icon="shield" href="/sdk/privacy">
    Block, mask, or ignore sensitive elements in recordings.
  </Card>
</CardGroup>
