Adding HubSpot chat widget to specific page in Next.js 13 TypeScript project

[SkippingLeaf]

I’m working on a Next.js 13 app with TypeScript and trying to add HubSpot’s chat widget to only one specific page called “Support”. The chat widget works perfectly when I refresh the page directly, but there’s a problem when I navigate from other pages. When I click through the navigation menu to reach the Support page, the chat widget doesn’t show up at all. It only appears if I manually refresh the browser on that page.

I need the chat functionality to work properly regardless of how users reach the Support page. Has anyone dealt with this routing issue before? I’m looking for a solution that ensures the HubSpot chat loads correctly both on direct page access and when navigating through the app.

function SupportPage() {
  // chat integration logic here
  return (
    <div>
      <h1>Customer Support</h1>
      {/* HubSpot chat should appear here */}
    </div>
  );
}

[mikechen]

Classic Next.js client-side routing problem. HubSpot loads fine on refresh but won’t reinitialize when you use router.push or Link components. Had this exact issue last year. Check if the HubSpot object exists in window before loading the script again. Either remove and re-add the script element in useEffect, or call HubSpot’s API to manually show the widget if it’s already loaded. Don’t forget cleanup in the useEffect return - otherwise you’ll get multiple chat widgets stacking up. Treat each navigation like a fresh page load for the widget.

[SwiftCoder15]

I encountered a similar issue with the HubSpot chat widget in a Next.js application. The challenge stems from the fact that Next.js does not reload the script when you navigate between pages using client-side routing. To resolve this, I implemented a custom hook that dynamically loads the HubSpot script when the Support page mounts. It’s essential to ensure the script is removed upon component unmounting, allowing for proper initialization each time users navigate to the Support page. This approach maintains a single instance of the widget and ensures functionality regardless of how users access the page.

[Liam23]

yep, that sounds like the script just isn’t loading when you nav. try wrapping the widget setup in useEffect to run on every mount. also, maybe check if HubSpot has a manual trigger - a lot of chat widgets do.