WxCC Brandable Desktop Layout
Brandable Webex Contact Center desktop layout that you can reuse across customers. It uses a parameterized layout template and small React widgets, with brand configuration per company. Assets and bundles are served from GitHub Pages in this repository.
What you get
A single base layout template for Agent, Supervisor, and SupervisorAgent
Two React widgets compiled to single-file UMD bundles
brand-banner sets CSS tokens and shows name and logo
company-panel shows links, images, and a note per company
A simple brand config per customer in brands/.json
A build script that generates dist/layouts/.desktop.json ready for import
GitHub Actions that build and publish the /dist folder to GitHub Pages
Repo structure wxcc/ ├─ brands/ # per-company brand files │ └─ acme.json ├─ layouts/ │ └─ base.desktop.json.hbs # Handlebars template for WxCC layout JSON ├─ widgets/ # React source for widgets │ ├─ brand-banner.jsx │ └─ company-panel.jsx ├─ scripts/ │ └─ build-layout.mjs # turns brand + template into a WxCC JSON ├─ dist/ # built widgets and layouts, published to Pages │ ├─ widgets/ │ │ ├─ brand-banner.umd.js │ │ └─ company-panel.umd.js │ └─ layouts/ │ └─ .desktop.json ├─ build-widgets.mjs # esbuild bundler ├─ package.json └─ .github/workflows/build-and-deploy.yml
Prerequisites
Node.js 20 or newer
Git
A GitHub repository at https://github.com/kadammmmm/wxcc
GitHub Pages enabled
Repo Settings, Pages, Build and deployment, Source = GitHub Actions
Windows users should run commands in Git Bash or WSL. PowerShell heredocs behave differently.
First time setup
Clone the repo
git clone https://github.com/kadammmmm/wxcc.git cd wxcc
Install dependencies
npm i
Build widgets and a sample layout
npm run build
Commit and push
git add . git commit -m "Bootstrap wxcc branding layout, widgets, and CI" git push origin main
Confirm GitHub Pages publishes the dist folder
The workflow Build and Publish runs on push to main
Your Pages base URL will be https://kadammmmm.github.io/wxcc/
Widget script URLs used inside the layout:
https://kadammmmm.github.io/wxcc/widgets/brand-banner.umd.js
https://kadammmmm.github.io/wxcc/widgets/company-panel.umd.js
How branding works
Brand data lives in brands/.json. Example:
{ "title": "Acme Support", "logoUrl": "https://kadammmmm.github.io/wxcc/assets/acme-logo.svg", "colors": { "primary": "#005BBB", "accent": "#FFD500" }, "panel": { "note": "Welcome to Acme Contact Center", "links": [ { "label": "Knowledge Base", "href": "https://kb.example.com" }, { "label": "Status", "href": "https://status.example.com" } ], "images": ["https://kadammmmm.github.io/wxcc/assets/acme-banner.png"] } }
The template layouts/base.desktop.json.hbs uses that brand to fill:
appTitle and logo for each persona
Attributes for the two widgets in area.advancedHeader
A JSON blob for company-panel via panelJson
Build a layout for a customer
Create a brand file by copying acme.json
cp brands/acme.json brands/greenway.json
Build the layout JSON for that brand
node scripts/build-layout.mjs greenway
The output file will be here
dist/layouts/greenway.desktop.json
Commit and push the brand and the generated layout (optional)
git add brands/greenway.json dist/layouts/greenway.desktop.json git commit -m "Add Greenway brand and layout" git push
Import into Webex Contact Center
Allow external scripts and images
In the target WxCC tenant, allowlist https://kadammmmm.github.io
This ensures the Agent Desktop can load your widget scripts and images
Upload the layout
Management Portal, Desktop Layouts, New
Switch to JSON view
Paste the full contents of dist/layouts/.desktop.json
Save, then Publish
Assign the layout
Assign to a Desktop Profile, Team, or specific Users
Agents refresh, or sign out then back in to load the new layout
Updating widgets
Edit widgets/*.jsx
Build and publish by pushing to main so the Action runs
Consider versioned paths for safer rollouts
For example publish to widgets/v1.2.0/brand-banner.umd.js
Update the script URL in the layout when you want to move agents to the new version
Commands cheat sheet
npm i
npm run build
node scripts/build-layout.mjs
node scripts/build-layout.mjs greenway
git add . git commit -m "Your message" git push
Troubleshooting
Agents do not see changes
Ensure the layout is Published, not Draft
Agents need to refresh or sign out and back in
Widget fails to load
Check the browser console for CSP or network errors
Verify that https://kadammmmm.github.io is allowed in the tenant
Confirm the script URL exists and is reachable
404 on GitHub Pages URLs
Wait for the GitHub Action to finish
Ensure the workflow deployed dist/ and that files exist under that path
JSON syntax error on import
Validate the file dist/layouts/.desktop.json
Look for missing commas or unescaped characters
Windows paste issues in VS Code terminal
Use Git Bash, or paste large scripts into a .sh file and run bash file.sh
FAQ
Can I host widgets somewhere else Yes. Update the script URLs in the template to your CDN or domain and allowlist that domain in WxCC.
Can the brand panel fetch data at runtime The template passes a JSON blob for simplicity. You can extend the widget to fetch remote config by URL instead.
Do I need a separate layout per customer You can either keep a single layout and change the brand values, or prebuild one JSON per customer. Pick the method that fits your process.