heatmapp

heatmapp

Back to Installation Guides

Add heatmapp to your Bolt application

Bolt creates full-stack applications using AI prompts. Instruct Bolt's AI to add the heatmapp tracking script so it runs on every page.

Get your heatmapp details

Go to your heatmapp dashboard and copy your Website ID and domain (e.g. yourdomain.com). You'll find these in your site settings or in the tracking script.


Your tracking script looks like this:

Code
<script
  defer
  data-website-id="YOUR_WEBSITE_ID"
  data-domain="your_domain.com"
  src="https://heatm.app/js/script.v2.min.js"
></script>
!

Replace `YOUR_WEBSITE_ID` with your actual Website ID from heatmapp. Replace `your_domain.com` with your website's root domain.

Use this AI prompt in Bolt

Copy the template below, fill in your Website ID and domain, then send it to Bolt:

Code
I need to integrate heatmapp analytics into my application. Please implement tracking that works across all pages of my app.

Add this analytics script to my project:

<script
  defer
  data-website-id="YOUR_WEBSITE_ID"
  data-domain="your_domain.com"
  src="https://heatm.app/js/script.v2.min.js"
></script>

Implementation guidelines:
- For React/Next.js apps: Add the Script component to the root layout or _app.js
- For vanilla HTML apps: Include in the <head> section of all pages
- For Vue/Nuxt apps: Add to app.vue or nuxt.config.js
- Ensure the script loads on every route and page
- Maintain the "defer" attribute for optimal performance

Please confirm the implementation method you used and verify that analytics will track across all pages of the application.
!

Replace `YOUR_WEBSITE_ID` and `your_domain.com` in the prompt with your actual values before sending.

Verify installation

After Bolt implements the changes:


  • Test the preview — Use Bolt's preview feature to check your app
  • Deploy your project — Use Bolt's deployment options (Netlify, Vercel, etc.)
  • Monitor your dashboard — Check your heatmapp dashboard for incoming traffic data (may take a few minutes)

Troubleshooting

If you don't see analytics data, ask Bolt to verify:


Verification prompt:


Can you verify the heatmapp analytics implementation? Please check: (1) Which framework/structure did you use for my app? (2) Where exactly did you place the analytics script? (3) Will it load on all routes and pages? (4) Can you show me the implementation? The script should load: https://heatm.app/js/script.v2.min.js with my website ID. If there's an issue, please fix it using the appropriate method for my app's framework.


Common issues:


  • Analytics only tracking on landing page
  • Script not included in the build process
  • Missing or incorrect tracking parameters
  • Bolt hasn't deployed the latest changes

For advanced configuration options, see the script configuration reference. Contact support@heatm.app if you need help.

For advanced configuration options like localhost tracking, custom API endpoints, or cross-domain setup, see the script configuration reference.