Using JavaScript to Trigger Heatmaps – Hotjar Documentation

This feature is only available on the Plus and Business plan.

JavaScript will need to be added to your site's source code or through Google Tag Manager by your web development team.

You would use JavaScript triggers if:

A/B testing
A popup modal
After triggering a Hotjar Poll to show

This feature is also available for Feedback Widgets and Recordings.

Select JavaScript Trigger from your page targeting panel.

Enter a name you would like to use as a trigger.

There are restrictions to characters used in trigger name

Only alphanumeric characters, dashes and underscores can be used in the trigger name.

Click Done.

Add the trigger code to your website.

Using triggers with Hotjar installed via GTM

If you plan on using any of these functions heavily, we recommend installing Hotjar through GTM manually as a custom tag.

In the example above, you've created a trigger called split_test_a. Next, you will need to add the trigger code to your website:

hj('trigger', 'split_test_a');

An error will occur if this code is added before the Tracking Code

The trigger code must be added at any point after the Hotjar Tracking Code.

If you wanted the Heatmap to trigger when the user completed a specific action, you would add this line of code to one of your JavaScript functions. Here's an example:

function checkTestVersion() {
    //code to check version...

    if (version == 'A'){
        hj('trigger', 'split_test_a');
    } else if (version === 'B'){
        hj('trigger', 'split_test_b');
    }
}

Usage Examples

If you wanted to use JavaScript to trigger a Heatmap in other cases, here is some sample code to get you started:

This is code is for example purposes only

This is only a foundation, you’ll need to develop the code further before it will work in your unique situation.

If you have a JavaScript function which opens a sign-up form overlay:

function open_signup_overlay() {
    // Code to open your overlay
}

You can easily trigger a Heatmap by adding the JavaScript snippet to this function:

function open_signup_overlay() {
    // Code to open your overlay
    
    // Hotjar Heatmap trigger.
    hj('trigger', 'popup_heatmap');
}

Articles in this section