feat(hubspot-integration): add HubSpot script component for production environment
- Introduced a new HubSpot component that dynamically loads the HubSpot tracking script when in production. - Updated MainLayout to replace TawkTo with HubSpot for improved customer engagement tracking.
This commit is contained in:
24
worklenz-frontend/src/components/HubSpot.tsx
Normal file
24
worklenz-frontend/src/components/HubSpot.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
const HubSpot = () => {
|
||||||
|
useEffect(() => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.type = 'text/javascript';
|
||||||
|
script.id = 'hs-script-loader';
|
||||||
|
script.async = true;
|
||||||
|
script.defer = true;
|
||||||
|
script.src = '//js.hs-scripts.com/22348300.js';
|
||||||
|
document.body.appendChild(script);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const existingScript = document.getElementById('hs-script-loader');
|
||||||
|
if (existingScript) {
|
||||||
|
existingScript.remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HubSpot;
|
||||||
@@ -7,7 +7,7 @@ import { colors } from '../styles/colors';
|
|||||||
import { verifyAuthentication } from '@/features/auth/authSlice';
|
import { verifyAuthentication } from '@/features/auth/authSlice';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||||
import TawkTo from '@/components/TawkTo';
|
import HubSpot from '@/components/HubSpot';
|
||||||
|
|
||||||
const MainLayout = () => {
|
const MainLayout = () => {
|
||||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||||
@@ -68,9 +68,7 @@ const MainLayout = () => {
|
|||||||
<Outlet />
|
<Outlet />
|
||||||
</Col>
|
</Col>
|
||||||
</Layout.Content>
|
</Layout.Content>
|
||||||
{import.meta.env.VITE_APP_ENV === 'production' && (
|
{import.meta.env.VITE_APP_ENV === 'production' && <HubSpot />}
|
||||||
<TawkTo propertyId="67ecc524f62fbf190db18bde" widgetId="1inqe45sq" />
|
|
||||||
)}
|
|
||||||
</Layout>
|
</Layout>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user