Setup hotjar integration

src/App.jsx

@@ -12,7 +12,7 @@ import Experience from './components/experience';
 import Education from './components/education';
 import Project from './components/project';
 import Blog from './components/blog';
-import { getInitialTheme } from './helpers/utils';
+import { getInitialTheme, setupHotjar } from './helpers/utils';
 
 function App() {
   const [theme, setTheme] = useState(getInitialTheme());
@@ -28,6 +28,10 @@ function App() {
     }
   }, [theme]);
 
+  useEffect(() => {
+    setupHotjar();
+  }, []);
+
   const loadData = useCallback(() => {
     axios
       .get(`https://api.github.com/users/${config.github.username}`)

src/ezprofile.config.js

@@ -86,6 +86,10 @@ const config = {
     // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
     id: 'G-WLLB5E14M6', // Please remove this and use your own tag id or keep it empty
   },
+  hotjar: {
+    id: '2617601', //  Please remove this and use your own id or keep it empty
+    snippetVersion: 6,
+  },
   themeConfig: {
     default: 'light',
 

src/helpers/utils.jsx

@@ -1,5 +1,6 @@
 import config from '../ezprofile.config';
 import colors from '../data/colors.json';
+import { hotjar } from 'react-hotjar';
 
 export const getInitialTheme = () => {
   if (config.themeConfig.disableSwitch) {
@@ -85,3 +86,13 @@ export const isThemeDarkish = (theme) => {
     return false;
   }
 };
+
+export const setupHotjar = () => {
+  if (config.hotjar?.id) {
+    let snippetVersion = config.hotjar?.snippetVersion
+      ? config.hotjar?.snippetVersion
+      : 6;
+
+    hotjar.initialize(config.hotjar.id, snippetVersion);
+  }
+};