Click-to-call enables your company to convert web traffic into phone calls with the click of a button. Learn how to implement it in minutes.

Start Tutorial

How It Works

Let's go over the necessary steps to implement click-to-call:

Click-to-call Diagram

  1. A website visitor wants to connect to your organization. He/she submits a web form with its phone number to receive a call connecting her to your sales or support team.

  2. Your web application receives the submission form. An HTTP request is initiated from your application to Twilio to initiate an outbound call.

  3. Twilio receives the request and initiates a call to the user's phone number.

  4. User receives the call.

  5. After the call connects, Twilio asks our application for TwiML instructions. Our TwiML instructs Twilio to connect the user to our sales or support teams.

What We Will Learn

This How-To demonstrates initializing a call using the Twilio REST API and creating TwiML call logic using the Say and Dial verbs.

Sound like a plan? Let's get started!

See Also:


To create our click-to-call application we need to setup our environment first.

Let's put our Twilio credentials in a place where our application can access them. For the purposes of this tutorial, we'll place them as environment variables that our application can read.

You can find your Twilio credentials in your Account Dashboard.

For more instructions on how to run the application refer to the app's readme file.

The Web Form

The first step on creating a real click-to-call solution is by building the form that your user needs to fill on the web. No need to overthink this, the goal is to POST the User's name and phone number to your controller.

So what information does this form need? An input for the phone number and a submit button. Since the page doesn't need to render new content after clicking on submit, we decided to implement the POST action via Ajax using jQuery. Let's take a look at it.

Submit the Form

To make the click to call feature more seamless we used Ajax to send the form asynchronously. This code shows one way you could implement this functionality using jQuery.

This code does the following:

  • Intercepts the submission of the user's form
  • Submits the form data to our controller
  • Lets the user know if the submission was successful or not

This is a common implementation of jQuery's $.ajax() method. Notice that we are returning the response message when the call has connected.

Now that we have the front end done lets build the back end that will receive this data and call the user.

Making a Phone Call

Next we initiate a Twilio\Rest\Client object with our Account SID and Auth Token. This is essentially our PHP REST API handler, which we could use to send SMS or a myriad of other things. But for now we just need it to get access to create phone calls.

We'll use the REST API to make an outgoing phone call which requires us to pass a To number, a From number and an array which contains the URL Parameter that tells Twilio what to do after it connects the call to our user. In this case Twilio needs to dial the Agent in once the call has been placed. We'll discuss this more later.

Assuming we have successfully connected our user to our agent, we need to send a response to the browser telling it that all went well. This is the message that our ajax handler was expecting.

Generating TwiML

TwiML is a set of simple verbs written in XML that Twilio reads as instructions. In this case our instructions inform Twilio to SAY something to the user and then DIAL the support agent's number so the customer can talk to him/her.

In order to make writing TwiML easy, many of the helper libraries have methods that generate TwiML for you. In this case we use twilio-php to create a TwiML response that will instruct Twilio to say something.

Where to next?

That's it! We've just implemented click to call that allow your customers to connect with a support agent.

If you're a PHP developer working with Twilio, you might enjoy these other tutorials:

Automated Survey

Instantly collect structured data from your users with a survey conducted over a voice or an SMS text messages.

Two-Factor Authentication

Improve the security of Laravel's built-in login functionality by adding two-factor authentication via text message.

Did this help?

Thanks for checking out this tutorial! If you have any feedback to share with us, we'd love to hear it. Contact the Twilio Developer Education Team to let us know what you think.