> ## 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.
# Vanilla HTML & JavaScript
> Add Analytiq to a plain HTML website — no npm, no React, no framework needed.
**Which method should I use?**
| Your project | Method to use |
| ------------------------------------------------ | ---------------------------------- |
| Plain `.html` files, no build tools | **CDN** (Option A below) |
| Uses Vite, Webpack, or Parcel (but no framework) | **npm** (Option B below) |
| A `.html` file inside a React/Vue project | Use the React or Vue guide instead |
***
## Option A — CDN (No npm, No Installation)
This is the simplest method. Just paste a `
```
Replace `pk_live_YOUR_KEY_HERE` with your actual API key from the Settings page.
**Your full `index.html` example:**
```html theme={null}
My Website
Welcome to My Website
```
***
### Track a button click
```html theme={null}
```
***
### Track across multiple pages
If your site has multiple HTML pages (e.g., `about.html`, `contact.html`), paste the script tag in **each file**. Because you set `autoTrackPageViews: true`, the SDK automatically records the page URL — no extra code needed per page.
To avoid repeating the script tag on every page, create a shared `analytics.js` file and include it on every page with `<script src="analytics.js"></script>`.
***
### Identify users after login
```html theme={null}
```
***
## Option B — npm + Bundler (Vite, Webpack, Parcel)
Use this if you have a bundler but no framework like React or Vue.
### Step 1 — Install
```bash theme={null}
npm install analytiq
```
### Step 2 — Initialize in your entry file
Open your bundler's entry file (usually `main.js` or `index.js`) and add at the top:
```js main.js theme={null}
import { init } from 'analytiq'
// Initialize once with auto page view tracking
init(import.meta.env.VITE_ANALYTIQ_KEY, {
autoTrackPageViews: true,
debug: true
})
```
### Step 3 — Track events anywhere in your project
```js any-file.js theme={null}
import { track, identify, reset } from 'analytiq'
// Track a button click
document.getElementById('buyBtn').addEventListener('click', () => {
track('buy_clicked', { price: 49 })
})
// Identify a user after login
async function handleLogin(email, password) {
const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify({ email, password }) })
const data = await res.json()
identify(data.user.id) // call right after login
}
// Reset on logout
function handleLogout() {
reset()
window.location.href = '/login.html'
}
```
***
## Verify it's working
1. Open your HTML file in a browser
2. Press **F12** and go to **Console** tab
3. You should see:
```
[analytiq] Initialized successfully. {userId: null}
[analytiq] Auto page view tracking enabled.
```
4. Go to your **Analytiq Dashboard** then **Events** — events appear within 10 seconds.