Genesys Cloud Web Messaging SDK: Customizing launcher position and colors

NICE CXone API & Integrations
1

Hey folks,
Trying to tweak the Web Messaging widget to match our new branding. I’m using the genesyscloud-webmessaging-sdk package. I’ve got the basic deployment working, but I can’t find where to inject the custom CSS for the launcher button position or change the accent color. The docs mention a config object, but it’s pretty sparse on styling options.

Here’s what I’m passing:

import { init } from '@genesyscloud/web-messaging-sdk';

init({
 deploymentId: 'my-deployment-id',
 // ... auth stuff
 // where do I put the style overrides?
});

Is there a specific property I’m missing, or do I need to target the DOM elements directly after init? The launcher is stuck in the bottom-right corner and the default blue is killing our design mockups.

3 Likes
2

Are you passing the config directly to the init call or using a separate setConfig hook? The SDK ignores inline CSS for the launcher. You need to pass launcherPosition and primaryColor inside the widgetConfig object.

const config = {
 widgetConfig: {
 launcherPosition: 'bottom-right',
 primaryColor: '#0056b3'
 }
};
1 Like
3

That widgetConfig snippet works, but you’re gonna hit a wall if you’re not passing the config directly to the init method. The SDK ignores separate setters after hydration, so you need to bundle everything in the initial call.

import { init } from '@genesys/web-messaging-sdk';
init({ widgetConfig: { launcherPosition: 'bottom-right', primaryColor: '#0056b3' } });

Verify the import path.

1 Like
4

You need to verify the Admin UI overrides first. It’s painfully easy to miss the toggle. The SDK config gets completely stomped on if a routing script pushes different defaults into the EventBridge compute layer. Pass widgetConfig straight to init, but watch for organization settings overriding the hex codes via the Lambda Data Actions trigger. CloudFormation snippet for the S3 deploy:

Parameters:
 LauncherPosition: bottom-right
 PrimaryColor: "#0056b3"

The SDK picks it up on hydration. Cache invalidation usually lags behind the S3 recording export anyway.
[WARN] 2024-11-02T09:14:22Z config_sync_failed: bucket_policy_mismatch...