Skip to main content
Customize the user interface (UI) of the chat to better fit your website’s design and enhance the user experience. You can modify various aspects of the chat UI, including layout, styles, header options, and language settings. Controls the visibility of chat header actions. To apply header configuration, add a header component inside the window.wxOConfiguration object in your web chat script. In this component, you can configure the following parameters:
​
header.showResetButton
boolean
default:"true"
Displays the Reset Chat button in the header when set to true.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  header: {
    showResetButton: true
  }
};
​
header.showAiDisclaimer
boolean
default:"true"
Displays the AI disclaimer icon/button in the header when set to true.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  header: {
    showAiDisclaimer: true
  }
};
​
header.showMaximize
boolean
default:"false"
Controls the visibility of the ‘Maximize chat’ button in the chat header.You can combine this parameter with additional layout modifiers, such as:
  • Custom elements: Explicitly set height to the custom element (layout.customElement) to render the chat window within it.
  • Layout and spacing: Configure layout.showMaxWidth to switch between a constrained and full-width layout. A constrained layout adds visual breathing room around the content, while a full-width layout uses the entire chat area with minimal horizontal padding.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  header: {
    showMaximize: true
  },
  layout: {
    showMaxWidth: true
  }
};
​
header.showAgentAvatar
boolean
default:"true"
Hides the agent avatar in the header when set to false.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  header: {
    showAgentAvatar: false
  }
};
​
header.showAgentName
boolean
default:"true"
Hides the agent name in the header when set to false.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  header: {
    showAgentName: false
  }
};

​
Features

Control the visibility and behavior of chat features. To apply feature configuration, add a features component inside the window.wxOConfiguration object in your chat script. In this component, you can configure the following parameters:
​
features.showThreadList
boolean
Controls the visibility of the chat history (thread list) in the side panel.Default behavior varies by layout:
  • fullscreen-overlay: defaults to true
  • float and custom: defaults to false
When enabled, users can view and navigate their conversation history through the side panel.When disabled, the side panel displays only custom header items (if configured).You can explicitly set this to true or false to override the default behavior for any layout.
In the Float and Custom form factors, the thread list can be hidden either by omitting the property (as false is the default) or by explicitly setting showThreadList: false. In the Full-screen form factor, however, you must explicitly set showThreadList: false to hide the thread list, as the default value is true.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  features: {
    showThreadList: true
  }
};
​
features.showAgentMemory
boolean
default:"false"
Controls the visibility of the agent memory button in the side panel.When enabled, users can access the agent memory button to view and delete their memories, or turn the feature off. When disabled, the agent memory button is not displayed.To configure memory for an agent, see the feature implementation in the Understanding agent memory documentation.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  features: {
    showAgentMemory: true
  }
};

​
Language

Define the default language of the chat interface. To apply language configuration, add the following parameters inside the window.wxOConfiguration object in your web chat script:
​
defaultLocale
string
default:"en"
Defines the default language supported by the chat.Supported locale strings:
LanguageLanguage code
Chinese - Traditionalzh-TW
Chinese - Simplifiedzh-CN
Englishen
Frenchfr
Germande
Italianit
Japaneseja
Koreanko
Portuguese - Brazilpt-BR
Spanishes
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  defaultLocale: 'ja'
};

​
Styles

You can customize embedded web chats to create a unique chat interface that better fits your webpage. To apply custom styles, add a style component inside the window.wxOConfiguration object in your web chat script. In this component, you can configure the following parameters:
​
headerColor
string
Set a six-digit hex code that defines the chat header color.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  style: {
    headerColor: '#0f62fe'
  }
};
​
userMessageBackgroundColor
string
Set a six-digit hex code that defines the user message bubble color.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  style: {
    userMessageBackgroundColor: '#0f62fe'
  }
};
​
primaryColor
string
Set a six-digit hex code that defines the interactive elements color.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  style: {
    primaryColor: '#0f62fe'
  }
};
​
fontFamily
string
Set a font style that needs to be applied.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  style: {
    fontFamily: 'Arial, sans-serif'
  }
};
​
showBackgroundGradient
boolean
default:"true"
Displays the background gradient when set to true.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  style: {
    showBackgroundGradient: false
  }
};

​
Layout

Control how and where the chat UI appears. To apply layout configuration, add a layout component inside the window.wxOConfiguration object in your web chat script. In this component, you can configure the following parameters:
​
rootElementID
string
Scope: fullscreen-overlay onlyThe ID of the container node to mount chat into.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  rootElementID: "root",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  }
};
​
showLauncher
boolean
default:"true"
Scope: fullscreen-overlay onlySets the initial launcher visibility: show the bubble launcher (true) or render chat immediately (false). To control launcher visibility at runtime for any layout mode, use the changeView() instance method.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  rootElementID: "root",
  showLauncher: false,
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  }
};
​
layout.form
string
default:"float"
Defines the layout form of your web chat.Use fullscreen-overlay to display the web chat in fullscreen mode. No additional parameters are required.Use float to display the web chat as a floating window. Also configure:
  • width: Width of the web chat
  • height: Height of the web chat
Use custom to define a custom layout. Also configure the customElement parameter with your custom element.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  layout: {
    form: 'float'
  }
};
​
layout.width
string
Scope: float onlyPopup width (e.g. ‘350px’, ‘30rem’).
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  layout: {
    form: 'float',
    width: '600px'
  }
};
​
layout.height
string
Scope: float onlyPopup height (e.g. ‘500px’, ‘40rem’).
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  layout: {
    form: 'float',
    height: '600px'
  }
};
​
layout.showOrchestrateHeader
boolean
default:"true"
Render the standard header bar (true) or hide it (false).
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  layout: {
    showOrchestrateHeader: false
  }
};
​
layout.showMaxWidth
boolean
default:"false"
Switch between a constrained and full-width layout. A constrained layout adds visual breathing room around the content, while a full-width layout uses the entire chat area with minimal horizontal padding.
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  layout: {
    showMaxWidth: true
  }
};
​
layout.customElement
HTMLElement
Element reference to render into.
const hostElement = document.getElementById('custom-chat-container');

window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  chatOptions: {
    agentId: "12345_test_agent1",
    agentEnvironmentId: "my-agent-env-id"
  },
  layout: {
    form: 'custom',
    customElement: hostElement
  }
};