TUTORIAL

How to add Hotjar to your Smart Forms

Easily integrate with Hotjar using our execute_js function

In this world nothing can be said to be certain, except death and taxes… and our love for Python ❀️🐍 It's a versatile, world-class language fit for multiple needs from data analysis to development, handy for the back-end dev, but also for the operations analyst.

‍

But every superhero needs their sidekick, and Python sure can walk hand in hand with Javascript. We added the Execute JS function to our lib so you can execute any Javascript code on the browser during your form's run.

‍

A great use case we're seeing often is analytics, such as integration to Google Analytics or Hotjar, to better understand your form's usage. Check out how to use execute_js to integrate your Smart Form with Hotjar in 3 simple steps:

‍

1. Get your tracking code

First things first, let's settle Hotjar's own configs. Go to your Sites page in Hotjar and get your tracking code.

‍

Image from Hotjar

‍

Image from Hotjar

‍

‍

2. Add this code to the beginning of your Smart Form

Now for the only actual Abstra-related step. To track the usage of whatever Form you already have running, just add the execute_js function to the beginning of your code with your tracking code inside. This is how ours looked like:

‍


from abstra.forms import *

execute_js(
    """
(function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:"your_hotjar_id",hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
"""
)

‍

Just hit deploy again to update the URL you're already sharing with coworkers and clients! We added it to a Lead Gen form, to safely understand potential client's behavior.

‍

3. Check out your recordings

Head back to Hotjar to see your Smart Forms in action, in the wild βœ…

‍

‍

Use our execute_js function to easily supercharge your Form with thousands of services.

‍

Got a use case in mind? We'll help you build it in 15 minutes - click here.