Start collecting data fast with these easy Hotjar integrations

First, let me introduce myself 😃. My name is L-P and I’m part of the Customer Experience Activation team here at a Hotjar. A big part of what I do everyday is helping our users get started with Hotjar and making sure they can get the most out of our awesome tools. In this blog post, we’ll look at the different ways you can get Hotjar up and running on your site.

Continue reading to learn the different ways you can get Hotjar working with your existing site. I’ll also touch on why you can be excited about using it on your site 🎉. To jump to a specific platform, click on it in the list below:

Hotjar integrations:

• WordPress

• Google Tag Manager

• Wix

• ClickFunnels

• Segment

• Drupal

• HelpDocs

Hotjar installation guides

• Shopify

• Adobe DTM

• LightCMS

• Unbounce

• HubSpot

• Magento

• Weebly

• Instapage

• PrestaShop

• Smarty Templates

• QuickSilk

• Squarespace

• Joomla!

Top 7 reasons to integrate Hotjar with your website and/or services

Curious about why you should give us a try? Here are a couple of reasons why I think you’re going to love using Hotjar to improve your site and your visitor’s experience.

If you own or manage a website that you want to grow and improve, you’re going to love Hotjar’s suite of behavior analytics and user feedback tools when:

1. Creating user personas 

2. Restructuring or redesigning your website

3. Monitoring customer satisfaction 

4. Increasing your site’s usability 

5. Boosting conversions 

6. Collecting customer testimonials 

7. Creating visual proof to back up your decisions

Read more: What is Hotjar? 4 Reasons you should use it

7 Hotjar integrations

Integrations are a useful feature to take advantage of because they require fewer resources (no need to reach out to developers for help) than a more involved installation process: Hotjar can be installed with not much more than just the click of a button. They are also safer because we don’t need to modify site code, and there is less risk of breaking something.

How to use Hotjar on WordPress

WordPress is the world’s most popular content management platform, currently used by 32% of all websites on the internet. Its e-commerce platform is WooCommerce.

Hotjar is easy to integrate with WordPress through our official plugin.

1. Navigate to the WordPress Plugin menu on your WordPress back end. Click “ add new.”

2. Search “Hotjar” to find the official Hotjar plugin. Click install.

3. Navigate to Settings and click Hotjar on the drop-down menu.

4. Paste your Hotjar Site ID into the Hotjar ID field in WordPress. Click Save.

For more detailed instructions, visit the Hotjar and WordPress installation guide.

Read more: How to grow and improve your WordPress site with Hotjar

How to use Hotjar on Google Tag Manager

Use marketing tags on your website without needing to modify code with Google Tag Manager.

It’s possible for you to install Hotjar in your Google Tag Manager (GTM) directly from your Hotjar Dashboard! When creating a new site, Hotjar will show you the option to Sign in to Google Tag Manager.

You can then select the Google Account you would like to publish Hotjar into and grant us permission.

Next up, you can select the Google Tag Manager Account and GTM Tag Container used on the site you’d like to load Hotjar onto.

Finally, you’ll want to click Create And Publish Tag to get Hotjar up and running on your site 🎉.

Read more: Installing Hotjar on Google Tag Manager In App

Another option to install Hotjar on your site easily using Google Tag Manager is to create a new tag directly. Once the tag is installed, you can immediately start using all of Hotjar’s features.

1. Add a new tag.

2. Click the tag icon and select Hotjar Tracking Code from the list.

3. Enter your Hotjar Site ID into the text field.

4. Set up a trigger to control Hotjar. Once you click in the triggering area, you can choose what pages the tracking code will appear on. Choose “all pages.”

5. Save your workspace. Click submit, then publish.

Read more: Google Tag Manager installation guide

How to use Hotjar on Wix

Wix is a content management platform that allows users to build websites using drag-and-drop tools.

Install Hotjar with Wix by enabling it as a marketing integration.

1. Select Marketing Tools from your Wix site dashboard.

