I am trying to integrate the Genesys Cloud Messenger widget into a Next.js application. The goal is to have the chat available on the landing page. I am using the standard script tag injection method inside a custom hook that runs on the client side.
The issue is that I am getting a CORS error in the browser console. The error says:
Access to script at 'https://messaging.cloud.ge.../widget.js' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This happens when the page first loads. It seems like the server-side rendering (SSR) part of Next.js is trying to fetch the script or there is some preloading happening that fails because the server doesn’t have the right headers or the browser blocks it before hydration.
Here is the hook I am using to load the script:
import { useEffect } from 'react';
export const useGenesysMessenger = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = 'https://messaging.cloud.ge.../widget.js';
script.async = true;
document.body.appendChild(script);
}
}, []);
};
I have tried adding the crossorigin="anonymous" attribute to the script tag. That did not help. I also tried configuring the next.config.js to add CORS headers, but that affects API routes, not third-party script loading.
The widget works if I disable SSR and use Client Side Rendering only for that specific page. But I need the landing page to be SSR for SEO reasons.
Is there a way to force the script to load only on the client without triggering the CORS check during the initial server request? Or is there a different way to inject the widget that avoids this?
I have checked the network tab. The request is being made. It returns a 200 OK. But the browser console shows the CORS error and the script does not execute. The widget does not appear.
Any ideas?