Hotjar Tutorial: Set Up Heatmaps and Session Recordings

Understanding how visitors interact with your website is the foundation of effective optimisation. Hotjar is a behaviour analytics tool that reveals what users actually do on your pages — where they click, how far they scroll, what frustrates them and where they drop off. This Hotjar tutorial shows you how to set up and use every core feature.

For Singapore businesses operating in a highly competitive digital market, data-driven website improvements can mean the difference between a conversion rate of 1 per cent and 3 per cent — a threefold increase in revenue from the same traffic. Whether you run an e-commerce store, a professional services firm or a lead generation site, Hotjar provides insights that traditional analytics tools like Google Analytics simply cannot offer.

In this tutorial, we cover Hotjar installation, setting up and interpreting heatmaps (click, scroll and move), analysing session recordings, deploying feedback widgets and surveys, building funnels to track conversion paths and using form analysis to reduce abandonment. By the end, you will know exactly how to use Hotjar to improve your website’s performance in 2026.

Installing Hotjar on Your Website

Hotjar installation is straightforward regardless of your website platform. Here is how to get started.

Step 1: Create a Hotjar account. Visit hotjar.com and sign up with your email. Hotjar offers a free Basic plan that includes up to 35 daily sessions, which is sufficient for small to medium Singapore business websites. Paid plans (Plus, Business and Scale) offer more sessions, data storage and advanced features.

Step 2: Add your site. After creating your account, enter your website URL. Hotjar generates a unique tracking code — a small JavaScript snippet — for your site.

Step 3: Install the tracking code. You have several options depending on your platform:

WordPress — install the official Hotjar plugin or paste the code into your theme’s header using a plugin like Insert Headers and Footers
Shopify — go to Online Store → Themes → Edit Code, open the theme.liquid file and paste the Hotjar code before the closing </head> tag
Google Tag Manager — create a new Custom HTML tag, paste the Hotjar code and set it to fire on all pages
Manual installation — paste the code directly into the <head> section of every page on your site

Step 4: Verify installation. Return to Hotjar and click “Verify installation”. Hotjar checks your site for the tracking code and confirms it is working. Visit your own website in a separate tab to trigger the first data capture.

Important for PDPA compliance: Singapore’s Personal Data Protection Act requires you to inform visitors about data collection. Update your privacy policy to mention Hotjar’s session recording and heatmap functionality. Hotjar automatically suppresses sensitive data like passwords and credit card fields, but review your setup to ensure compliance. This is particularly relevant if your site handles personal data as part of your digital marketing activities.

Setting Up and Reading Heatmaps

Heatmaps are visual representations of user interaction data, using colour gradients to show where activity is highest (red/warm) and lowest (blue/cool). Hotjar offers three types of heatmaps.

Click heatmaps: Show where users click (or tap on mobile) on your pages. These reveal which buttons, links and elements attract the most engagement — and which are being ignored.

How to interpret click heatmaps:

Red areas indicate high click concentration — your most engaging elements
Cold or blue areas suggest elements that receive little attention
Clicks on non-clickable elements signal user confusion — they expect something to happen that does not
Compare desktop and mobile heatmaps separately, as interaction patterns differ significantly

Scroll heatmaps: Show how far down the page users scroll. This is critical for understanding whether your key content and calls-to-action are actually being seen.

How to interpret scroll heatmaps:

The percentage overlay shows what proportion of visitors reach each point on the page
A sharp drop-off early on suggests your above-the-fold content is not compelling enough to keep users scrolling
Place your most important content and CTAs above the fold or where scroll depth is highest
For long-form pages, scroll heatmaps reveal the optimal content length for your audience

Move heatmaps: Track where desktop users move their mouse cursor. Research suggests cursor movement correlates with eye movement, making move heatmaps a proxy for visual attention.

Setting up a heatmap:

Log in to Hotjar and go to Heatmaps → New Heatmap
Enter the page URL you want to track (start with your highest-traffic pages — typically the homepage, key service pages and product pages)
Set the number of pageviews to capture (Hotjar will collect data until this target is reached)
Click Create Heatmap

Heatmaps become more reliable with more data. Aim for at least 1,000 pageviews per heatmap before drawing conclusions. For Singapore businesses with moderate traffic, this might take a few days to a few weeks depending on the page.

Analysing Session Recordings