2. Select Marketing Integrations, then find Hotjar and click Go For It.

3. Click Connect Hotjar.

4. Paste your Hotjar Site ID into the field that appears.

Read more: Wix installation guide

How to use Hotjar on ClickFunnels

You can use ClickFunnels to create effective sales funnels that help you sell more products, gather sales leads, and collect potential customers’ email addresses.

Install Hotjar either on all pages of your funnel or specific pages only.

To install on all pages:

1. Go to your funnel Settings and click on Head Tracking Code.

2. Paste the Hotjar Tracking Code.

To install on a single page:

1. Go to the Edit Page.

2. Click on Settings and select Tracking Code.

Paste the Hotjar Tracking Code.

Read more: ClickFunnels installation guide

How to use Hotjar on Segment

A customer data infrastructure tool, Segment allows you to collect data via an API and integrate it with various marketing, analytics, and sales tools.

This integration allows you to instantly send customer data to Hotjar:

1. Select Hotjar from Segment’s available integrations.

2. Fill out the settings with your Hotjar Site ID.

3. Wait for Segment to update.

Read more: Segment installation guide

How to use Hotjar on Drupal

The free, open-source content management framework Drupal has over 1.37 million members.

You can install Hotjar by copying your tracking code and inserting it into the Hotjar Drupal Module.

1. Install the third-party module, available here.

2. Go to the Admin/Config/System/Hotjar page and fill in the Hotjar ID field.

3. Choose where you want Hotjar to load: either on every page or on specific pages.

4. Save.

Read more: Drupal installation guide

How to use Hotjar on HelpDocs

Streamline your support by creating an authoritative knowledge resource for users with HelpDocs.

Hotjar is very easy to install using a simple built-in integration:

1. In HelpDocs, go to Settings > Integrations > Hotjar

2. Paste your Hotjar Site ID within the HelpDocs installation pop-up.

3. Save.

Read more: HelpDoc installation guide

13 platforms with installation guides

While we don’t have official integrations with the platforms below, it doesn’t mean you can’t use Hotjar on them! In fact, installation is simple using our easy installation guides.

How to use Hotjar on Shopify

Shopify is an ecommerce platform that powers over 800,000 businesses around the world.

While Shopify no longer allows third-party scripts during checkout, you can still use Hotjar to track your Storefront and your "Order Confirmation" page. To install Hotjar within the Shopify theme, follow these instructions:

1. In Shopify, click Online Store in the sidebar menu, then select Themes.

2. Click on the Actions button on the top right and choose Edit Code.

3. Under layout, select theme.liquid.

4. Scroll down the page until you find the following tag: </head>.

5. Paste your Hotjar Tracking Code just before this closing </head> tag.

6. Click Save.

To set up tracking for order confirmations, follow steps 8-11 in the Shopify installation guide.

Read more: 5 ways to increase Shopify store conversions

How to use Hotjar on Adobe DTM

Dynamic Tag Management from Adobe Analytics lets you manage tags across multiple sites.

Hotjar installation using Adobe DTM is very simple:

1. Choose non-sequential JavaScript.

2. Paste the Hotjar Tracking Code into Adobe DTM and delete the <script> and </script> tags.

3. Save.

Read more: Adobe DTM installation guide

How to use Hotjar on LightCMS

LightCMS is a simple and easy way to build static sites quickly.

You can install Hotjar by adding the correct tracking code into the HTML page settings:

1. Go to your Content page.

2. Click on the Page Settings cogwheel on the right.

3. Click the Advanced tab and scroll down to the HTML head section.

4. Paste the correct Hotjar Tracking Code. NOTE: you will need to edit your tracking code for it to work with LightCMS. Visit the LightCMS installation guide for details.

Read more: LightCMS installation guide

How to use Hotjar on Unbounce

Unbounce is a drag-and-drop landing page builder. The best way to install Hotjar is to copy your tracking code into the head section.

1. Log into Unbounce and open your landing page.

2. Click on JavaScripts from your Edit screen.

