The browser dialer provides a complete calling experience without leaving your browser. Powered by Twilio Voice SDK, it handles the full call lifecycle from dialing to hangup.
Call States
The dialer tracks these call states:
| State | Description |
|---|
| idle | No active call. Ready to dial. |
| dialing | Outbound call initiated, waiting for connection |
| ringing | Remote party’s phone is ringing |
| connected | Call is active and connected |
| completed | Call ended normally |
| failed | Call failed to connect |
| busy | Remote party’s line is busy |
| no-answer | No one picked up |
| voicemail | Call went to voicemail |
Making Calls
Dial Pad
- Open the Dialer tab
- Enter a phone number using:
- On-screen dial pad (click numbers)
- Keyboard number keys
- Paste from clipboard (Ctrl/Cmd+V)
- Select your calling number in the footer
- Click the green Call button (or press Enter)
- Go to the Contacts tab
- Search for a contact
- Click the phone icon next to their name
- The dialer initiates the call with the selected calling number
From Queue
When running a queue, calls initiate automatically:
- Go to the Queue tab
- Select a queue and click Start
- The system dials contacts automatically
- You’re connected to the first person who answers
Call Controls
During an active call, these controls are available:
| Control | Action |
|---|
| Mute | Toggle microphone on/off. Button shows muted state. |
| Hang Up | End the call. Button is red. |
| Timer | Shows call duration in MM:SS format. |
| Quality Indicator | Shows connection quality (excellent/good/poor). |
Mute
Click the microphone icon to mute yourself. The icon changes to show muted state. Click again to unmute.
When muted, the other party cannot hear you, but you can still hear them.
Calling Number Selection
Your workspace may have multiple provisioned phone numbers. The footer shows your current calling number and lets you switch:
- Click the number in the footer
- Select from your available numbers
- Future calls use this number as caller ID
This affects what the called party sees on their caller ID.
Call Quality
The dialer monitors call quality and displays an indicator:
| Quality | Meaning |
|---|
| Excellent | Clear audio, no latency issues |
| Good | Minor quality issues, still usable |
| Poor | Significant quality problems, consider reconnecting |
- Check your internet connection
- Close bandwidth-heavy applications
- Try a different network if possible
Audio Device Selection
Choose your microphone and speaker:
- Click the settings icon (gear) in the dialer
- Select Audio Devices
- Choose your preferred microphone and speaker
- Changes apply immediately
Chrome requires microphone permission. Grant it when prompted.
Active Call View
When a call is in progress, the UI shows:
- Contact info — Name and phone number (if available)
- Call timer — Duration in MM:SS
- Mute toggle — Microphone control
- Hang up button — End call
- Coaching panel — AI tips (if AI coaching is enabled)
The active call view persists in the side panel even if you navigate to other tabs.
Call Outcomes
After hanging up, you can optionally log a call outcome:
| Outcome | Description |
|---|
| Connected | Call was answered and conversation happened |
| Voicemail | Call went to voicemail |
| No Answer | No one picked up after ringing |
| Busy | Line was busy |
| Failed | Call failed to connect |
Keyboard Shortcuts
| Shortcut | Action |
|---|
| 0-9 | Enter digits on dial pad |
| Enter | Initiate call (when number entered) |
| Escape | Clear dial pad / end call |
Technical Details
Twilio Voice SDK
The extension uses Twilio Voice SDK v2.18.0 for WebRTC calling:
- Runs in an offscreen document (Manifest V3 requirement)
- Handles audio device management
- Provides call quality metrics
- Supports wideband audio (HD voice)
Authentication
Calls authenticate using:
- Clerk session token (from consuelohq.com)
- Backend generates Twilio access token
- Extension uses token to register device with Twilio
Offscreen Document
Chrome Manifest V3 requires Twilio Voice SDK to run in an offscreen document for microphone access. The extension:
- Creates an offscreen document on first call
- Runs Twilio Device there
- Communicates via Chrome messaging API
- Destroys offscreen document when not in use
This ensures microphone access works correctly in the extension context.
Troubleshooting
”Microphone access denied”
Grant microphone permission in Chrome:
- Click the lock icon in the address bar
- Find “Microphone”
- Change to “Allow”
- Refresh the extension
Check:
- Network stability
- Twilio access token validity (try signing out and back in)
- Calling number is active in your workspace
Can’t hear audio
- Check speaker/headphone connection
- Verify audio device selection in settings
- Check system volume