Session recordings capture individual user sessions as video playbacks, showing every mouse movement, click, scroll and page transition. They reveal the real user experience in a way no other tool can.

Accessing recordings: Go to Recordings in your Hotjar dashboard. Recordings start automatically once the tracking code is installed. You can filter recordings by page visited, device type, country, duration, number of pages visited and more.

What to look for in session recordings:

Rage clicks — rapid, repeated clicking on an element indicates frustration. The user expects something to work but it does not respond
U-turns — users navigating to a page and immediately going back suggests the page did not meet their expectations
Dead clicks — clicks on non-interactive elements reveal confusing design patterns
Hesitation — prolonged hovering over buttons or forms suggests uncertainty or confusion
Navigation patterns — observe how users flow through your site to identify common paths and unexpected detours

Efficient reviewing strategy: Watching every recording is impractical. Focus on:

Recordings from users who visited your checkout or contact page but did not convert
Recordings with rage clicks or U-turns (Hotjar flags these automatically)
Sessions from specific traffic sources — compare how Google Ads visitors behave versus organic traffic
Recordings from mobile users, as mobile usability issues are often invisible on desktop

Turning observations into action: Create a spreadsheet to log recurring issues. If five out of ten recordings show users struggling with your navigation menu on mobile, that is a clear signal to redesign it. Pair your session recording insights with heatmap data for a complete picture, then implement changes through your web design process.

Deploying Feedback Widgets

Hotjar’s Feedback widget lets visitors share their opinions about specific pages directly from your website. It is the simplest way to collect qualitative user feedback at scale.

Setting up a Feedback widget:

Go to Feedback → New Feedback Widget
Choose your question type — the default “How would you rate your experience?” with a five-point emoji scale works well as a starting point
Add a follow-up question asking users to explain their rating in their own words
Customise the widget appearance — colours, position (left or right side of the screen), language and branding
Set targeting — display on all pages or specific pages
Set device targeting — show on desktop, mobile or both
Activate the widget

Best practices for feedback widgets:

Keep it simple — one rating question plus one open-ended follow-up is ideal
Place the widget on pages where you need the most insight — checkout pages, pricing pages, service pages
Review feedback weekly and categorise responses into themes (pricing concerns, usability issues, content gaps)
Respond to patterns, not individual responses — look for issues mentioned by multiple users

Connecting feedback to screenshots: Hotjar allows users to attach a screenshot with their feedback, highlighting the specific area of the page they are commenting on. This context makes it much easier to identify and fix the exact issue.

Creating Surveys for Deeper Insights

While feedback widgets capture quick reactions, Hotjar surveys enable you to ask more detailed questions and gather structured data from your visitors.

Types of surveys:

On-site surveys — appear as a popup or slide-in on your website, triggered by specific conditions
External surveys — standalone surveys shared via a link through email or social media

Creating an on-site survey:

Go to Surveys → New Survey
Select “On your website” as the survey type
Add your questions — Hotjar supports multiple choice, rating scales, open text, Net Promoter Score (NPS) and more
Customise the appearance to match your brand
Set trigger conditions: appear on specific pages, after a time delay, on exit intent or after a percentage of page scrolled
Set targeting: device type, traffic source, returning versus new visitors
Activate the survey

Survey questions for Singapore businesses:

“What almost stopped you from completing your purchase today?” — for e-commerce checkout pages
“How did you hear about us?” — for attribution insights beyond digital analytics
“What service are you most interested in?” — for professional services firms
“Is there anything missing from this page?” — for content improvement
“Would you recommend us to a friend?” (NPS) — for overall satisfaction benchmarking

Analysing survey results: Hotjar aggregates responses into a dashboard with visual summaries. For open-ended questions, read through responses and tag common themes. Look for patterns that reveal systemic issues or opportunities rather than reacting to individual comments.

Building Funnels to Track Conversions

Hotjar’s funnel feature (available on paid plans) lets you define a sequence of pages that make up a conversion path and identify exactly where users drop off.

Setting up a funnel:

Go to Funnels → New Funnel
Define the steps in your conversion path — for example: Homepage → Product Page → Cart → Checkout → Confirmation
Enter the URL for each step
Save and let Hotjar collect data

Interpreting funnel data:

