A browser-based banking CRM with a built-in Webex Contact Center (WxCC) agent desktop, built using the @webex/contact-center TypeScript SDK and Lit web components. The CRM tab doubles as the agent desktop — agents log in to their WxCC station, handle calls, and view customer records all in one place, with automatic screen pop on every inbound call and one-click outbound dialing from any customer record.

Why use this playbook

• Eliminate manual customer lookups: the caller's ANI automatically searches the CRM and surfaces the matching customer profile the moment the call is offered
• Reduce handle time by giving agents a fully functional desktop — search, customer details, account tabs, call controls — in a single browser tab
• Learn the Webex Contact Center SDK event model (task:incoming, task:assigned, task:media, wrap-up) with a complete, runnable reference implementation
• Extend a real working base: replace the in-memory customer store with your own CRM API calls and the quick-action stubs with live case, callback, and email integrations

What it does

• Authenticates agents using a Webex access token passed to new Webex({ credentials }) and registers with webex.cc.register() to retrieve profile, teams, and idle codes
• Performs station login (webex.cc.stationLogin()) supporting both Browser WebRTC and dial-in phone options
• Handles inbound calls via task:incoming: plays ringtone, extracts ANI, fires CRM search, and renders Answer/Decline controls for browser logins
• Manages active call state with Hold, Resume, Mute/Unmute, and End controls bound to task.hold(), task.resume(), task.toggleMute(), and task.end()
• Delivers outbound click-to-dial from any CRM customer card via webex.cc.startOutdial()
• Handles wrap-up (task.wrapup()) with a configurable wrap-up code selector populated from the agent's WxCC profile

Preview listing

This App Hub entry was published from an open pull request. Review the change.