Get Started

Click to Call

Click-to-call enables your company to convert web traffic into direct telephony communication with just the click of a button. Twilio makes it easy to implement and integrate click-to-call directly into your web application.

Usage

A user enters his or her phone number into a web form. After clicking submit, Twilio will call a specified third party and initialize a call between that party and the user. It's that simple.

Concepts

This HowTo demonstrates initializing a call using the Twilio REST API and creating TwiML call logic using the <Say> and <Dial> verbs.

Download

clicktocall.zip

Implementation

  • 1

    • We first present an HTML form to the user containing a field for the user's phone number.

      • howtos/clicktocall/index.php
        
        <h3>Please enter your phone number, and you will be connected to MMMMMMMMMM</h3>
        <form action="makecall.php" method="post">
            <span>Your Number: <input type="text" name="called" /></span>
            <input type="submit" value="Connect me!" />
        </form>
        
            

      When the user presses submit, the user's browser submits the form data including the phone number to the form's action URL. The action URL handler then makes an HTTP request to Twilio's REST API to call the third party's phone number.

      • howtos/clicktocall/makecall.php
        <?php
        require "Services/Twilio.php";
        
        /* Set our AccountSid and AuthToken */
        $AccountSid = "AXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
        $AuthToken = "YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY";
        
        /* Your Twilio Number or an Outgoing Caller ID you have previously validated
        	with Twilio */
        $from= 'NNNNNNNNNN';
        
        /* Number you wish to call */
        $to= 'MMMMMMMMMM';
        
        /* Directory location for callback.php file (for use in REST URL)*/
        $url = 'http://www.example.com/clicktocall/';
        
        /* Instantiate a new Twilio Rest Client */
        $client = new Services_Twilio($AccountSid, $AuthToken);
        
        if (!isset($_REQUEST['called']) || strlen($_REQUEST['called']) == 0) {
            $err = urlencode("Must specify your phone number");
            header("Location: index.php?msg=$err");
            die;
        }
        
        /* make Twilio REST request to initiate outgoing call */
        $call = $client->account->calls->create($from, $to, $url . 'callback.php?number=' . $_REQUEST['called']);
        
        /* redirect back to the main page with CallSid */
        $msg = urlencode("Connecting... ".$call->sid);
        header("Location: index.php?msg=$msg");
        ?>
            

      To make the REST API request we'll use one of Twilio's open-source REST API wrapper libraries. The libraries simplify the the process of making HTTPS requests to Twilio and handling the responses. Libraries are available in a variety of languages. See the REST API Wrapper Libraries page for more information.

      ** NOTE** If you would like to copy and use this howto code there are several account-specific variables you will need to fill in. These include your AccountSid, AuthToken, and CallerID. For more information on making outgoing calls take a look at the REST Quickstart

  • 2

    Twilio processes the REST API request, dialing the phone number provided and retrieving the call logic (TwiML) from the URL provided in the REST request's 'Url' parameter.

  • 3

    • That URL handler responds to Twilio's request with TwiML. Our TwiML tells the third party the phone number it is about to connect to via a <Say> verb, and then initiates a phone call to that number (the user's) via a <Dial> verb. For a complete overview of TwiML (Twilio's XML) see the TwiML documentation.

      • howtos/clicktocall/callback.php
        <?php
            header("content-type: text/xml");
            echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
        ?>
        <Response>
            <Say>A customer at the number <?php echo $_REQUEST['number']?> is calling</Say>
            <Dial><?php echo $_REQUEST['number']?></Dial>
        </Response>
            
  • 4

    Twilio processes the TwiML we sent and successfully connects the two parties.