Hotjar shows the percentage of users who progress from each step to the next
A significant drop between two steps indicates a problem — perhaps the checkout form is too long, the shipping cost is unexpected or the page loads too slowly
Compare funnel performance across devices — mobile funnels often show higher drop-off rates due to usability friction

Common funnel patterns for Singapore e-commerce:

Cart to checkout drop-off — often caused by unexpected shipping costs, limited payment options or a requirement to create an account
Product page to cart drop-off — may indicate pricing concerns, insufficient product information or lack of trust signals
Homepage to product page drop-off — suggests poor navigation, unclear value proposition or irrelevant landing content

Taking action on funnel insights: Once you identify where users drop off, cross-reference with session recordings from that specific step. Watch how users interact with the problematic page, identify friction points and implement targeted improvements. A/B test your changes to validate that they actually improve conversion rates.

Using Form Analysis to Reduce Abandonment

Forms are critical conversion points — contact forms, signup forms, checkout forms and enquiry forms. Hotjar’s form analysis feature reveals exactly how users interact with each field and where they abandon the process.

Setting up form analysis:

Go to Forms in your Hotjar dashboard (available on paid plans)
Hotjar automatically detects forms on your site once the tracking code is installed
Select the form you want to analyse
Review the data once sufficient submissions have been collected

Key metrics to monitor:

Conversion rate — the percentage of users who interact with the form and successfully submit it
Time to complete — how long users spend filling out the form (longer times indicate complexity or confusion)
Drop-off by field — which specific fields cause users to abandon the form
Refill rate — how often users change their input in a field (high refill rates suggest unclear labels or validation issues)
Blank submissions — fields frequently left empty might be unnecessary or confusing

Common form issues and fixes:

High drop-off at phone number field — make it optional or explain why you need it. Singapore users may be wary of receiving unsolicited calls
High drop-off at address fields — use a postal code lookup to auto-fill address details for Singapore addresses
Long completion times — reduce the number of fields. Only ask for information you genuinely need
High refill rates on email field — ensure your input validation is not overly strict and error messages are clear

Optimising your forms based on Hotjar data can significantly increase lead generation and sales. Even small improvements — removing one unnecessary field or rewording a confusing label — can boost form completion rates by 10 to 20 per cent. Pair form analysis with insights from your broader SEO and conversion strategy for maximum impact.

Frequently Asked Questions

Is Hotjar free to use?

Yes. Hotjar’s Basic plan is free and includes heatmaps, session recordings (up to 35 daily sessions) and feedback widgets. Paid plans (starting at USD 39 per month) unlock more sessions, funnels, form analysis, surveys and longer data retention. Most small Singapore businesses can start with the free plan and upgrade as needed.

Does Hotjar slow down my website?

Hotjar’s tracking script is lightweight and loads asynchronously, meaning it does not block your page content from rendering. The performance impact is minimal — typically less than a few milliseconds. However, always test your page speed after installation using Google PageSpeed Insights to confirm there is no noticeable impact.

Is Hotjar compliant with Singapore’s PDPA?

Hotjar provides features to support data privacy compliance, including automatic suppression of sensitive data (passwords, credit card numbers), IP anonymisation and the ability to exclude specific elements from recording. To comply with PDPA, update your privacy policy to disclose Hotjar’s use, provide a way for users to opt out and ensure you do not capture unnecessary personal data.

How many heatmaps should I set up?

Start with heatmaps on your five to ten highest-traffic pages — typically your homepage, main service or product pages, pricing page and contact page. These are the pages where user behaviour data will have the greatest impact on your business outcomes. You can add more heatmaps as you work through optimisation priorities.

Can I use Hotjar alongside Google Analytics?

Absolutely. Hotjar and Google Analytics are complementary tools. Google Analytics tells you what is happening (traffic volumes, bounce rates, conversion rates), while Hotjar shows you why it is happening (user behaviour, frustration signals, qualitative feedback). Use both together for a complete understanding of your website’s performance.

How often should I review Hotjar data?

Review heatmaps and session recordings at least fortnightly, or weekly if you are actively optimising your site. Check feedback widget responses weekly. Run surveys in campaign bursts — deploy a survey for two to four weeks, analyse the results and implement changes before launching the next survey. Consistent review ensures you catch and address issues before they impact your business.

Hotjar Tutorial: Set Up Heatmaps and Session Recordings