Can You Add Hotjar to Webflow?

Have you ever wondered if you can add Hotjar to your Webflow website? Well, the answer is yes! In this tutorial, we will guide you through the process of integrating Hotjar into your Webflow site, so you can gain valuable insights into how your visitors interact with your website.

What is Hotjar?

Hotjar is a powerful analytics and feedback tool that allows you to understand user behavior on your website. It provides heatmaps, visitor recordings, conversion funnels, and more.

With Hotjar, you can see where users click, how far they scroll on a page, and even watch recordings of their sessions. This information helps you identify usability issues and make data-driven decisions to improve the user experience.

Adding Hotjar to Webflow

The process of adding Hotjar to your Webflow site is straightforward. Follow these steps:

  • Create a Hotjar account: If you don’t have one already, head over to the Hotjar website and sign up for an account. They offer a free plan with limited features, which is perfect for getting started.
  • Generate the tracking code: Once logged in to your Hotjar account, navigate to the installation section and generate the tracking code for your website.
  • Add the tracking code to Webflow: Now it’s time to add the tracking code to your Webflow site.

    In the Webflow Designer, go to Project Settings > Custom Code.

  • Paste the code: Within the Custom Code section, find the “” tag and paste the Hotjar tracking code just before it. This ensures that the code is properly loaded on all pages of your website.
  • Publish your changes: After pasting the tracking code, save your changes and publish your Webflow site. The Hotjar tracking code will now be active on your website.

Confirming Hotjar Integration

To confirm if Hotjar is successfully integrated into your Webflow site, follow these steps:

  1. Open your website: Visit your live Webflow site in a new browser tab or window.
  2. Check for the Hotjar script: Right-click on the page and select “Inspect” (or use the keyboard shortcut Ctrl+Shift+I). In the developer console, navigate to the “Elements” or “Sources” tab and search for the Hotjar script.

    If you can find it, then it’s working!

  3. Explore Hotjar’s features: Now that Hotjar is integrated, log in to your Hotjar account and start exploring its various features. Set up heatmaps, create visitor recordings, and analyze user behavior to gain insights into how visitors interact with your Webflow site.

Congratulations!

You have successfully added Hotjar to your Webflow website. By using this powerful analytics tool, you can now better understand user behavior and make informed decisions to enhance the user experience. With heatmaps, visitor recordings, and other features at your disposal, you have valuable data at hand to optimize your website’s performance.

Note: It may take some time for data to populate in your Hotjar account after integration. So be patient and keep an eye on the insights as they start rolling in!

Now that you know how to integrate Hotjar with Webflow, go ahead and make the most of this powerful tool. Happy analyzing!