We’re trying to embed the Genesys Cloud Messenger widget into a Next.js 14 app using the App Router. The goal is to have the widget load on the customer-facing landing page without redirecting them to a separate chat window.
The issue hits hard on the client side. The widget script loads, but the initial handshake to the Genesys API fails with a CORS error. The browser console shows:
Access to fetch at 'https://api.mypurecloud.com/api/v2/webmessaging/guests/sessions' from origin 'https://myapp.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’ve checked the Developer Portal and added https://myapp.vercel.app to the allowed origins for the Web Messaging app. I even tried adding * just to test, but it didn’t help. The widget works fine if I host the same HTML file on a static S3 bucket, so the app config seems okay. It’s definitely something about how Next.js handles the client-side fetch or the SSR hydration.
Here’s the snippet where we initialize the widget:
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://mypurecloud.com/js/messenger.js';
script.async = true;
document.body.appendChild(script);
window.addEventListener('load', () => {
window.GenesysCloudMessenger.init({
deploymentId: 'abc-123',
locale: 'en-US'
});
});
return () => {
document.body.removeChild(script);
};
}, []);
Is there a specific header we need to proxy through Next.js middleware.ts? Or is the SDK expecting a different origin header during the handshake?