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

# Quickstart

> Install the SDK, call init() with your API key, track your first funnel step, and turn on pageviews. Setup takes about five minutes.

Install the SDK, initialize it with your API key, track your first funnel step, and turn on pageview tracking for web analytics. Grab your publishable key from [Settings → API Keys](/help/settings#api-keys) before you start.

## Install the SDK

Install `@wendung/sdk` from npm using your preferred package manager.

<CodeGroup>
  ```bash npm theme={null}
  npm install @wendung/sdk
  ```

  ```bash yarn theme={null}
  yarn add @wendung/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @wendung/sdk
  ```
</CodeGroup>

No build step? Add one script tag instead. It initializes the SDK from its attributes, so you can skip the next section and call `Wendung.step()` from plain HTML. See the [script tag guide](/guides/script-tag).

```html theme={null}
<script
  defer
  src="https://cdn.wendung.app/sdk/v0/wendung.js"
  data-api-key="pk_your_publishable_key"
  data-track-pageviews
></script>
```

You can also use `https://cdn.wendung.app/sdk/latest/wendung.js` to receive every SDK release automatically, including new major versions. See [versions and caching](/guides/script-tag#versions-and-caching) to compare `latest`, `v0`, and pinned versions.

## Initialize the SDK

Import `Wendung` and call `init()` once when your application boots. `apiKey` is required. Every project comes with a **Default** key, and you can find it under [Settings → API Keys](/help/settings#api-keys): use the reveal or copy button next to the masked key.

```ts theme={null}
import { Wendung } from '@wendung/sdk'

Wendung.init({
  apiKey: 'pk_your_publishable_key'
})
```

<Warning>
  `init()` is browser-only: call it and all tracking methods from client-side code. In Next.js, use a Client Component. See the [Next.js guide](/guides/nextjs) for the recommended `<WendungProvider>` pattern.
</Warning>

<Warning>
  Full analytics uses visitor and session identifiers in browser storage. Start with `consent: 'pending'` and apply the visitor's choice through `setConsent()`. The example below sends nothing while pending. If you also want aggregate pageviews before the choice, add `trackPageviews: 'auto'`. See the [consent guide](/guides/consent) for the setup and collection limits.

  ```ts theme={null}
  Wendung.init({
    apiKey: 'pk_your_publishable_key',
    consent: 'pending',
  })
  ```
</Warning>

<Tip>
  Pass `debug: true` during development to log SDK lifecycle messages. Warnings are logged regardless of this setting.

  ```ts theme={null}
    Wendung.init({
      apiKey: 'pk_your_publishable_key',
      debug: true,
    })
  ```
</Tip>

## Identify the user

Once the user is known, usually after login, call `identify()` to attach all subsequent events to them. The traits you pass are included with every event that follows.

```ts theme={null}
Wendung.identify('user_123', {
  email: 'alice@example.com',
  plan: 'pro',
})
```

The identity is saved in the browser and restored by `init()`, so a reload keeps the user identified. Each `identify()` call replaces it wholesale, traits included, so pass the full trait set every time. Call `reset()` on logout to clear it.

## Track your first funnel step

Call `step()` with a step name (1–100 characters, matching a step in one of your funnels) and an optional properties object. The event is queued immediately and sent with the next flush.

```ts theme={null}
Wendung.step('signup_completed', {
  plan: 'pro',
  source: 'google_ads',
})
```

<Warning>
  A new project rejects events from every origin with a `403` until you allow one, `localhost` included. Add your production origin under [Settings → Allowed origins](/help/settings#allowed-origins), and turn on [Dev mode](/help/settings#dev-mode) to test locally for 24 hours.
</Warning>

## Turn on pageview tracking

Funnels come from the steps you name. Web analytics comes from pageviews, and the SDK records those for you once you opt in:

```ts theme={null}
Wendung.init({
  apiKey: 'pk_your_publishable_key',
  trackPageviews: true,
})
```

The SDK records a pageview on load and on every client-side navigation. Then open **Sites** in the dashboard and register your hostname; that is where visitors, sessions, pages, and sources show up. The [web analytics guide](/guides/web-analytics) covers path rules and the rest.

<Note>
  Pageviews use their own monthly allowance, separate from events, and the free plan has none. See [Plans and limits](/help/plans#monthly-pageviews).
</Note>

## Flushing happens automatically

You don't need to manage flushing yourself. The SDK sends queued events:

* Every 5 seconds, on a timer
* As soon as the queue hits the batch size (default 50 events)
* On page hide, draining the whole queue with `fetch` and `keepalive: true` so requests survive the tab closing

If you need a send attempt at a specific moment (for example, right before a hard navigation in a custom flow), call `await Wendung.flush()`. It sends at most one batch per call and never rejects.

## Set up your agent

Drop this prompt into your AI coding agent and let it guide you through the setup:

```text Prompt theme={null}
Read https://docs.wendung.app/setup.md and follow it to set up Wendung in this project.
```

To connect your agent to your live data as well, see [Agent setup](/agents).

## What's next

Now that events are flowing, head back to the dashboard. Create a funnel from the step names you track, and open your site under **Sites** for traffic.

<CardGroup cols={3}>
  <Card title="Create your first funnel" icon="chart-line" href="/guides/funnels">
    Turn the step names you're tracking into a funnel in the dashboard.
  </Card>

  <Card title="Set up web analytics" icon="eye" href="/guides/web-analytics">
    Register your site, clean up paths, and read the site dashboard.
  </Card>

  <Card title="Next.js integration" icon="react" href="/guides/nextjs">
    The recommended setup pattern for App Router and Pages Router.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.