Chat integration in Next.js 13

Developer Support CMS Development
1

I’m using this code to add a chat box in my next.js app page. When I navigate through my app and come back to the chat page the chat box dosn’t appear until I refresh.
I doest appear the first time after that it requirs refresh to appear.

const HubSpotChat: React.FC = () => {

useEffect(() => {

// HubSpot configuration object

window.hsConversationsSettings = {

loadImmediately: true,

inlineEmbedSelector: “#my-chat-container”,

enableWidgetCookieBanner: true,

disableAttachment: true,

};

// Load the HubSpot script on the client-side

const script = document.createElement(“script”);

script.src = “//js-na1.hs-scripts.com/xxxxxx.js”; // Replace XXXXXX with your HubSpot script ID

script.id = “hs-script-loader”;

script.async = true;

// Check if the HubSpot script is already loaded

const existingScript = document.getElementById(“hs-script-loader”);

if (!existingScript) {

// Append the script to the body if it’s not already there

document.body.appendChild(script);

}

// Clean up the script when the component unmounts

return () => {

const scriptElement = document.getElementById(“hs-script-loader”);

if (scriptElement) {

scriptElement.remove();

}

};

}, []);

return (

<div>

<div id=“my-chat-container”></div>

</div>

);

};

2

Hello @MQasim2
The reason why the chat box doesn’t appear until you refresh the page is because the HubSpot script is not being loaded on the initial page load. This is because the useEffect hook is only triggered when the component mounts, and not when the page is loaded.
you need to move the code that loads the HubSpot script outside of the useEffect hook. You can do this by adding the following code to the top of the component.

const script = document.createElement("script");
script.src="//js-na1.hs-scripts.com/xxxxxx.js"; // Replace XXXXXX with your HubSpot script ID
script.id = "hs-script-loader";
script.async = true;

document.body.appendChild(script);

This will load the HubSpot script on the initial page load, and the chat box should appear without having to refresh the page.

Here is the updated code for the HubSpotChat component:

const HubSpotChat: React.FC = () => {
 const script = document.createElement("script");
 script.src="//js-na1.hs-scripts.com/xxxxxx.js"; // Replace XXXXXX with your HubSpot script ID
 script.id = "hs-script-loader";
 script.async = true;

 document.body.appendChild(script);

 return (
 <div>
 <div id="my-chat-container"></div>
 </div>
 );
};
3

Hi, I used the method shared by @himanshurauthan. My concern is that I want to load different chatbots on route change with Next 13. I have tried every possible means to no avail. Below is a sample script:

import { usePathname } from "next/navigation";const pathname = usePathname();useEffect(() => { const scriptUrl = "http://js-eu1.hs-scripts.com/xxx.js"; const existingScript = document.querySelector(script[src=“${scriptUrl}”]); if (existingScript) { existingScript.remove(); } const script = document.createElement("script"); script.src=scriptUrl; script.id = "hs-script-loader"; document.body.appendChild(script);}, [pathname]);

4

Check out the Next.js documentation for project with:
1. app router: Guides: Scripts | Next.js
2. page router: Guides: Scripts | Next.js