Contact Center Video Widget

This widget embeds Webex meetings within the Webex Contact Center. Upon receiving a request, it automatically opens a chat task and initiates a Webex meeting between the agent and the customer.

Overview

Contact Center Video Widget is a powerful LitElement-based web component designed to streamline video interactions within the Webex Contact Center environment. This component leverages the Webex Browser SDK to integrate video capabilities into your Contact Center workflows. This component also provides standard video controls (mute, camera on/off, etc.) for both local and remote participants. Running this project creates a web component widget that gets deployed in the workspace section of the WxCC agent desktop. The widget is only rendered when the agent has an active (selected) chat task.

Usage

• Upload the desktop-layout.json file onto your administration portal WebexCC Portal - US
  • link above is referencing the US portal link please change if you are in different geo (us1, eu1, eu2, anz1)
  • If you want to use your bundled code, change the URL on line 55 of desktop-layout.json
  • Note that Layouts are configured per Agent Team.
• Log in to your agent desktop and select the right team.
• Once the customer triggers the request, a chat task will be initiated on the agent's desktop. To trigger the request from customer side:

  curl --location 'https://hooks.us.webexconnect.io/events/3ZYSI927Q3' \
  --header 'Content-Type: application/json' \
  --data-raw '{
      "customerName":<NAME>,
      "customerEmail":<EMAIL>,
      "videoCallDestination": <VIDEO_CALL_DESTINATION>,
      "inappmessaging.appId":"VI24093513",
      "inappmessaging.userId":"6806ea7s-a04e-4fdb-9d86-0b33626f3577"
  }'
  

Setup

Prerequisites & Dependencies:

1. Have a contact center team and desktop layout setup. Please watch the video and supplemental detailed documentation @ Desktop Layout - Administration Guide
2. Node >18.15.0 (recommended) and npm (or your preferred package manager). To check your versions, run:

   node -v
   npm -v
   

3. Cloud storage or CDN to deploy your bundled JS file.

Installation Steps:

1. Download this project or clone this repo:

   git clone https://github.com/wxsd-sales/video-cc-widget-lit.git
   

2. From the project directory run:

   npm install
   

Run Locally:

Note: We can just run the meetings part of the widget locally

1. Open src/index.js and replace it with this line:

   import "./video-meetings-widget.js";
   

2. Run npm serve to run the dev server

   • Open http://localhost:8082/ in a browser

Build the Widget:

1. Run npm run build to build the widget
2. Copy the file public/video-cc-widget.js to your preferred cloud storage
3. Make sure the cloud storage URL is replaced in line 55 of desktop-layout.json file
4. Upload the desktop-layout.json file to your Webex contact center tenant and follow steps in Usage section.

Note - Bundled file for this project is hosted here

License

All contents are licensed under the MIT license. Please see license for details.

Disclaimer

Everything included is for demo and Proof of Concept purposes only. Use of the site is solely at your own risk. This site may contain links to third party content, which we do not warrant, endorse, or assume liability for. These demos are for Cisco Webex usecases, but are not Official Cisco Webex Branded demos.

Questions

Please contact the WXSD team at [email protected] for questions. Or, if you're a Cisco internal employee, reach out to us on the Webex App via our bot ([email protected]). In the "Engagement Type" field, choose the "API/SDK Proof of Concept Integration Development" option to make sure you reach our team.