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

# Installation

> How to install the Analytiq SDK.

The Analytiq SDK is designed to be lightweight, zero-dependency, and environment-agnostic.

## Using NPM / Yarn / PNPM (Recommended)

This is the recommended approach for any modern JavaScript application using a bundler (Vite, Next.js, Webpack, etc.).

```bash theme={null}
npm install analytiq
# or
yarn add analytiq
# or
pnpm add analytiq
```

### Import Paths

Analytiq exports two entry points depending on your framework:

1. **The React Hook:** Used strictly once in your root component for automatic setup (React & Next.js only).
   ```javascript theme={null}
   import { useAnalytiq } from 'analytiq/react';
   ```

2. **The Core SDK:** Used for triggering events via `track()` in React, or for manual setup and tracking in Vanilla JS and Vue.
   ```javascript theme={null}
   import { init, identify, track, reset } from 'analytiq';
   ```

***

## Using a CDN (Vanilla HTML/JS)

If you aren't using a bundler and just want to include Analytiq in a basic HTML file, you can load it directly from the unpkg CDN.

Place this script tags in your `<head>`:

```html theme={null}
<script src="https://unpkg.com/analytiq/dist/index.global.js"></script>
```

When loaded via `<script>`, the SDK exposes a global `analytiq` object attached to the `window`.

```html theme={null}
<script>
  // Initialize the SDK
  analytiq.init('pk_live_your_key_here', {
    autoTrackPageViews: true,
    debug: true
  });

  // Track an event
  document.getElementById('buy-btn').addEventListener('click', () => {
    analytiq.track('button_clicked', { source: 'landing_page' });
  });
</script>
```

***

## Environment Compatibility

Analytiq handles SSR (Server-Side Rendering) gracefully. It works seamlessly with:

* **React** (via `analytiq/react` hook)
* **Next.js** App Router & Pages Router (via `analytiq/react` hook)
* **Vue & Nuxt** (via core `analytiq` library)
* **Vanilla JS** (via NPM or CDN)

<Note>
  **React Native Support:**
  The current stable version of Analytiq relies on browser `localStorage` and `window` objects. It is **not currently compatible** with React Native without polyfills. A dedicated React Native SDK is on our roadmap. Let us know if you need this!
</Note>

## What's Next?

Pick your framework for a step-by-step integration guide:

<CardGroup cols={2}>
  <Card title="React" href="/frameworks/react">Setup for React + Vite or Create React App</Card>
  <Card title="Next.js" href="/frameworks/nextjs-app-router">Setup for Next.js App Router</Card>
  <Card title="Vue.js" href="/frameworks/vue">Setup for Vue 3</Card>
  <Card title="Vanilla HTML" href="/frameworks/vanilla-html">Setup for plain HTML websites</Card>
  <Card title="JavaScript (Plain JS)" href="/frameworks/javascript">Setup with plain JavaScript — no TypeScript</Card>
  <Card title="TypeScript" href="/frameworks/typescript">Setup with TypeScript support</Card>
</CardGroup>
