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

# Browser tracking quickstart

> Capture a Biqli click and send your first browser-side conversion.

The browser SDK reads `bq_id` from the destination URL, stores it in a first-party cookie, and uses it when you track a lead or sale.

The core package is framework-independent. Use it from Vue, Svelte, Angular, Astro client code, or plain browser JavaScript. React applications can use the dedicated provider and hook.

## Before you start

* Create a Biqli short link and enable conversions on that link.
* Open **Workspace settings -> Tracking**.
* Enable conversion tracking.
* Add your website hostname.
* Generate and save a publishable key beginning with `biqli_pk_`.

<Steps>
  <Step title="Install the package">
    ```bash theme={null}
    npm install @biqli/analytics
    ```
  </Step>

  <Step title="Initialize the SDK once">
    ```ts theme={null}
    import {BiqliAnalytics} from '@biqli/analytics';

    export const biqli = new BiqliAnalytics({
      publishableKey: 'biqli_pk_xxxxxxxxx',
      attributionModel: 'last-click',
      cookieOptions: {expiresInDays: 90},
    });
    ```
  </Step>

  <Step title="Visit the short link">
    Open the conversion-enabled short link in a clean browser session. Its destination URL should include `bq_id`.

    Confirm the SDK captured it:

    ```ts theme={null}
    console.log(biqli.getClickId());
    ```
  </Step>

  <Step title="Track a lead">
    ```ts theme={null}
    await biqli.trackLead({
      eventId: `signup:${customer.id}`,
      eventName: 'Signed up',
      customerExternalId: customer.id,
      customerName: customer.name,
      customerEmail: customer.email,
    });
    ```
  </Step>
</Steps>

You do not need to pass `clickId` when the SDK already captured it. You may pass it explicitly when your application has a known eligible click.

## Track a browser-side sale

```ts theme={null}
await biqli.trackSale({
  customerExternalId: customer.id,
  amount: 4999,
  currency: 'usd',
  paymentProcessor: 'custom',
  invoiceId: order.id,
});
```

Use [server tracking](/developers/server/quickstart) when a trusted backend or payment webhook can confirm the event. A browser request can be blocked or interrupted when a tab closes.

## Verify the result

1. Deploy the page publicly.
2. Select **Verify** beside its hostname in Tracking settings.
3. Complete a test journey through the short link.
4. Open **Customers** and confirm the click and lead appear under the expected link.

<Warning>
  Browser code must use only a `biqli_pk_...` publishable key. Never expose a `biqli_...` workspace API key.
</Warning>