Skip to main content
This guide details the complete call flow from the browser to Twilio conference.

​
Step 1: Browser Initiates Call

The browser uses the Twilio Voice SDK to initiate a call: 
const device = new Twilio.Device(token, {
  codecPreferences: ['opus', 'pcmu'],
});

const params = {
  To: '+14155551234',
  From: '+14155559876',
  workspaceId: 'ws_abc123',
};

const connection = device.connect(params);

​
Step 2: TwiML Webhook

Twilio sends a webhook to your server: 
POST /v1/voice/twiml
Request parameters:
  • CallSid - Unique call identifier
  • To - Called phone number
  • From - Caller phone number
  • AccountSid - Twilio account ID

​
Step 3: Backend Processing

The backend performs:
  1. Validate request - Verify Twilio signature
  2. Create conference - Generate unique conference name
  3. Store mapping - Save callSid → conferenceName
  4. Generate TwiML - Return conference XML
// Generate TwiML response
const twiml = `
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Dial>
    <Conference startConferenceOnEnter="true" 
                endConferenceOnExit="false"
                participantLabel="agent">
      ${conferenceName}
    </Conference>
  </Dial>
</Response>
`;

​
Step 4: Customer Dial-Out

The backend immediately dials the customer: 
await twilio.calls.create({
  url: `https://your-domain.com/v1/voice/conference-join?conference=${conferenceName}`,
  to: customerNumber,
  from: callerId,
  statusCallback: `https://your-domain.com/v1/voice/status`,
  statusCallbackEvent: ['completed', 'no-answer', 'busy', 'failed'],
});
The conference join TwiML: 
<Response>
  <Dial>
    <Conference endConferenceOnExit="true" label="customer">
      ${conferenceName}
    </Conference>
  </Dial>
</Response>

​
Complete Flow Diagram

Browser                    Twilio                  Backend
  |                          |                        |
  | device.connect()        |                        |
  |────────────────────────>│                        |
  |                          | POST /v1/voice/twiml  |
  |                          |<──────────────────────|
  |                          |                        |
  |  <Conference TwiML>     |                        |
  |<────────────────────────|                        |
  |                          |                        |
  |  [Agent joins conf]     |                        |
  |                          |                        |
  |                          |  [Dial customer]       |
  |                          |<──────────────────────|
  |                          |                        |
  |                          |  POST /v1/voice/       |
  |                          |  conference-join       |
  |                          |<──────────────────────|
  |                          |                        |
  |  [Customer joins]       |                        |
  |                          |                        |
  |  [Active call]          |                        |

​
Status Callbacks

Monitor call status via webhooks:
EventDescription
initiatedCall created
ringingCall is ringing
answeredCall was answered
completedCall ended normally
no-answerNo answer
busyLine busy
failedCall failed
Always implement proper error handling and logging for TwiML webhooks. Failed webhooks result in call failures.