How to Install a Heatmap on Your WordPress Site (One Line of Code, 3 Minutes)

Article summary

Adding a heatmap to WordPress only requires pasting a single line of code

There are three ways to do it: (1) your theme's header settings field, (2) a code-insertion plugin, or (3) editing header.php directly

Success means the count actually increasing for your site in the HeatMapX dashboard — not just "no errors"

Worried that adding a heatmap means wrestling with code? On WordPress, it really is just one line of tag code. This guide walks through three ways to add it, from the easiest option for beginners to a more advanced approach.

Step 1: Get Your Site Key

First, sign up at HeatMapX (a free plan is available), register your site, and get your site key. No credit card is required.

Once you have your site key, use the tag below, replacing YOUR_SITE_KEY with the actual key you were given.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Paste this tag into your site's <head> using one of the three methods below.

Method 1 (Recommended for Beginners): Your Theme's Header Settings

Many popular themes, such as Astra or GeneratePress, include a settings field — often under "Advanced" or "Custom Scripts" — where you can insert code directly into the <head> section.

In the WordPress admin, open your active theme's customizer or settings panel
Look for a field labeled something like "Header Scripts," "Custom Code," or "Advanced"
Paste the tag above into that field and save

Since you don't need to touch any theme files, this is the safest option if you're doing this for the first time.

Method 2: A Code-Insertion Plugin

If your theme doesn't have a header field, you can use a plugin such as WPCode (formerly Insert Headers and Footers).

From the Plugins screen, search for and install a code-insertion plugin like WPCode, then activate it
Open the plugin's settings and find the "Header" field
Paste the tag above and save

The advantage of this approach is that the tag survives a theme change. This is a good fit if you're planning to redesign your site down the road.

Method 3 (Advanced): Edit header.php in a Child Theme

If you're comfortable editing code directly, you can add the tag straight into your theme files.

Set up a child theme for your active theme first (editing the parent theme directly means your change gets wiped out the next time the theme updates — a child theme is required)
Open header.php in the child theme and paste the tag right before wp_head(), or right before the closing </head> tag
Save the file

If you edit the parent theme directly, the next theme update will overwrite your change and the tag will disappear. If you choose this method, always make the edit through a child theme.

How to Confirm It's Actually Working

Once you've added the tag, browse a few pages on your own site. But here's the important part.

A page loading without errors is not the same thing as tracking actually working. Even if your browser console shows nothing wrong, a mistyped site key can mean no data is ever reaching HeatMapX.

The only reliable check is to open the HeatMapX dashboard, find your site in the site list, and confirm that its count has actually gone up. After visiting a few pages, if the count increases, your installation is working.

FAQ

Q. Will this slow down my site? A. The tag loads asynchronously and is lightweight, so the impact on page load speed is minimal.

Q. I'm using a caching plugin — anything to watch out for? A. If you use a caching plugin such as WP Super Cache or W3 Total Cache, be sure to clear (purge) the cache after adding the tag. If an old cached version keeps being served, the newly added tag won't take effect.

Q. I added the tag, but the count in the dashboard isn't increasing A. The most common cause is a mismatched site key — pasting the key from a different site, or a character getting dropped when you copied it. Double-check the key against the one in your HeatMapX dashboard.

Wrapping Up

Adding a heatmap to WordPress comes down to pasting one line of code. HeatMapX is free to get started with, so give it a try and see how visitors are actually experiencing your site.