topic Re: Chat integration in Next.js 13 in CMS Development

Chat integration in Next.js 13

MQasim2 — Wed, 05 Jul 2023 06:51:56 GMT

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>

);

};

Re: Chat integration in Next.js 13

himanshurauthan — Wed, 05 Jul 2023 10:53:54 GMT

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> ); };

Re: Chat integration in Next.js 13

JMaestro — Wed, 02 Aug 2023 04:27:25 GMT

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]);

Re: Chat integration in Next.js 13

MMalaya — Sat, 30 Sep 2023 12:08:07 GMT

Check out the Next.js documentation for project with:
1. app router: https://nextjs.org/docs/app/building-your-application/optimizing/scripts
2. page router: https://nextjs.org/docs/pages/building-your-application/optimizing/scripts