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
Let's go over the necessary steps to implement click-to-call:
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.
Your web application receives the submission form. An HTTP request is initiated from your application to Twilio to initiate an outbound call.
Twilio receives the request and initiates a call to the user's phone number.
User receives the call.
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.
Sounds like a plan? Let's get started!
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 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.
This code does the following:
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.
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
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.
TwiML is a set of simple verbs written in XML that Twilio reads
as instructions. In this case our instructions inform Twilio to simply
SAY something to the user. If we wanted to connect the user to a
real support agent, we would have to add a
Dial verb that specifies 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.
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:
Instantly collect structured data from your users with a survey conducted over a voice or an SMS text messages.
Improve the security of Laravel's built-in login functionality by adding two-factor authentication via text message.
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.