> ## 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

> Prepare your project, initialize the SDK with your consent settings, track your first funnel step, and optionally enable pageviews.

Install the SDK and track your first funnel step. Add pageview tracking if you also want web analytics.

## Before you start

* Create a workspace and project in the [dashboard](https://dashboard.wendung.app), then copy the project's publishable key (`pk_...`) from [Settings → API Keys](/help/settings#api-keys).
* Add your production origin under [Settings → Allowed origins](/help/settings#allowed-origins). For local testing, enable [Dev mode](/help/settings#dev-mode) for 24 hours. A new project rejects every origin with `403` until you allow one, including localhost.
* Choose how your app supplies the visitor's [analytics consent](/guides/consent). Pageviews are optional and need a plan with a [pageview allowance](/help/plans#monthly-pageviews); the free plan has none.

## 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? Follow the [script tag guide](/guides/script-tag) instead. The tag initializes the SDK from its attributes, including consent and pageview settings, so skip the module initialization below.

## Initialize the SDK

Import `Wendung` and call `init()` once when your application boots in the browser. Only `apiKey` is required. Keep the optional settings in this same call:

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

Wendung.init({
  apiKey: 'pk_your_publishable_key',
  consent: 'pending', // Use the saved visitor choice when available.
  trackPageviews: false, // Optional: true or 'auto' for web analytics.
  debug: false, // Optional: true during development.
})
```

<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>

This example sends nothing while consent is pending. Connect your consent manager to [`setConsent()`](/api-reference/set-consent) to apply `granted` or `denied`, and pass its saved choice to `init()` on later loads. The SDK does not store the choice. If you omit `consent`, it defaults to `granted` and full analytics uses browser identifiers.

The `identify()` and `step()` examples below require granted consent. Calls made while pending are dropped, with no replay; identify an already signed-in user again after consent is granted. See the [consent guide](/guides/consent) for the complete wiring.

Set `debug: true` in the same configuration during development to log SDK activity. Warnings are logged regardless of this setting.

## 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',
})
```

## Optional: turn on pageview tracking

Funnels come from the steps you name. Web analytics comes from pageviews. Choose a `trackPageviews` value in your existing initialization above:

* `true` records full pageviews only after consent is granted.
* `'auto'` records aggregate pageviews while consent is pending, then full pageviews after consent is granted. Aggregate pageviews contain no visitor or session identifiers.

Denied consent stops collection in either mode. When collection is active, the SDK records the initial page and client-side navigation. Open **Sites** in the dashboard and register your hostname for site reports. The [web analytics guide](/guides/web-analytics) covers path rules and the rest.

## 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` to attempt delivery during unload

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.

## Optional: let an agent add the SDK

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 query your analytics from an agent, connect the MCP servers through [Agent setup](/agents). That connection is separate from adding the SDK to your app.

## 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.