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

# Getting Your API Key

> Your API key is what connects your app to your Analytiq project. Here's exactly how to find it.

## What is an API Key?

Your API key is a unique identifier that tells Analytiq which project your events belong to.

It looks like this:

```
pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

Every project you create in Analytiq has its own API key. When you initialize the SDK with `init('pk_live_...')`, Analytiq knows exactly which project dashboard to send your events to.

## How to find your API Key

**Step 1** — Log in to your dashboard at [analytiq-two.vercel.app](https://analytiq-two.vercel.app)

**Step 2** — Click on the project you want to track

**Step 3** — Click **Settings** in the left sidebar

**Step 4** — Scroll down to the **Public API Key** section

**Step 5** — Click the **Reveal** button to show your key

**Step 6** — Click the **Copy** button to copy it to your clipboard

## Using your API Key in code

Paste your API key as the first argument to `init()`:

```js theme={null}
import { init } from 'analytiq'

init('pk_live_YOUR_KEY_HERE')
```

<Warning>
  Replace `pk_live_YOUR_KEY_HERE` with your actual key. Do not leave it as the placeholder text.
</Warning>

## Is it safe to put in frontend code?

**Yes.** API keys starting with `pk_live_` are designed to be used in browser (frontend) code. This is a public key, not a secret key. Think of it like your project's ID — it identifies your project, but it doesn't give anyone access to your Analytiq account.

<Info>
  If you ever suspect your API key was compromised, you can rotate it from the Settings page. Rotating generates a new key and invalidates the old one immediately.
</Info>

## Using Environment Variables (Recommended)

Instead of hardcoding your key directly in code, store it in a `.env` file:

<Tabs>
  <Tab title="React / Vite">
    Create `.env` in your project root:

    ```
    VITE_ANALYTIQ_KEY=pk_live_YOUR_KEY_HERE
    ```

    Use it in your code:

    ```js theme={null}
    init(import.meta.env.VITE_ANALYTIQ_KEY)
    ```
  </Tab>

  <Tab title="Next.js">
    Create `.env.local` in your project root:

    ```
    NEXT_PUBLIC_ANALYTIQ_KEY=pk_live_YOUR_KEY_HERE
    ```

    Use it in your code:

    ```js theme={null}
    init(process.env.NEXT_PUBLIC_ANALYTIQ_KEY)
    ```
  </Tab>

  <Tab title="Vue">
    Create `.env` in your project root:

    ```
    VITE_ANALYTIQ_KEY=pk_live_YOUR_KEY_HERE
    ```

    Use it in your code:

    ```js theme={null}
    init(import.meta.env.VITE_ANALYTIQ_KEY)
    ```
  </Tab>
</Tabs>

<Note>
  Add `.env` to your `.gitignore` file so it never gets uploaded to GitHub.
</Note>

***

## Local vs Production API Keys

Each Analytiq project has its own API key. This means you should use **separate projects** for local development and production so that your test events don't pollute your real analytics data.

### Recommended setup

Create two projects in the Analytiq dashboard:

1. `My App - Development` — for local testing
2. `My App - Production` — for your live users

Then use the matching key in each environment.

### Setting the key in your local `.env` file

```bash theme={null}
# .env (local, never committed to git)
VITE_ANALYTIQ_KEY=pk_live_DEV_KEY_HERE        # React / Vite
NEXT_PUBLIC_ANALYTIQ_KEY=pk_live_DEV_KEY_HERE  # Next.js
```

### Setting the key in your hosting platform (production)

Do **not** put your production key in a `.env` file committed to GitHub. Instead, set it as an environment variable directly in your hosting platform's dashboard:

| Platform              | Where to add it                                            |
| --------------------- | ---------------------------------------------------------- |
| **Vercel**            | Project Settings > Environment Variables                   |
| **Render**            | Service Settings > Environment > Add Environment Variable  |
| **Railway**           | Service Settings > Variables                               |
| **Netlify**           | Site Settings > Environment Variables                      |
| **Heroku**            | Settings > Config Vars                                     |
| **AWS / GCP / Azure** | Use their respective secrets manager or environment config |

Set `VITE_ANALYTIQ_KEY` (or `NEXT_PUBLIC_ANALYTIQ_KEY` for Next.js) to your **production** project's API key in each platform.

### Summary

| Environment           | Where the key lives            | Which project key to use |
| --------------------- | ------------------------------ | ------------------------ |
| Local development     | `.env` file (not committed)    | Development project key  |
| Production (deployed) | Hosting platform env variables | Production project key   |

<Note>
  After updating an environment variable on your hosting platform, you must redeploy your app for the change to take effect.
</Note>