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:
ParameterTypeDefaultDescription
header.showResetButtonBooleantrueDisplays the Reset Chat button in the header when set to true.
header.showAiDisclaimerBooleantrueDisplays the AI disclaimer icon/button in the header when set to true.
header.showMaximizeBooleanfalseControls 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.
  • Padding: Define layout.showMaxWidth to control whether additional vertical padding is applied between the chat border and content container.
The following is an example of how to customize the embedded web chat header: 
<script>
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  rootElementID: "root",            // fullscreen-overlay only
  showLauncher: false,              // fullscreen-overlay only, false = direct render, true = launcher bubble
  chatOptions: {
    agentId: "12345_test_agent1",            // required
    agentEnvironmentId: "my-agent-env-id"    // required
  },
  header: {
    showResetButton: true,   // optional; defaults to true
    showAiDisclaimer: true,   // optional; defaults to true
    showMaximize: false  // optional; defaults to false
  },
};

setTimeout(function() {
  const script = document.createElement('script');
  script.src = `${window.wxOConfiguration.hostURL}/wxochat/wxoLoader.js?embed=true`;
  script.addEventListener('load', () => wxoLoader.init());
  document.head.appendChild(script);
}, 0);
</script>

​
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:
ParameterTypeDefaultDescription
defaultLocaleStringenDefines the default language supported by the chat.
The following table lists the supported locale strings:
LanguageLanguage code
Chinese - Traditionalzh-TW
Chinese - Simplifiedzh-CN
Englishen
Frenchfr
Germande
Italianit
Japaneseja
Koreanko
Portuguese - Brazilpt-BR
Spanishes
The following is an example of how to customize the embedded web chat language: 
<script>
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  rootElementID: "root",            // fullscreen-overlay only
  showLauncher: false,              // fullscreen-overlay only, false = direct render, true = launcher bubble
  chatOptions: {
    agentId: "12345_test_agent1",            // required
    agentEnvironmentId: "my-agent-env-id"    // required
  },
  defaultLocale: 'ja',
};

setTimeout(function() {
  const script = document.createElement('script');
  script.src = `${window.wxOConfiguration.hostURL}/wxochat/wxoLoader.js?embed=true`;
  script.addEventListener('load', () => wxoLoader.init());
  document.head.appendChild(script);
}, 0);
</script>

​
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:
ParameterTypeDefaultDescription
headerColorString—Set a six-digit hex code that defines the chat header color.
userMessageBackgroundColorString—Set a six-digit hex code that defines the user message bubble color.
primaryColorString—Set a six-digit hex code that defines the interactive elements color.
showBackgroundGradientBooleantrueDisplays the background gradient when set to true.
The following is an example of how to customize the embedded web chat styles: 
<script>
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  rootElementID: "root",            // fullscreen-overlay only
  showLauncher: false,              // fullscreen-overlay only, false = direct render, true = launcher bubble
  chatOptions: {
    agentId: "12345_test_agent1",            // required
    agentEnvironmentId: "my-agent-env-id"    // required
  },
   style: {
    headerColor: '', //6-digit hex value or empty for default
    userMessageBackgroundColor: '', //6-digit hex value or empty for default
    primaryColor: '', //6-digit hex value or empty for default
    showBackgroundGradient: true, // optional; defaults to true
  },
};

setTimeout(function() {
  const script = document.createElement('script');
  script.src = `${window.wxOConfiguration.hostURL}/wxochat/wxoLoader.js?embed=true`;
  script.addEventListener('load', () => wxoLoader.init());
  document.head.appendChild(script);
}, 0);
</script>

​
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:
ParameterTypeDefaultScopeDescription
rootElementIDString—fullscreen-overlay onlyThe ID of the container node to mount chat into.
showLauncherBooleantruefullscreen-overlay onlyShow the bubble launcher (true) or render chat immediately (false).
layout.formStringfloat—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.
layout.widthString—float onlyPopup width (e.g. ‘350px’, ‘30rem’).
layout.heightString—float onlyPopup height (e.g. ‘500px’, ‘40rem’).
layout.showOrchestrateHeaderBooleantrue—Render the standard header bar (true) or hide it (false).
layout.showMaxWidthBooleanfalse—Controls whether additional vertical padding is applied between the chat border and content container.
layout.customElementHTMLElement——Element reference to render into.
The following is an example of how to customize the embedded web chat layout: 
<script>
window.wxOConfiguration = {
  orchestrationID: "my-tenant-id",
  hostURL: "my-host-url",
  rootElementID: "root",            // fullscreen-overlay only
  showLauncher: false,              // fullscreen-overlay only, false = direct render, true = launcher bubble

  chatOptions: {
    agentId: "12345_test_agent1",            // required
    agentEnvironmentId: "my-agent-env-id"    // required
  },

  layout: {
    form: 'float',                           // 'fullscreen-overlay' | 'float' | 'custom'
    width: '600px',                          // float only
    height: '600px',                         // float only
    showOrchestrateHeader: true,            // hide header if false
    showMaxWidth: true,                     // optional; defaults to false
    customElement: hostElement              // custom only
  }
};

setTimeout(function() {
  const script = document.createElement('script');
  script.src = `${window.wxOConfiguration.hostURL}/wxochat/wxoLoader.js?embed=true`;
  script.addEventListener('load', () => wxoLoader.init());
  document.head.appendChild(script);
}, 0);
</script>