Leveraging the Webex Contact Center Agent Desktop SDK in Your Custom Widgets

Welcome back to our series on enhancing the Webex Contact Center experience through custom widgets! In our previous posts, we've explored the power of custom widgets, developed header widgets with an RSS feed reader, created navigation widgets to boost agent and supervisor productivity, bundled our widgets with Webpack, and enhanced widgets with dynamic $STORE variables. Today, we're diving into the Webex Contact Center Desktop SDK, a powerful tool that allows you to request up-to-date information from the Desktop and integrate it seamlessly into your custom widgets.

Introduction to the Webex Contact Center Desktop SDK

The Desktop JavaScript SDK is an npm package that provides a robust interface for interacting with the Webex Contact Center Desktop. With this SDK, you can request essential data such as agent details, assigned tasks, task specifics, browser locale, and authentication tokens for Single Sign-On (SSO) integration. This capability opens a world of possibilities for creating more dynamic and responsive embedded widgets.

Key Features of the JS SDK

• Native Integration into the Desktop: Integrated seamlessly when invoked by widgets that are rendered within the Desktop application.
• Data Requests: Fetch data to be passed to your widgets through properties and attributes.
• Complex Operations: Perform advanced operations by consuming and manipulating system data within your widget.
• Asynchronous Event Subscription: Subscribe to asynchronous events and access data within the payload.

Getting Started with the SDK

To get started, you'll need to install the SDK package from npm:

npm install @wxcc-desktop/sdk

Once installed, you can import the SDK into your project:

import { Desktop } from '@wxcc-desktop/sdk';

Next, let’s take a look at some code from our sample application.

Sample Application

The sample application provided in the Webex Contact Center API Samples repository demonstrates how to integrate and utilize the Webex Contact Center Desktop JavaScript SDK within a custom widget. This application showcases various functionalities such as initializing the SDK, fetching agent information, handling agent states, making outbound calls, updating CAD (Call Associated Data) variables, and managing interactions through events like transfers and recording pauses. The sample app is designed to help developers understand how to leverage the SDK to build robust and interactive contact center solutions, providing a comprehensive example of real-time agent interaction management and customization within a web-based interface.

Sample Application Code Tour

Now, let’s take a short tour through our sample application and highlight some of the features of the SDK the application is utilizing. The source code lives in the “src/sa-ds-sdk.js” file.

Importing the Library: Line 1

Initializes the SDK for use within the widget.

import { Desktop } from '@wxcc-desktop/sdk';

Initialization and Setup: Line 294

Initializes the SDK for use within the widget.

Desktop.config.init();

Fetching Agent Information: Line 366

Retrieves the latest data about the current agent and logs it.

const latestData = Desktop.agentStateInfo.latestData;

Retrieving Task Information: Line 373

Fetches the interaction ID and other task-related information from the current task map.

const currentTaskMap = await Desktop.actions.getTaskMap();

Initiating a Transfer: Line 393-404

Initiates a transfer to a specified virtual team (vteam) using the interaction ID.

await Desktop.agentContact.vteamTransfer

Pausing Recording: Line 409

Pauses the recording for a given interaction using the interaction ID.

await Desktop.agentContact.pauseRecording

Making an OutDial Call: Line 420-439

Initiates an outbound call to a specified destination using the provided entry point ID.

await Desktop.dialer.startOutdial

Updating CAD Variables: Line 443-461

Updates the CAD (Call Associated Data) variables for a given interaction.

await Desktop.dialer.updateCadVariables

Changing Agent State: Line 464-486

Changes the agent's state to either 'Available' or 'Idle' and updates the UI accordingly.

await Desktop.agentStateInfo.stateChange

Subscribing to Agent Contact Events: Line 489-508

Subscribes to various agent contact events to handle actions like wrap-up, hold, and unhold.

Desktop.agentContact.addEventListener

Conclusion

The Webex Contact Center Agent Desktop SDK is a powerful tool that enables developers to create more dynamic, responsive, and context-aware widgets. By leveraging methods to fetch access tokens and agent information, and subscribing to asynchronous events, you can significantly enhance the functionality and user experience of your custom widgets

Stay tuned for more insights and examples in our ongoing series on developing with Webex Contact Center. As always, we encourage you to explore the SDK documentation!

Need Some Help? We Got You Covered!

We are excited to provide you with support for these features. If you need help, the Webex Developer Support Team is standing by and happy to assist. You can also start or join a conversation on the Webex for Developers Community Forum.