PHP Quickstart: Make Outgoing Calls from the Browser

Cool, you have now used Twilio Client to call into your browser and have a conversation. Rock on!

Now, let’s make a more useful application that can actually do something by passing arbitrary data from the browser to your TwiML script. Let's say that you want the browser to dial and connect you to any phone number. That's easy to do; here's how:

  • Add a text box to the web page at hello-client-monkey.php so that you can enter a phone number.
  • Pass that phone number along in the Twilio.Device.connect() call.
  • Update the hello-client-twiml.php script to serve a TwiML snippet that contains a <Dial> verb with the phone number you passed in from the browser.

The complete source code is shown below with the new additions highlighted. We now get the phone number from an HTML text box, put it in an array of parameters with the key PhoneNumber, and pass those parameters to Twilio.Device.connect() when you click the 'Call' button. Simple!


include 'Services/Twilio/Capability.php';

// put your Twilio API credentials here
$accountSid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$authToken  = 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy';

// put your Twilio Application Sid here
$appSid     = 'APzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';

$capability = new Services_Twilio_Capability($accountSid, $authToken);
$token = $capability->generateToken();

<!DOCTYPE html>
    <title>Hello Client Monkey 4</title>
    <script type="text/javascript"
    <script type="text/javascript"
    <link href="//"
      type="text/css" rel="stylesheet" />
    <script type="text/javascript">

      Twilio.Device.setup("<?php echo $token; ?>");

      Twilio.Device.ready(function (device) {

      Twilio.Device.error(function (error) {
        $("#log").text("Error: " + error.message);

      Twilio.Device.connect(function (conn) {
        $("#log").text("Successfully established call");

      Twilio.Device.disconnect(function (conn) {
        $("#log").text("Call ended");

      Twilio.Device.incoming(function (conn) {
        $("#log").text("Incoming connection from " + conn.parameters.From);
        // accept the incoming connection and start two-way audio

      function call() {
        // get the phone number to connect the call to
        params = {"PhoneNumber": $("#number").val()};

      function hangup() {
    <button class="call" onclick="call();">

    <button class="hangup" onclick="hangup();">

    <input type="text" id="number" name="number"
      placeholder="Enter a phone number to call"/>

    <div id="log">Loading pigeons...</div>

Now, the TwiML script needs to receive the PhoneNumber parameter given to it when Twilio makes a request to the Voice URL. Let's change the hello-client-twiml.php file to read the PhoneNumber parameter and insert that value into the <Dial> verb. If the PhoneNumber parameter isn't given, we can default to calling "jenny" as we did before. The complete TwiML script is shown below with the new and changed lines highlighted.


header('Content-type: text/xml');

// put a phone number you've verified with Twilio to use as a caller ID number
$callerId = "+1xxxxxxxxxx";

// put your default Twilio Client name here, for when a phone number isn't given
$number   = "jenny";

// get the phone number from the page request parameters, if given
if (isset($_REQUEST['PhoneNumber'])) {
    $number = htmlspecialchars($_REQUEST['PhoneNumber']);

// wrap the phone number or client name in the appropriate TwiML verb
// by checking if the number given has only digits and format symbols
if (preg_match("/^[\d\+\-\(\) ]+$/", $number)) {
    $numberOrClient = "<Number>" . $number . "</Number>";
} else {
    $numberOrClient = "<Client>" . $number . "</Client>";

    <Dial callerId="<?php echo $callerId ?>">
          <?php echo $numberOrClient ?>

Once again, let's load that URL in your browser to make sure the script renders the TwiML snippet correctly. But this time, specify the PhoneNumber parameter like this:

Since we want to be able to call phone numbers or other clients, we've made the TwiML script accept either. If the PhoneNumber parameter's value is all digits (or plusses, dashes, parentheses and spaces, which we detect using the preg_match function), we'll assume it's a phone number. In that case, we put the value of the PhoneNumber parameter inside a <Number> noun. Otherwise, we'll assume it's a client, so we put the value inside a <Client> noun.

Notice that we added a callerId attribute to the <Dial> verb. To call a phone from the browser using Twilio Client you must specify a caller ID. Without this attribute, the call will fail and an "invalid callerId value" error will appear in your Twilio Debugger.

Any of your Twilio phone numbers or verified numbers will work as a Caller ID. If you want to call a traditional telephone, you'll need to either buy a Twilio number or verify a number you already own to use as the caller ID when calling from Twilio Client.

So, go ahead and load up hello-client-monkey.php, enter your cell phone number in the box and press the 'Call' button. Your phone will ring and you can talk to yourself... Huzzah!

But with Twilio Client, who needs a phone? Now, it’s about time to make a call between two browsers.

Next: Making Browser-to-Browser Calls »