NEWAI-native design subscriptions are back
Book a call

Hotjar integration

Hotjar shows how visitors use your pages with heatmaps, session recordings and on-page surveys. It merged fully into Contentsquare in July 2025, and new accounts now start on Contentsquare. On existing Hotjar accounts we add the tracking code through custom code or GTM, and on Astro or Next.js with the official @hotjar/browser package, loaded after consent.

Connect HotjarSee the setup

Updated

Official sources

  1. HotjarContentsquare · contentsquare.com
  2. How to add Hotjar to your websiteFramer Help · framer.com
  3. WebflowHotjar Help · help.hotjar.com
  4. Install with Google Tag ManagerHotjar Help · help.hotjar.com
  5. hotjar/hotjar-jsGitHub · github.com
  6. Privacy FAQsHotjar Help · help.hotjar.com
  7. Will Hotjar slow down my site?Hotjar Help · help.hotjar.com

Checked against the official docs on. Tools change often; we re-check before every build.

ComplexityLow
Method
  • Framer: Embed
  • Webflow: Embed
  • Astro: API
  • Next.js: API
Typical setup2 to 4 hours
What we doWe install the tracking code behind consent, set up heatmaps for key pages and tag events for surveys and recordings.
CategoryAnalytics

Setup by platform

How we set up Hotjar

  • Framer

    • Embed

    Hotjar’s tracking code goes at the start of the head in Framer’s site custom code, then we republish. Framer documents this setup.

  • Webflow

    • Embed

    The tracking code goes in Site settings, Custom code, Head code, published to the domain listed in Hotjar. If the site runs GTM, we install Hotjar through GTM instead.

  • Astro

    • API

    @hotjar/browser with Hotjar.init(siteId, 6) in a client script, called only after consent. It supports a CSP nonce.

  • Next.js

    • API

    @hotjar/browser starts in a client component after consent, and Hotjar.stateChange on each route change keeps recordings in step with client-side navigation.

Use cases

What teams use it for

  1. Heatmaps of landing pages

    See where people click and how far they scroll before a redesign, and again after.

  2. Recordings for UX friction

    Watch sessions on forms and pricing pages to find where people hesitate.

  3. Event-triggered surveys

    Ask one question at the right moment, like after a visitor leaves the pricing page.

Before you add it

What to watch out for

  • Consent and GDPR

    You are the controller

    Hotjar sets first-party cookies and you are responsible for collecting consent. Hotjar stores data on AWS in Ireland; EU teams usually sign its DPA.

  • Limits

    New accounts are Contentsquare

    New users can’t sign up for Hotjar any more and start on Contentsquare, which uses its own tag. We check which product your account is on before installing.

  • Performance

    Async, but still a script

    The script loads async from a CDN. Hotjar suggests loading it after DOM interactive to cut its impact further, which is what we do.

FAQ

Questions about Hotjar

Adrian

Can't find your answer?

Book a call and let's talk.

Book a call

Or email us hello@designme.agency

Can we still sign up for Hotjar?

No. Hotjar says new accounts can’t be created; new users sign up on Contentsquare, which includes Hotjar’s features. Existing Hotjar accounts keep working.

Will Hotjar slow down our site?

The script is asynchronous and served from a CDN, so the impact is small. We load it after the page is interactive and only once a visitor accepts.

Hotjar or Microsoft Clarity?

Both do heatmaps and recordings. Hotjar adds surveys and feedback widgets; Clarity is free. Since late 2025 Clarity also needs a consent signal for EU visitors.

Services

Glossary

Other integrations

All integrations

You've reached the end, so now…

Tell us what you’re building.

We’ll help you map the right scope, team, timeline, and next steps.

Book a call