Twilio Click-to-Call in Laravel

Twilio is a pretty powerful tool for making calls and sending SMS messages. When integrating into your marketing efforts, it’s just short of magic.

I recently had a project, built on Laravel, where I needed to create a click-to-call functionality. Basically, we display phone numbers as a link. When the user clicks on a phone number, the user first receives a call, and then connects to user to the selected phone number. Here’s how I did it….

First install via composer.

composer require twilio/sdk

Then create two routes to handle the call and dial requests

Route::get('call', 'TwilioController@call');
Route::get('dial', 'TwilioController@dial');

Create our TwilioController

<?php

namespace App\Http\Controllers\Dash;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class TwilioController extends Controller
{

    public function call(Request $request)
    {
        // Set our Account SID and AuthToken
        $sid = 'AC123';
        $token = 'abcd';

        // A phone number you have previously validated with Twilio
        $phonenumber = '4151234567';

        // Instantiate a new Twilio Rest Client
        $client = new Services_Twilio($sid, $token, $version);

        // Initiate a new outbound call
        $call = $client->account->calls->create(
            $phonenumber, // The number of the phone initiating the call
            $user->phone, // The number of the phone receiving call
            'http://yourdomain.com/dial?from='.$user->phone.'&to='.\Request::get('to'), // The URL Twilio will request when the call is answered
            array("Method" => "GET")); //use the GET Method
        );
    }

    public function dial(Request $request) {
        $response = new \Services_Twilio_Twiml;
        $response->dial(\Request::get('to'), array(
            'callerId' => \Request::get('from')
        ));
        return \Response::make($response, '200')->header('Content-Type', 'text/xml');
        print $response;
    }
}

This controller is responsible for first handling the request to call the users phone from the phone link. Then, to handle the GET request back from Twilio, which connects the user to the selected phone number.

One thing to note here. When initiating a new outbound call in the call method, I’m using the GET method. This was just to bypass the TokenMismatchException error that Laravel will throw back by default.

To test, you can visit http://{yourdomain}.com/dial?from=4151234567&to=4151234567, and you should see a page like this:

The shown XML is created through TwiML.

Finally, create the phone links…

<a href="/call.php?to=123-123-1234">123-123-1234</a>

Clicking on the link will will trigger the call function, starting a phone call to the user. And when the user picks up the phone, the Twilio will ping the /dial URL, read the provided XML, which then triggers the outbound phone call.

Done and done.