Skip to content

Overview

Learning Objectives

This lab will give you an introduction to building Web Components (Desktop Widgets) to extend the functionality of the agent desktop as well as using the new Webex Contact Center SDK to integrate the contact center into a line of business tool.

Disclaimer

Although the lab design and configuration examples could be used as a reference, for design related questions please contact your representative at Cisco, or a Cisco partner.

Tools and Other Lab Requirements

In this lab we will be using:

Tools

Yarn
Vite + Lit
VS Code Extensions
GraphQL Workbench
JSON Path Finder

Software Requirements (preinstalled in lab)

Node JS
Visual Studio Code
Git Postman

Lab Access

In this lab we will be using Webex for making calls into the Contact Center and for viewing demos which will be shared by the instructor. We will be using the same account for Admin and Agent activities in the Contact Center. Your guide will reflect your specific environment variables, including login information, Channels, Queues, Teams, and assigned numbers in the steps of the actual lab as you progress.

Login:

Password: Provided by proctor

Webex Phone Number: Provided by proctor

Assigned Inbound Channel Number: Provided by proctor

Assigned Queue Name: Provided by proctor

Assigned Team name: Provided by proctor

Assigned Desktop Layout Name: Provided by proctor

Getting Started

Log into Webex on your PC:

  • Username:
  • Password: Provided by proctor

Log into Webex Control Hub in Chrome

Login:

Password: Provided by proctor

Testing your lab setup

  1. Launch the Agent Desktop and log in selecting the Desktop option for your Voice connection.
  2. From the Webex App, dial Provided by proctor
    1. The call will be place in your queue without hearing a greeting message.
    2. You will hear the hold music until the call is answered
  3. In the agent desktop, set your status to Available and answer the call.
    1. Confirm that you can hear audio being passed in both directions.
    2. Disconnect the call
    3. Select a Wrap-up Code
    4. Set your status to Meeting