anchorOverview

The Digital Channels Widget (DigitalChannels) provides a unified interface for handling digital customer interactions in Webex Contact Center. This widget enables agents to manage chat, social media, and email interactions through a consistent, embeddable component.

Supported Digital Channels

The Digital Channels Widget supports the following media types:

The widget automatically detects the current task's media type and renders the appropriate interface.

Key Features

The widget automatically handles:

• JWT token management and authentication
• Conversation initialization and state management
• Theme synchronization with your application
• Real-time message updates and notifications

anchorPrerequisites

Before implementing the Digital Channels Widget, ensure you have:

1. Sandbox setup

   Complete the Digital Channels – Complete Setup Guide (Lab 12 - Digital Channels) so your Webex Contact Center environment is configured for digital channels. If you need an environment, request a Webex Contact Center sandbox.

   Follow these labs from the guide:

   • Lab 12.1
   • Lab 12.5
   • Lab 12.7
   • Lab 12.8
   • Lab 12.9
   • Lab 12.10
   • Lab 12.11
   • Lab 12.19

2. Completed the Webex Contact Center Web Widgets Quick Start Guide including:

   • Widgets initialization
   • Authentication setup (Access Token or OAuth)
   • Station Login configuration

3. Required dependencies:

   • @webex/cc-widgets package installed
   • @momentum-ui/web-components (peer dependency)
   • React 18.3.1 or higher

4. Agent configuration:

   • Agent must have a Multimedia profile with Digital Channels enabled (Chat, Email, and/or Social)
   • Agent must be logged in via Station Login widget
   • Agent must be in an appropriate state to receive digital channel tasks

anchorGetting Started

Follow these steps to integrate the Digital Channels Widget into your application.

Step 1: Install the Package

Install the @webex/cc-widgets package in your project:

npm install @webex/cc-widgets

Or using Yarn:

yarn add @webex/cc-widgets

Step 2: Import the Widget

Add the following import statement to your component file:

import { DigitalChannels } from '@webex/cc-widgets';

Step 3: Add the Widget to Your Application

Add the widget to your component:

<DigitalChannels />

Step 4: Configure the Theme (Optional)

The widget supports two themes: Light (default) and Dark. The theme is automatically read from the store, so you do not need to pass any props to the widget.

To set the theme, use the store's setCurrentTheme method:

import { store } from '@webex/cc-widgets';

// Set light theme (default)
store.setCurrentTheme('LIGHT');

// Set dark theme
store.setCurrentTheme('DARK');

The Digital Channels Widget will automatically reflect the theme set in the store.

Step 5: Handle Digital Tasks

Once the widget is integrated, it will automatically display the appropriate interface based on the type of digital task assigned to you (Chat, Email, or Social).

The following sections provide detailed explanations of the interface for each channel type.

Feature Walkthrough (Vidcast)

Watch the Digital Channels Widget – Feature Walkthrough (Vidcast) for a visual guide to the widget.

anchorUsing the Email Channel

When you receive an email task, the Digital Channels Widget displays the email interface. This section explains the email features and action buttons available to you.

Viewing Your Email List

When you receive an email task, the widget displays a list of all emails in the conversation thread. Each email entry shows the sender information, timestamp, status, and a preview of the content.

Reading an Email and Response Options

When you click on an email entry (or the expand arrow), the email expands to show the full content along with action buttons for responding.

Email header information:

• Subject – Full email subject line
• From – Sender's email address
• Sent – Full date and time when the email was sent
• To – Recipient email address(es)

Action buttons (displayed at the bottom of the expanded email):

Quick action icons (top-right corner): Reply, Reply All, Forward, and Collapse (∧ arrow) to minimize the email.

Composing and Sending Email Responses

When you click Reply, Reply All, or Forward, the email composer opens so you can compose and send a response.

Composer header:

• Subject Line – Pre-filled with "Re:" prefix for replies
• Delete Button – Discard the draft
• To field – Recipient (auto-populated for Reply)
• + Cc / + Bcc – Add carbon copy or blind carbon copy recipients

Rich text formatting toolbar: Heading, Bold, Italic, Underline, Strikethrough, text color, numbered list, bullet list, block quote, insert table, insert link, alignment, attach file, insert template, insert emoji.

Original email thread: Displays below a separator with Subject, From, Sent, and To from the original email.

Action buttons: Clear (clears composer content) and Send (sends the email response).

anchorUsing the Chat Channel

When you receive a chat task, the Digital Channels Widget displays the chat interface. This section explains the chat features and how to interact with customers in real time.

Viewing the Chat Conversation

When you accept a chat task, the widget displays a real-time conversation interface with customer information, message history, and a compose area.

Task header: Shows "Chat Task" with a close (×) button.

Customer information card: Customer name (with verification checkmark) and email address.

Message display area: All messages (agent and customer) appear on the left, distinguished by styling and labels:

Message components: Avatar, sender label, timestamp, status, and message content.

Understanding Auto-Generated Welcome Messages

When a chat session begins, the system may display an auto-generated welcome message from the customer's side.

Auto-generated message: Shown in a speech bubble from the customer side with an "Auto Generated" label and welcome text (e.g., "Welcome to Webex CC Chat").

Composing and Sending Chat Messages

The message compose area at the bottom provides options for composing and sending messages.

Input toolbar icons:

• Attach file
• Insert template (canned responses)
• Text formatting
• Insert emoji
• Trigger Workflow
• Save as Draft

Message input field: Placeholder "Write a message to [Customer Name]" with character counter (e.g., 0 / 2000).

Send button: Bottom-right; enabled when the message field contains text, disabled when empty.

Clear button: Bottom-left; appears when the agent has typed a message; clears the entire message content.

anchorUsing the Social Channel

When you receive a social media task (Facebook Messenger, WhatsApp, etc.), the Digital Channels Widget displays the social channel interface. The interface is similar to the Chat interface, optimized for social media interactions.

anchorTroubleshooting

Widget Not Rendering

Symptom: The Digital Channels Widget does not appear.

Possible causes and solutions:

Theme Not Applying

Symptom: Widget appears but theme is incorrect.

Solutions:

• Verify the theme is set in the store using store.setCurrentTheme('LIGHT') or store.setCurrentTheme('DARK')
• Ensure Momentum UI components are properly loaded

Token or Authentication Errors

Symptom: Console shows JWT or token-related errors.

Solutions:

• Verify access token is valid and not expired
• Ensure token has required scopes for digital channels
• Check network connectivity to Webex services

anchorRelated Documentation

For comprehensive setup and configuration, refer to:

• Webex Contact Center Widgets | Introduction
• Webex Contact Center Web Widgets | Quick Start Guide