Web Messaging SDK deployment config not applying custom colors or launcher position

Hey everyone,

I’m trying to customize the look and feel of our Genesys Cloud web messaging widget. We want to match our internal WFM portal branding, so I need to change the primary color and move the launcher icon to the left side of the screen instead of the default right side.

I’m using the genesyscloud-webrtc or the newer web messaging SDK. I found the documentation for the deployment configuration, but the changes aren’t sticking. Here is the JSON payload I’m sending to the deployment endpoint:

{
 "deploymentId": "my-deployment-id",
 "config": {
 "primaryColor": "#0055aa",
 "launcherPosition": "left",
 "launcherOffset": {
 "top": "20px",
 "left": "20px"
 }
 }
}

I’m making a PUT request to /api/v2/conversations/webmessaging/deployments/{deploymentId}. The API returns a 200 OK status, which suggests the update was successful. However, when I refresh the page where the widget is embedded, the launcher is still on the right, and the color remains the default Genesys blue.

I’ve cleared my cache and tried incognito mode. I also checked the network tab, and the GET request for the deployment config returns the updated JSON with my custom values. So the backend has the right data, but the frontend isn’t rendering it.

Is there a specific flag I need to set in the JavaScript initialization code? Or is there a delay before deployment configs propagate to the client-side SDK? I’m using the latest version of the SDK.

Here’s how I’m initializing it in my HTML:

const { init } = require('@genesyscloud/web-messaging-sdk');
init({
 deploymentId: 'my-deployment-id',
 organizationId: 'my-org-id'
});

Any ideas what I’m missing? I’ve been staring at this for hours and it’s driving me crazy. The color change is pretty important for our branding guidelines. Thanks.

The config isn’t sticking because you’re likely passing the JSON to the initialization function incorrectly, or you’re mixing up the legacy WebRTC client with the newer Engage SDK. The genesyscloud-webrtc package is pretty much deprecated for new deployments. You should be using @genesyscloud/engage-sdk.

The deployment config needs to be passed as a plain object to the createEngagement or the main SDK initialization, not as a raw JSON string. Also, the perty for the launcher position is launcherPosition, not just position.

Try this setup. It’s the standard pattern we use in our hybrid environment:

import { createEngagement } from '@genesyscloud/engage-sdk';

const deploymentConfig = {
 deploymentId: 'YOUR_DEPLOYMENT_ID',
 config: {
 primaryColor: '#0056b3', // Your brand color
 launcherPosition: 'left', // 'left' or 'right'
 launcherVerticalPosition: 'bottom', // 'top' or 'bottom'
 launcherGap: 20, // pixels from edge
 launcherOffset: 20, // pixels from corner
 headerTitle: 'Support',
 headerSubtitle: 'Chat with us'
 }
};

// Initialize
const engagement = await createEngagement(deploymentConfig);

If you’re still seeing the right-side launcher, clear your browser cache. The SDK caches the last known config in localStorage sometimes, which is a pain. You can also force a refresh by adding a timestamp query param to your script tag if you’re loading it via CDN.

Double-check that your deployment ID is actually for a Web Messaging deployment, not a Pure Chat one. They don’t share the same config schema.