Every once in a while we find something cool… really cool… and today is one of those days.

Before I tell you exactly what it is, I think it’s always important (in the web design business and in life in general) to UNDER promise and OVER deliver in everything you do.

For example if your web proposal included 10 pages… give em 15. If you are making dinner for your wife… make her favorite dessert too. Going out for a one mile jog… go one and a half!

In business, this makes clients incredibly happy with what you provide them + it encourages repeat business and referrals = this makes YOU very happy.

So what I really like about this… is that it’s one of those things that you can add to your next clients website for FREE within minutes, then write to them in about a month and say something like this…

I hope you are loving your new website Ms. Client, I’ve got something really cool to show you about your website today. We’ve got recordings of real website visitors using your website and we’ve got heatmaps showing you where people scroll and click on your website… want to see them?”

Of course Ms. Client will say “Yes” to that.  Then you just give her the login details and she’ll be WOWed with you for doing it.

This awesome thing is call Hotjar.

What does Hotjar mean? I have no idea? A jar full of hot stuff, like soup maybe?  Maybe chili?  I dunno, but I do know that it’s cool, it’s easy to setup and makes you look awesome… keep on reading.

How to setup HotJar

Setting HotJar up is just like installing Google Analytics

  1. Get a free HotJar account
  2. Add your site and copy the code
  3. Paste the code into the header of your site (for Genesis users paste it into Genesis > Theme Settings > Header & Footer Scripts)

BOOM you’re done.  Well you are almost done… and this is where I messed up.  I assumed that since the code was on the WDA site it would automatically do all the cool things (visitor recordings and heatmaps) that HotJar could do… I was wrong.

I forgot one important step.

You have to go to the Heatmaps AND Recordings pages and click the green new button ON EACH PAGE (which kinda looks like this)

If you don’t do this, HotJar will not record anything (and that sucks).

Once you click on that button you are at a simple screen where you put in a name for your heatmap and the URL you want it to record:

Once that is done, just sit back for a few weeks and let the website visitors do their thing… then the (stalking) magic happens.

The HotJar Magic

Depending on the country you live, stalking people is typically frowned upon, but with HotJar… that’s exactly what’s going on.  It’s recording various things that the website visitors do, such as click on things and where they move their mouse.

We’ve only had it active for a few hours, but let me show you some real-life scenarios / business questions one might have and can now get answers to:

I wonder where people tend to focus on our homepage?

Notice the legend in the lower-right corner, that tells what is Hot and what is now.  Seems like people don’t care about our “Blog” page or the “Start Here” page 🙁

I wonder how far down people scroll on my homepage?

What’s interesting here is that most people don’t even see the green GET STARTED HERE  button (because it is under the fold for most visitors).

When people visit the Resources and Toolkit page I wonder what they do?



NOTE 1: See the red line, that is where the users mouse is… which is typically where there eyes are looking

NOTE 2: I recommend clicking the Skip Pauses button in the top left corner to see the good parts

From that video I can also tell that this person is in the United States on a Desktop using Firefox on a Windows computer (I know that because of the icons in the top right of the screen).

Of course some of this stuff is easily found in Google Analytics but with HotJar it’s like I’m sitting right behind them watching their every move on our site, it’s a bit creepy but also kinda cool.

There are actually a bunch of videos in our HotJar account that we could watch (and share):

HotJar also has some other features like Polls, Surveys and Recordings but those don’t seem anywhere near as exciting as heatmaps and recordings. #wasteoftime

So the end result is this: install the free version of HotJar on your clients website, let it accumulate data for a while THEN tell em’ about it and make they love you even more!

Your super-excited friends,
Ian & Amy

PS: While driving home yesterday, we saw a sign that said FREE KITTENS… should we stop in?