Softphone

The Agent Desktop includes an integrated browser-based softphone for making and receiving voice calls. The SoftphonePanel is a floating panel that appears in the bottom-right corner of the screen when opened via the floating action button (FAB).

Opening the Softphone

Click the phone FAB (floating action button) in the bottom-right corner of the Agent Desktop to toggle the softphone panel open or closed. The panel slides up from the bottom with a smooth animation.

Panel Structure

The softphone panel is divided into three sections:

1. Header -- The SoftphoneHeader at the top of the panel
2. Body -- The main content area, which changes based on the current call state
3. Bottom tabs -- Navigation tabs shown only when the softphone is idle

Softphone States

The softphone transitions through four states, each rendering a different view in the body area.

Idle State

When no call is active, the body displays one of three tabbed views based on the selected bottom tab.

Dialpad Tab

The default tab shows a numeric dialpad for dialing phone numbers.

• Number input field -- A centered text input at the top where the number is displayed. Supports typed, pasted, and dialpad-entered digits.
• Backspace button -- Appears inside the input field (right side) when digits have been entered. Click to delete the last digit.
• Dialpad grid -- A 3x4 grid of numeric keys:

	Column 1	Column 2	Column 3
Row 1	1	2 (ABC)	3 (DEF)
Row 2	4 (GHI)	5 (JKL)	6 (MNO)
Row 3	7 (PQRS)	8 (TUV)	9 (WXYZ)
Row 4	*	0 (+)	#

Each key displays the digit prominently with the associated letters shown below in smaller text.

• Call button -- A green full-width button at the bottom. Disabled (dimmed) when no number has been entered. Click to initiate an outbound call.

imageSoftphone panel showing header, dialpad tab with number input field, 3x4 numeric key grid, and green call button, alongside contacts tab and recent calls tab at the bottom

Softphone with dialpad, contacts, and recent tabs

TIP

You can also type digits directly into the number input field using your keyboard. Only valid phone characters (0-9, *, #, +) are accepted. The input field auto-focuses when the Dialpad tab is selected.

Contacts Tab

The contacts tab displays a searchable list of customers and agents.

• Search field -- Filter contacts by name or phone number
• Customers section -- Lists customer contacts with avatar, name, phone number, and a VIP badge where applicable. A green phone icon appears on hover to initiate a call.
• Agents section -- Lists team agents with avatar, name, extension number, and role. Click to call via internal extension.

If no contacts match the search query, an empty state is displayed with the message "No contacts found."

Recent Calls Tab

The recent calls tab shows a chronological list of past calls.

Each entry shows:

• Direction icon -- Green arrow (outgoing), blue arrow (incoming), or red arrow (missed)
• Name -- Contact name or "Unknown" if not identified
• Number -- Formatted phone number
• Time -- How long ago the call occurred (e.g., "5 min ago")
• Duration -- Call length if available

Click any recent call entry to redial that number.

Bottom Tabs

Three tabs appear at the bottom of the panel when in the idle state:

Tab	Icon	Description
Dialpad	dialpad	The numeric dialpad for dialing
Contacts	contacts	Searchable customer and agent directory
Recent	history	Recent call history

The active tab is highlighted with a blue top border and blue text.

Dialing / Ringing State

When a call is being placed or an incoming call is ringing, the CallingView is displayed:

• Avatar -- A large avatar with the contact's initials, surrounded by a pulsing ring animation
• Caller name -- The contact name or "Unknown" if not matched
• Caller number -- The formatted phone number
• Status indicator -- Animated dots with the text "Dialing..." or "Ringing..."
• Timer -- A running timer showing how long the call has been in the dialing/ringing state
• End Call button -- A red full-width button to cancel the outgoing call or reject the incoming call

Connected State

When a call is connected, the ActiveCallView provides full call controls:

• Caller info -- Avatar, name, and phone number at the top
• Audio visualization -- Animated audio level bars showing call activity
• Call timer -- A large timer displaying the call duration in MM:SS format
• Control grid -- A 3x2 grid of call control buttons (see Call Handling for details)
• End Call button -- A red full-width button to terminate the call
• Add to conversation -- If you have an active chat conversation selected, a "Add to conversation" link appears to associate the voice call with the existing conversation

imageActive call view in the softphone showing caller avatar and name, animated audio level bars, call duration timer, 3x2 control grid with mute, hold, speaker, DTMF, record, and transfer buttons, and red end call button

Active call with controls and audio visualization

Ended State

When a call ends, a summary view is displayed:

• Call Ended title with a red phone icon
• Contact name -- The name of the person called (or the formatted number)
• Duration -- The total call length in MM:SS format

The ended state is shown briefly before the softphone returns to the idle state.

Panel Positioning

The softphone panel is fixed in the bottom-right corner of the viewport:

• Position -- Bottom: 84px from the viewport bottom, Right: 24px from the viewport edge
• Width -- 320px
• Max height -- The body area scrolls if content exceeds 520px

The panel has rounded corners and a prominent drop shadow to visually separate it from the main workspace.