Why isn't my heatmap loading?

Our heatmap tool is unique in that it loads right on your live website, allowing us to offer a dynamic and interactive heatmap experience. Certain website configurations, however, can prevent the heatmap from functioning properly or appearing altogether.

What can cause this?

There are a few common causes for a heatmap to not load properly, and there are solutions for each.

Check your Content-Security-Policy settings

The tool makes use of iframes, web workers, and same-origin blobs when generating heatmap overlays. If you have setup a Content-Security-Policy, you'll want to make sure that your policy allows same-origin blobs and iframes:

Content-Security-Policy: child-src 'self' blob:;

Replace anti-clickjacking code with X-Frame-Options

If the heatmap tool loads, but the loading spinner within the viewer never disappears or you only see a blank window, your website might be using anti-clickjacking techniques. The tool will attempt to handle most of these cases automatically, but it might not be able to handle all of them. A better alternative to anti-clickjacking javascript is the use of the X-Frame-Options HTTP header and setting it to SAMEORIGIN.

Make sure the Lucky Orange tracking code is present

Sometimes a heatmap won't load simply because the Lucky Orange tracking code is not present on the page you are trying to view. Double check that the tracking code has been placed on all pages of your website.