I’m trying to embed the standard Genesys Cloud Messenger widget into a React application built with Next.js 14. We’re using the App Router, so the pages are mostly server-rendered by default, though I’ve tried marking the page as client-only with 'use client' just in case.
The widget loads fine in a basic HTML test page, but in the Next.js app, the browser console throws a CORS error immediately when the script tries to initialize. It looks like the fetch request to the Genesys configuration endpoint is failing because the Origin header isn’t being handled correctly by the client-side request.
Here is the snippet I’m using to inject the widget:
'use client';
import { useEffect } from 'react';
export default function MessengerWidget() {
useEffect(() => {
// Configuration object
const config = {
brandId: 'abc-123-def-456',
brandName: 'Support',
brandColor: '#005FB8',
brandIconUrl: 'https://example.com/icon.png',
brandUrl: 'https://example.com',
brandLogoUrl: 'https://example.com/logo.png',
};
// Injecting the script
const script = document.createElement('script');
script.src = 'https://apps.mypurecloud.com/webmessenger/sdk/v1/widget.js';
script.async = true;
script.onload = () => {
if (window.webMessenger) {
window.webMessenger.create(config);
}
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return null;
}
The error message in the console is:
Access to fetch at 'https://api.mypurecloud.com/api/v2/...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’ve checked the Genesys Cloud admin settings and added http://localhost:3000 to the allowed origins for the web messaging channel. I’ve also tried adding a custom header in the Next.js middleware, but that doesn’t seem to affect the client-side fetch initiated by the widget script.
Is there a specific way to configure the Next.js environment or the widget initialization to bypass this? I’m not seeing any obvious SDK method to set the origin manually.
The build works locally, but the widget remains invisible because the initialization fails silently after the CORS error.