Web Messaging SDK: Customizing launcher position and colors

NICE CXone API & Integrations
1

Hey everyone,

I’m trying to customize the look and feel of the Web Messaging widget for our support portal. I’ve got the basic deployment working, but I need to match our brand colors and move the launcher to the bottom left instead of the default right side.

I’m using the standard snippet from the docs, but I’m not sure where to inject the config object. I tried passing a theme object in the createWidget call, but it’s not sticking.

Here’s what I’ve got so far:

const widget = GenesysWebMessaging.createWidget({
 orgId: "our-org-id",
 siteName: "support-site",
 theme: {
 primaryColor: "#0056b3",
 launcherPosition: "bottom-left"
 }
});

The widget loads, but the button stays on the right and the color is the default blue. I checked the network tab and don’t see any errors, just the standard handshake. Am I missing a specific API endpoint call to apply these settings, or is this handled entirely client-side?

Any pointers on the right config structure would be appreciated. I’ve been staring at the docs for an hour and it’s not clicking.

2

The createWidget API doesn’t accept a theme object directly in that call. You need to configure the launcher position and colors in the Genesys Cloud Admin UI under Messaging > Channels > Web Messaging, or use the genesys-cloud-messaging-sdk config object before initialization. Don’t hardcode styles in the snippet.