# Bolt

## Add Humblytics Analytics to Bolt.new

**Note**: Bolt.new is an AI-powered web development tool that generates and modifies code for you.

### 1 · Sign up (or log in)

Visit humblytics.com → Start Free Trial. Finish signup—or log in to your existing workspace.

### 2 · Add your website in Humblytics

In the sidebar, click **Add Website**.

* **Domain** – enter `your-domain.com` (omit `https://` and `www`)
* **Site Name** – internal label (e.g. `Bolt-Project`)

Copy the snippet from **Install Tracking Code**:

html

````html
<!-- Start Humblytics Tracking Code -->
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
<!-- End Humblytics Tracking Code -->
```

Keep this tab open—we'll return and click **Verify Website** once the tag is live.

## 3 · Install using Bolt AI

In the Bolt.new chat interface, send this prompt:
```
Add Humblytics analytics to my site. Add this script to the <head> section of all pages:

<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>

Make sure it loads on every page.
````

Bolt AI will automatically:

* Detect your framework (React, Next.js, Vue, etc.)
* Add the script to the correct file
* Apply it site-wide

**Note**: Replace `YOUR_ID_HERE` with your actual project ID from Humblytics.

### 4 · Deploy your project

⚠️ **Important**: Bolt.new runs in preview mode. Deploy to a live URL for tracking.

1. Click **Deploy** (top right)
2. Choose a platform:
   * **Netlify** (recommended)
   * **Vercel**
   * Or export and deploy manually
3. Wait for deployment to complete
4. Copy your live URL (e.g., `yoursite.netlify.app`)

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your **deployed live site** in a private/incognito window
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails:**

* You're testing the **deployed URL**, not Bolt.new preview
* Script was added before deploying (if not, re-deploy)
* View page source and search for "humblytics"
* Check Developer Tools → Network tab for `hmbl.min.js`
* Wait 1-2 minutes after deployment

### 6 · Explore & optimize

* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated for clicks and scroll depth
* **Experiments** – run A/B tests directly from Humblytics
