Adding the Click-to-Call functionality to your website

Click-to-Call is a handy functionality where you can have your website visitors click a button to start a call. This can be useful for handling support, sales calls, or just chatting with your users.

Getting ready

The complete source code for this recipe can be found at Chapter1/Recipe4.

How to do it...

Ready? We're going to build a simple Click-to-Call system. With this, you can set up any website to allow a visitor to type in a phone number and connect a call between you and them.

1. Download the Twilio Helper Library ( from https://github.com/twilio/twilio-php/zipball/master) and unzip it.

2. Upload the Services/ folder to your website.

3. Upload config.php to your website and make sure the following variables are set:

   <?php
     $accountsid = '';  //  YOUR TWILIO ACCOUNT SID
     $authtoken = '';  //	  YOUR TWILIO AUTH TOKEN
     $fromNumber = '';  //  PHONE NUMBER CALLS WILL COME FROM
     $toNumber = '';  //  YOUR PHONE NUMBER TO CONNECT TO
   ?>

4. Upload a file called click-to-call.php to your website:

   <?php
   session_start();
   include 'Services/Twilio.php';
   include("config.php");
   if( isset($_GET['msg']) )
     echo $msg;
   ?>
   <h3>Please enter your phone number, and you will be connected to <?=$toNumber?></h3>
   <form action="makecall.php" method="post">
   <span>Your Number: <input type="text" name="called"/></span>
   <input type="submit" value="Connect me!" />
   </form>

   This file displays a form that, when submitted, triggers the rest of the calling process.

5. Now, upload a file named makecall.php to your website:

   <?php
   session_start();
   include 'Services/Twilio.php';
   include("config.php");
   
   $client = new Services_Twilio($accountsid, $authtoken);
   if (!isset($_REQUEST['called'])) {
     $err = urlencode("Must specify your phone number");
     header("Location: click-to-call.php?msg=$err");
     die;
   }
   $call = $client->account->calls->create($fromNumber,$toNumber,'callback.php?number=' . $_REQUEST['called']);
   $msg = urlencode("Connecting... ".$call->sid);
   header("Location: click-to-call.php?msg=$msg");
   ?>

6. Finally, upload a file named callback.php to your website:

   <?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>

How it works...

In steps 1 and 2, we downloaded and installed the Twilio Helper Library for PHP.

In step 3, we uploaded config.php containing our authentication information to talk to Twilio's API.

In steps 4, 5, and 6, we created the backbone of our Click-to-Call system.

We display a form on your website, where a user enters his or her phone number and clicks the Connect me! button. The system then calls your phone number; once you answer, it will connect you to the user.