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

# Quickstart

> Get attention data flowing in under five minutes.

## Install the SDK

<CodeGroup>
  ```bash npm theme={null}
  npm install @onlook/core
  ```

  ```bash pnpm theme={null}
  pnpm add @onlook/core
  ```

  ```bash yarn theme={null}
  yarn add @onlook/core
  ```
</CodeGroup>

## Initialize

Call `track()` once per session. Pass a user identifier and optional config.

```ts theme={null}
import { track } from '@onlook/core'

const session = track(userId, {
  context: 'dashboard',   // label for this surface
  threshold: 40,          // score below which interventions fire
})
```

## Listen for score changes

```ts theme={null}
session.on('score', ({ score, delta }) => {
  console.log(`Attention: ${score} (${delta > 0 ? '+' : ''}${delta})`)
})

session.on('drop', ({ score }) => {
  // score fell below threshold
  showNudge(userId)
})
```

## Stop tracking

Call `stop()` when the user navigates away or the session ends.

```ts theme={null}
session.stop()
```

## Next steps

<CardGroup cols={2}>
  <Card title="Attention scoring" icon="chart-line" href="/concepts/attention-scoring">
    Learn how the 0–100 score is computed.
  </Card>

  <Card title="SDK reference" icon="code" href="/sdk/overview">
    Full API surface of @onlook/core.
  </Card>

  <Card title="Webhooks" icon="webhook" href="/api/webhooks">
    Push score events to your backend.
  </Card>

  <Card title="Self-hosting" icon="server" href="/self-hosting">
    Run the ingest and scoring layer yourself.
  </Card>
</CardGroup>