Customizing the Webex Contact Center Agent Desktop layout
Webex Contact Center
Verified 2026-09-30 · 53 sources · tier 2–4
For Webex Contact Center administrators who configure Agent Desktop layouts and developers building custom widgets..
Webex Contact Center allows administrators to customize the Agent Desktop layout using JSON definitions to configure branding, navigation, panel tabs, and custom widgets 4. Assigning a custom layout overrides the system-generated Global Layout for designated agent-based teams 9.
Before you start
- Confirm that target teams are Agent Based, as the Desktop layout field is present only on agent-based teams and does not apply to capacity-based teams 4050.
- Verify that agent browsers meet supported versions, specifically Chrome 144+, Microsoft Edge 144+, or Firefox 140+ 51.
- Note that the Global Layout is assigned by default when a team is created and cannot be deleted 1516.
What changes by situation
Pick your answers to see only your path. Nothing is sent anywhere until you make a plan.
Two questions. One permanent page you can send to your manager.
Step 1 Inventory teams, personas, and supervisors
Do
- Identify all agent-based teams intended to receive a customized desktop 40.
- Identify the primary team for each supervisor, as a supervisor receives the desktop layout assigned to their primary team upon sign-in 37.
- Plan the required modifications across the 3 persona sections defined in the layout:
agent,supervisor, andsupervisorAgent41.
Verify
Confirm in Control Hub under Services > Contact Center > User Management > Teams that each target team is an agent-based team displaying a Desktop layout drop-down under Agent settings 4050.
Step 2 Accept the custom layout maintenance lifecycle
Do
- Review the operational impact of creating a modified layout: an unmodified layout receives new Cisco desktop features automatically, whereas custom layouts do not 42.
- Note that downloading
Default Desktop Layout.jsonand uploading it again marks the layout as modified, even if neither the content nor the filename is changed 33. - Plan for periodic manual refreshes to merge new platform capabilities into the custom layout definition 8.
Verify
Suggested check: ensure an administrative schedule is established to evaluate new Agent Desktop release features and merge them into the custom JSON.
Rollback
Suggested rollback: if automatic updates are preferred over custom layouts, discontinue changes; teams remain on the default Global Layout 15.
Step 3 Download the default layout JSON
Do
- Sign in to Control Hub and navigate to Services > Contact Center > Desktop Experience > Desktop Layouts 6.
- Select Create desktop layout 6.
- Download
Default Desktop Layout.jsonfrom the create layout page 12. - While legacy CRM guides cite Management Portal > Provisioning > Desktop Layout, WarmTransfer's reading of the sources is that the Control Hub path must be used instead 2243.
Verify
Open the downloaded file in a text editor and confirm it contains top-level sections for agent, supervisor, and supervisorAgent 41. Suggested check: keep an untouched copy of this baseline file.
Step 4 Edit top-level persona properties
Do
- Open the JSON file in an editor and maintain strict case sensitivity across all property names 5.
- Configure
appTitlefor the horizontal header text, and setlogoto a hosted image URL or to"no-logo"to remove it 3. - Configure
notificationTimer(valid range 1 to 10, default 8 seconds) andmaximumNotificationCount(valid range 1 to 10, default 3) 27. - Define icon order on the horizontal header using
headerActionswith array valueswebex,outdial, andnotification, or use an empty array to remove all icons 18. - Set
desktopChatApp.webexConfiguredtotrueif the Webex App icon should appear in the header 45. - Set
dragDropEnabledtotrueif agents should be allowed to drag, drop, and resize widgets on custom pages 13.
Verify
Validate that the file is well-formed JSON and that notificationTimer and maximumNotificationCount values do not exceed 10 or drop below 1 27.
Rollback
Suggested rollback: discard changes and restore properties from the untouched default JSON baseline.
Step 5 Configure navigation, auxiliary panels, and the header
Do
Modify the area object within each persona 4:
- Header: Sizing for header widgets must fit the 64-pixel horizontal header height 17. When configuring
advancedHeader, the standard header is omitted, andadvancedHeadercontrols the order and visibility of built-in components and custom widgets 2. - Navigation: In
area.navigation, configure custom page objects alongside their menu entries 24:- Populate
navwithlabel(used for screen readers and tooltips),icon(Momentum Design library icon or custom URL), andiconTypeset tomomentumDesignorother23. - Specify
navigateTofor the page route, which sets the browser address bar path (for example,desktop.wxcc-us1.cisco.com/custom-page-sample) 26. - Structure page layout using
pagegrid definitions containing areas and row/column size arrays 29.
- Populate
- Auxiliary Information Pane: In
area.panel, adjust themd-tabsconfiguration 30. Reorder, remove, or supplement the default tabs: Contact History, IVR Transcript, Customer Experience Journey, and Screen Pop 3052.
Verify
- Confirm no
navigateTopath matches any reserved identifier:images,fonts,css,build_info,help,app,i18n,icons,images-mfe-wc, orsounds25. - Verify that if multiple navigation pages set
isDefaultLandingPagetotrue, the first occurrence in the file is intended, as the first page encountered becomes the default landing page 21.
Rollback
Suggested rollback: revert the area object properties to the layout configuration from the default baseline file.
Step 6 Add desktop widgets
Stock components only
Do
- To embed an external web application, add an
agentx-wc-iframewidget into a navigation page or an auxiliary panel tab 202930. - Configure the widget with a
srcURL and optionalstylesettings 20. - Add a
wrapperobject to supply a toolbar containing a title and a maximize icon if needed 47.
Verify
Confirm that the widget element comp is set to agentx-wc-iframe and that a valid src URL is defined 20.
Rollback
Suggested rollback: delete the agentx-wc-iframe widget entry from the JSON layout.
Custom web-component widgets
Do
- Develop the widget as a Web Component; CiscoDevNet provides Lit, React, and Angular starter boilerplates using the
@wxcc-desktop/sdknpm package 4849. - Build and validate widgets in a Webex Contact Center developer sandbox if one is provisioned 11.
- Reference the component in the layout by setting
compto the custom element tag name andscriptto the hosted bundle URL 46. - Supply data to the component using
attributesandproperties, using$STOREpaths (such as$STORE.agent.agentName) to inject real-time Agent Desktop data without separate SDK subscribers 4736. - Place background tasks in the
headlesssection so they remain hidden while executing background logic 419. - Place cross-page widgets in the
persistentsection so they display across all pages and appear as a tab in the Auxiliary Information pane during an active contact 431.
Verify
- Verify that the
compvalue contains only the element tag name without angle brackets< >46. - Confirm that the
scriptURL is stable; changing a component's script URL requires agents to clear browser cache and reload the desktop 35.
Rollback
Suggested rollback: remove the custom widget entry from the layout JSON; if a script URL change was pushed, instruct agents to clear browser cache and reload 35.
Step 7 Validate layout JSON before upload
Do
WarmTransfer's reading of the sources is that upload validation checks and error messages are undocumented, so manually check the JSON against platform constraints 44:
- Ensure property names strictly match documented casing 5.
- Confirm no navigation entry uses reserved
navigateTopaths 25. - Check that
notificationTimerandmaximumNotificationCountare integers from 1 to 10 27. - Confirm that the
ROOTlayout is not nested as a sublayout ofROOT, which triggers an infinite loop and call stack exceeded error 34.
Verify
Suggested check: compare the modified file against the original default file using a JSON diff tool to ensure all structural modifications match the intended design.
Step 8 Create layout in Control Hub and assign teams
One custom layout for every team
Do
- In Control Hub, navigate to Services > Contact Center > Desktop Experience > Desktop Layouts and select Create desktop layout 6.
- Enter a Name and Description 7.
- Select all agent-based teams in the Teams drop-down 7.
- Upload the modified layout JSON file and click Create 7.
Verify
Open Create desktop layout again and confirm the assigned teams are no longer selectable in the Teams drop-down, as teams with an assigned custom layout drop out of the list 38.
Rollback
Different layouts per team or group of teams
Do
- WarmTransfer's reading of the sources is that preparing distinct layout variants per team experience group is needed because each team carries at most 1 custom layout 28.
- For each variant, navigate in Control Hub to Services > Contact Center > Desktop Experience > Desktop Layouts and click Create desktop layout 6.
- Specify a unique Name and Description, select only the specific teams assigned to this variant, upload the corresponding JSON file, and click Create 7.
- WarmTransfer's reading of the sources is that this creation process is repeated for each subsequent team layout variant 28.
Verify
Verify that each target team is assigned to exactly 1 layout; WarmTransfer's reading of the sources is that previously assigned teams drop out of the Teams list on subsequent layouts 3828.
Rollback
- To disable a specific layout variant, open it in Desktop Layouts, switch the toggle to Inactive, and click Save 114.
- Alternatively, reassign the team's layout directly via Services > Contact Center > User Management > Teams using the Desktop layout drop-down 4039.
- Ensure a layout is inactive before attempting to delete it 10.
Step 9 Manage team assignments and upload errors
Do
- WarmTransfer's reading of the sources is that if the upload fails, you must manually review the JSON structure for case sensitivity, reserved paths, out-of-range values, or recursive layout structures due to undocumented error reporting 525273444.
- To modify an existing layout's JSON or metadata, open it from Desktop Layouts, make the adjustments, and click Save instead of creating a duplicate entry 14.
- To change a team's layout assignment, update the Desktop layout drop-down in the team's settings or adjust the layout in Desktop Layouts; the team and layout relationships synchronize bi-directionally 3940.
Verify
Navigate to Services > Contact Center > User Management > Teams, open an assigned team, and verify under Agent settings that the Desktop layout field reflects the assigned custom layout 40.
Rollback
Suggested rollback: open the layout under Desktop Layouts, upload the previous known-good JSON file, and click Save 14.
Step 10 Test layout with agent and supervisor personas
Stock components only
Do
- Have an agent belonging to an assigned team sign in to the Agent Desktop 53. If the agent is already signed in, instruct them to reload the browser to load the assigned layout 32.
- Sign in as a supervisor whose primary team has the custom layout assigned 37.
Verify
- Verify that
appTitletext and the customized logo render in the horizontal header 3. - Confirm that custom navigation links open the corresponding page using the route defined in
navigateTo26. - Verify that embedded
agentx-wc-iframewidgets display their targetsrcURLs in custom pages or panel tabs 20. - Confirm that the Auxiliary Information pane displays configured tabs in the specified order during an interaction 30.
Rollback
Toggle the layout to Inactive, click Save, and have the agent reload the browser 11432.
Custom web-component widgets
Do
- Have an agent on an assigned team sign in, or reload the page if already logged in 5332.
- Sign in as a supervisor whose primary team is assigned to the layout 37.
Verify
- Suggested check: deliver a test contact to the agent.
- Verify that properties populated with
$STOREpaths (such as$STORE.agent.agentName) reflect live agent and interaction data 36. - Confirm that persistent widgets display across all desktop pages and appear as an auxiliary tab only while a contact is active 31.
- Verify that headless widgets remain hidden from the user interface while executing their background logic 19.
Rollback
Step 11 Maintain the layout over time
Do
- Periodically navigate to Services > Contact Center > Desktop Experience > Desktop Layouts and select Create desktop layout to download a fresh copy of
Default Desktop Layout.json612. - Compare the fresh default against your custom layout JSON to identify newly added Cisco Desktop features 842.
- Merge desired platform additions into the custom layout file 8.
- Open the existing custom layout in Desktop Layouts, upload the updated JSON file, and click Save 14.
Verify
Suggested check: sign in with a test agent account and verify that newly merged platform features function alongside existing custom configurations.
Rollback
Suggested rollback: edit the layout, re-upload the prior version of the custom JSON file, and click Save 14.
See also
Applicability
Applies to: Cisco Webex Contact Center. Deployments: multi-tenant. Sources checked 2026-09-30.
What remains uncertain
- Specific layout JSON file-size limits are not covered by the sources below.
- The exact Control Hub administrator roles required to manage desktop layouts are not covered by the sources below.
- The specific fallback layout assigned to a team when its active custom layout is deleted or deactivated is not covered by the sources below.
- Whether the system-generated Global Layout can be directly edited or replaced in place is not covered by the sources below.
- Specific hosting requirements for custom widgets, including Content Security Policy (CSP), Cross-Origin Resource Sharing (CORS), and HTTPS configurations, are not covered by the sources below.
See also
Related to
- Onboarding agents in Webex Contact Center — Teams created during onboarding default to the Global Layout
- Setting up screen pops and CAD variables in Webex Contact Center — Screen Pop is a predefined Auxiliary Information pane tab and can be placed in navigation
- Setting up the Webex Contact Center connector for Salesforce — CRM connectors ship their own layout JSON that is uploaded through the same Desktop Layouts page
Referenced by
- Adding a Webex AI Agent to a Webex Contact Center flow — IVR Transcript widget and ai-assistant component placement on custom desktop layouts
- Onboarding agents in Webex Contact Center — Desktop layouts are assigned on agent-based teams created in this guide.
- Setting up agent outdial in Webex Contact Center — Desktop profile and desktop configuration are adjacent agent-experience settings.
- Setting up screen pops and CAD variables in Webex Contact Center — Web page pops shown Inside Desktop depend on the Screen Pop tab in the desktop layout.
Sources
- 1A layout is activated or deactivated with an Active/Inactive toggle on the layout, then Save.Manage desktop layouts · Activate or deactivate a desktop layout · Checked 2026-09-30
- 2When advancedHeader is enabled the old header is not displayed, and advancedHeader controls visibility and order of built-in header components plus custom widgets.Create custom desktop layout · advancedHeader · Checked 2026-09-30
- 3The appTitle property sets the horizontal header title (default Webex Contact Center) and the logo property takes a hosted image URL, or no-logo to remove the logo.Create custom desktop layout · appTitle; logo · Checked 2026-09-30
- 4The area object of each persona holds the customisable layout sections, including panel, navigation, persistent, headless, header and advancedHeader.Create custom desktop layout · area · Checked 2026-09-30
- 5All properties in the desktop layout JSON are case sensitive.Create custom desktop layout · JSON Layout Top-Level Properties · Checked 2026-09-30
- 7Creating a layout takes a Name, a Description, one or more Teams and the uploaded JSON file, then Create.Manage desktop layouts · Create a desktop layout, General settings · Checked 2026-09-30
- 8For teams that use a custom desktop layout, administrators must periodically refresh the layout definition to pick up new Desktop features.Create custom desktop layout · Overview · Checked 2026-09-30
- 9Assigning a custom layout to a team overrides the global layout, which is the default layout for all teams.Manage desktop layouts · Create a desktop layout · Checked 2026-09-30
- 10A desktop layout must be inactive before it can be deleted.Manage desktop layouts · Delete a desktop layout · Checked 2026-09-30
- 11Cisco developer relations recommends requesting a developer sandbox from the Webex Contact Center Developer Portal to build and test widgets.Unlocking the Power of Custom Widgets in Webex Contact Center · Getting started section · Checked 2026-09-30
- 12The Default Desktop Layout.json file is downloaded from the Desktop Layouts create page and customised before upload.Manage desktop layouts · Create a desktop layout · Checked 2026-09-30
- 13dragDropEnabled lets agents drag, drop and resize widgets on custom pages and defaults to false.Create custom desktop layout · dragDropEnabled · Checked 2026-09-30
- 14An existing layout is edited by opening it in Desktop Layouts, changing its details and clicking Save.Manage desktop layouts · Edit a desktop layout · Checked 2026-09-30
- 15The Global Layout is a system-generated desktop layout that is assigned by default when a team is created.Create custom desktop layout · Overview (Global Layout definition) · Checked 2026-09-30
- 16The Global Layout cannot be deleted.Create custom desktop layout · Overview (Global Layout definition) · Checked 2026-09-30
- 17Header widgets share a horizontal header that is only 64 pixels high.Create custom desktop layout · Header Widgets · Checked 2026-09-30
- 18headerActions is an array (values webex, outdial, notification) that sets the order of header icons, and an empty array removes all of them.Create custom desktop layout · headerActions · Checked 2026-09-30
- 19Widgets in the headless section are hidden from the Desktop and run background logic.Create custom desktop layout · Headless Widgets · Checked 2026-09-30
- 20The stock agentx-wc-iframe widget embeds a web page in an iFrame on the Desktop, configured with a src URL and optional style.Create custom desktop layout · Navigation (Custom Pages) · Checked 2026-09-30
- 21If more than one navigation page sets isDefaultLandingPage to true, the first such page becomes the landing page after sign-in.Create custom desktop layout · Navigation (Custom Pages), nav > isDefaultLandingPage · Checked 2026-09-30
- 22Some legacy CRM integration guides still instruct uploading layout JSON through the Management Portal at Provisioning > Desktop Layout.Integrate Webex Contact Center with Salesforce (Version 1—Legacy) · Set Up Salesforce Desktop Layout on Webex Contact Center · Checked 2026-09-30
- 27notificationTimer defaults to 8 seconds with a valid range of 1 to 10, and maximumNotificationCount defaults to 3 with a valid range of 1 to 10.Create custom desktop layout · notificationTimer; maximumNotificationCount · Checked 2026-09-30
- 28Because assigned teams drop out of the Teams list, each team effectively carries at most one custom layout at a time, and a per-team design needs one layout object per distinct team experience.inferredManage desktop layouts · Create a desktop layout (Teams drop-down note) · Checked 2026-09-30
- 29A navigation page object holds an id, a widgets map and a grid layout of areas with row and column size arrays.Create custom desktop layout · Navigation (Custom Pages), page · Checked 2026-09-30
- 30The panel section defines the Auxiliary Information pane as md-tabs, whose predefined tabs are Contact History, IVR Transcript, Customer Experience Journey and Screen Pop, and custom tabs can be added, reordered or removed.Create custom desktop layout · Auxiliary Information Pane · Checked 2026-09-30
- 31Persistent widgets display on all Desktop pages and appear as a tab in the Auxiliary Information pane only while there is an active contact.Create custom desktop layout · Persistent Widgets Configuration · Checked 2026-09-30
- 32If a new layout is assigned while an agent is signed in, the agent must reload the page to see it.Create custom desktop layout · Overview · Checked 2026-09-30
- 33Downloading the Default Desktop Layout.json file and uploading it again makes it a modified layout even if neither the content nor the filename changed.Create custom desktop layout · Overview · Checked 2026-09-30
- 34Including the ROOT layout as a sublayout of ROOT causes a call stack exceeded error and an infinite loop.Create custom desktop layout · Navigation (Custom Pages), page layout · Checked 2026-09-30
- 35Cisco advises not changing the script URL for an existing component; if you must, agents need to clear the browser cache and reload the Desktop.Create custom desktop layout · page > script · Checked 2026-09-30
- 36A widget can receive real-time Desktop data by setting a property or attribute to a $STORE value such as $STORE.agent.agentName, as an alternative to JavaScript SDK subscribers.Create custom desktop layout · Share Data from Desktop to Widgets · Checked 2026-09-30
- 37When a supervisor signs in to the Desktop, the layout of the supervisor's primary team is applied.Create custom desktop layout · Overview · Checked 2026-09-30
- 38A team that already has a custom layout assigned does not appear in the Teams drop-down when creating another layout.Manage desktop layouts · Create a desktop layout · Checked 2026-09-30
- 39Teams and desktop layouts are linked bi-directionally, so a change made from either side is reflected in both and can appear in the other's audit log entries.Manage teams in Webex Contact Center · Create a team, note on desktop layout · Checked 2026-09-30
- 40An agent-based team has a Desktop layout drop-down in its Agent settings; the field does not apply to capacity-based teams.Manage teams in Webex Contact Center · Create a team, Agent settings · Checked 2026-09-30
- 41The layout JSON has separate sections for three personas: agent, supervisor, and supervisorAgent (a supervisor who also handles interactions).Create custom desktop layout · JSON Layout Top-Level Properties · Checked 2026-09-30
- 42When Cisco adds a new feature to the Desktop Layout, an unmodified layout is updated automatically with the new feature.Create custom desktop layout · Overview · Checked 2026-09-30
- 43Because the current Manage desktop layouts article places layouts under Control Hub Desktop Experience, the Management Portal path in legacy integration guides is most likely outdated and the Control Hub path should be used.inferredManage desktop layouts · Create a desktop layout, steps 1-4 (compared with legacy connector guides) · Checked 2026-09-30
- 44The reviewed Cisco layout articles do not document the upload validation checks or error messages, so the only documented guards before upload are case sensitivity, reserved navigateTo values, value ranges and the ROOT sublayout loop.inferredManage desktop layouts · Create a desktop layout (absence of validation text; checked alongside Create custom desktop layout) · Checked 2026-09-30
- 45The Webex App icon only appears on the Desktop header when desktopChatApp.webexConfigured is true; it defaults to false.Create custom desktop layout · desktopChatApp; advancedHeader · Checked 2026-09-30
- 46A widget entry names its custom element in comp (without angle brackets) and may give a script URL from which the Desktop loads the component remotely.Create custom desktop layout · page > comp; page > script · Checked 2026-09-30
- 47A widget entry passes data through attributes and properties objects, and an optional wrapper object adds a toolbar with a title and a maximize icon.Create custom desktop layout · page > attributes; page > properties; page > wrapper · Checked 2026-09-30
- 48The CiscoDevNet widget starter provides React, Angular and Lit web component boilerplates and uses the @wxcc-desktop/sdk npm package for Desktop JS SDK access.CiscoDevNet/webex-contact-center-widget-starter · README, frameworks table and SDK install · Checked 2026-09-30
- 49Webex Contact Center Desktop widgets come in two kinds: iFrame widgets that embed external content and custom Web Components.Unlocking the Power of Custom Widgets in Webex Contact Center · Widget types section · Checked 2026-09-30
- 50Teams are created under Services > Contact Center > User Management > Teams as either Agent Based (specific agents assigned) or Capacity Based (no specific agents, for voice mailboxes or agent groups Webex Contact Center does not manage).Manage teams · Create a team procedure, Team Type field · Checked 2026-09-30
- 51Agent Desktop requires Chrome 144+, Microsoft Edge 144+ or Firefox 140+, and WebRTC is supported in Chrome, Edge and Firefox.System requirements for Webex Contact Center Desktop · Browser requirements and WebRTC sections · Checked 2026-09-30
- 52In a custom desktop layout the Screen Pop can be configured as a custom page, as a widget within a custom page, or as a tab in the Auxiliary Information pane.Create custom desktop layout · Screen Pop · Checked 2026-09-30
- 53To sign in, the agent opens the Agent Desktop URL provided by the administrator, chooses a calling preference from Handle calls using, and chooses a team from the Team drop-down.Sign in to the Agent Desktop · Sign in procedure, interaction preferences · Checked 2026-09-30
Documents
Create custom desktop layout
Create custom desktop layout
Integrate Webex Contact Center with Salesforce (Version 1—Legacy)
Manage desktop layouts
Manage teams
Manage teams in Webex Contact Center
Sign in to the Agent Desktop
System requirements for Webex Contact Center Desktop
CiscoDevNet/webex-contact-center-widget-starter
Enhancing Agent Productivity by Creating Navigation Widgets in Webex Contact Center
Unlocking the Power of Custom Widgets in Webex Contact Center
Cite this page
APA
WarmTransfer. (2026, September 30). Customizing the Webex Contact Center Agent Desktop layout. WarmTransfer. https://warmtransfer.net/guides/wxcc-desktop-layout-setup
BibTeX
@misc{warmtransfer-wxcc-desktop-layout-setup,
title = {Customizing the Webex Contact Center Agent Desktop layout},
author = {{WarmTransfer}},
year = {2026},
url = {https://warmtransfer.net/guides/wxcc-desktop-layout-setup},
note = {Verified 2026-09-30}
}