I have been trying to use Hubspot chat in company website (https://machinerypartner.com/) and we tried many times, but seems Hubspot cannot work on Nextjs 14. I tried many ways like the others posts in forum, but without success
I created that hubspot tracker also to try those connections, and seems not working neither
‘use client’;
import { useEffect, useRef } from ‘react’;
import { usePathname, useSearchParams } from ‘next/navigation’;
const HubspotTracker = () => {
const pathname = usePathname()
const searchParams = useSearchParams()
const searchParamsDict = Object.fromEntries(searchParams ? searchParams.entries() : [])
var firstLoad = useRef(true);
useEffect(() => {
if (typeof window !== ‘undefined’) {
var _hsq = (window._hsq = window._hsq || []);
window.hsConversationsSettings = {
loadImmediately: true,
inlineEmbedSelector: “#my-chat-container”,
enableWidgetCookieBanner: true,
disableAttachment: true,
};
if (firstLoad.current === true) {
_hsq.push([‘setPath’, pathname]);
_hsq.push([‘trackPageView’]);
// I think we only need the trackPageView entry once before the identify.
_hsq.push([‘setPath’, pathname]);
_hsq.push([‘trackPageView’]);
window.HubSpotConversations?.widget?.load()
window.HubSpotConversations?.widget?.refresh()
firstLoad.current = false;
} else {
_hsq.push([‘setPath’, pathname]);
_hsq.push([‘trackPageView’]);
window.HubSpotConversations?.widget?.load()
window.HubSpotConversations?.widget?.refresh()
}
}
}, [pathname, searchParamsDict]);
return null;
};
export default HubspotTracker;
My script:
<Script
src=“https://js.hs-scripts.com/MY_CODE_HERE.js”
strategy=“beforeInteractive”
id=“hs-script-loader”
async
defer
/>
Can u guys provide some help?
I agree with your findings, finding support for NextJS in the community is challenging. I did find a few community members who’ve helped with these types of questions in the past, and I’d like to invite them to the converstaion — hey