3. Paste the Hotjar Tracking Code into the Head section.

Read more: Unbounce installation guide

How to use Hotjar on Hubspot

HubSpot is an all-in-one e-commerce marketing tool.

Install Hotjar for a single domain or for all your domains.

1. In your HubSpot account, click on the Settings icon in the main navigation bar.

2. Navigate to Website > Pages in the left sidebar menu.

3. Select a specific domain or select all domains.

4. Paste the Hotjar Tracking Code in the Site Header HTML section.

5. Save.

Read more: HubSpot installation guide

How to use Hotjar on Magento

Magento is an open-source e-commerce platform that offers marketing, SEO, and inventory management tools.

Hotjar works on all Magento versions 2.0 or higher.

1. From the Admin menu, select System > Configuration> Design.

2. Click to expand the HTML Head section.

3. In the Miscellaneous Scripts text box, paste the Hotjar Tracking Code.

4. Click Save.

Read more: Magento installation guide

How to use Hotjar on Weebly

Weebly is a website builder specifically geared towards online retailers.

Hotjar is installed via the SEO panel:

1. From the Weebly Admin Dashboard, click Settings.

2. From the left panel, click SEO.

3. Paste the Hotjar Tracking Code (including the <script> tags) in the Header Code text area.

4. Save

Read more: Weebly installation guide

How to use Hotjar on Instapage

Instapage helps you turn clicks into customers by optimizing your landing pages.

1. Log into Instapages and open your landing page.

2. Click on Settings from your edit screen.

3. Click on the JavaScript button.

4. Paste the Hotjar Tracking Code into the Header.

Read more: Instapage installation guide

How to use Hotjar on Prestashop

PrestaShop is an open-source e-commerce platform used by 250,000 shops worldwide.

1. Paste the Hotjar Tracking Code inside a PrestaShop template. The template filename of the header.tpl may vary depending on the custom template. Add the code to the template file that is included on all page loads.

2. Add {literal} tags within the Tracking Code's <script> tags.

Read more: PrestaShop installation guide

How to Use Hotjar on Smarty Templates

Smarty Templates can be used in conjunction with Prestashop to build e-commerce sites.

1. Paste the Hotjar Tracking Code inside a PrestaShop template. The template filename of the header.tpl may vary depending on the custom template. Add the code to the template file that is included on all page loads.

2. Add {literal} tags within the Tracking Code's <script> tags.

Read more: Smarty Templates installation guide

How to use Hotjar on QuickSilk

QuickSilk bills itself as a WordPress alternative — a CMS that offers simplicity, affordability, and security.

1. Select Settings on your QuickSilk dashboard.

2. Scroll down to your Settings.

3. Select the Head Code Insertion tab on the left-hand side.

4. Paste your Hotjar Tracking Code in the input field.

5. Save.

Read more: QuickSilk installation guide

How to use Hotjar on SquareSpace

Squarespace is another website builder that allows users to easily build their site via templates and drag-and-drop methods.

Not surprisingly, installing Hotjar is just as simple:

1. Go to Settings.

2. From the Settings menu, navigate to Advanced > Code Injection.

3. Paste the Hotjar Tracking Code in the Header section text area

Read more: Squarespace installation guide

How to use Hotjar on Joomla!

Joomla! is an open-source content management system estimated to be the fourth most-popular CMS on the internet.

You can install Hotjar by adding a piece of code into the head element via the template menu:

1. Log into the Joomla Administration Panel.

2. Open Extensions > Templates > Templates. Click on the title of the template your site is using.

3. Locate the .php file that contains the <head> element on all your pages. Insert your Tracking Code above the </head> closing tag.

4. Click the Save & Close button.

Read more: Joomla installation guide

Easy integration → immediate results

At Hotjar, we pride ourselves on making tools that everyone can not only use but install easily. This means you can start collecting and analyzing results right out of the box instead of asking for help from your dev team and having to wait for them to get back to you. Install Hotjar and you could be learning about your users and their behavior by the end of the day.