Menu

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Click To Call with PHP

Download the Code

Wish your users could get in touch as easily as they can surf? Today's your lucky day!

Let's go over the steps necessary to implement click-to-call in a PHP application.

Click to Call

  1. A website visitor submits a web form with a phone number.
  2. Your web application receives the submission and initiates an HTTP request to Twilio asking to initiate an outbound call.
  3. Twilio receives the request and initiates a call to the user's phone number.
  4. The user picks up the call.
  5. After the call connects, we provide TwiML instructions to connect the user to our sales or support teams.

What We Will Learn

This tutorial demonstrates how to initialize a call using the Twilio REST API and how to create a call using the TwiML Say verb.

Let's get started! Click the button below to move to the next step of the tutorial.

Next

Set Up a PHP Development Environment

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 this tutorial, we'll set them as environment variables that our application can read.

You can find your Twilio credentials in the Twilio console. This example dashboard shows the location of the Account SID and Auth Token.

Twilio Console Credentials Location

The Twilio Account_SID and Auth_Token need to be entered in an environment configuration file. If you have Twilio phone numbers, you can use an existing number or obtain a new number.

Now let's look at how we build our click-to-call application's user-facing form.

Next

Make a Nice Web Form

The first step is to build the form that your user needs to fill out on the web.

No need to overthink this as the real goal is to POST the user's and sales team's phone numbers to your controller.

What information does this form need?

  • An input for the phone number
  • An input for the sales team number
  • A submit button

Loading Code Sample...
      
      
      
      
      app/views/home.php

      Build a web form

      app/views/home.php

      Since the page doesn't need to render new content after clicking Submit, we've decided to implement the POST action via AJAX using jQuery. Let's take a look at that next.

      Next

      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:

      • Intercept the submission of the user's form
      • Submit the form data to our controller
      • Let 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.

      Loading Code Sample...
          
          
          
          
          public/app.js

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

          Next

          Outbound Call Routing

          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 SMSes (or for a myriad of other things). Of course, for now, we just need it 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 a URL Parameter with instructions for Twilio. In a customer support case, Twilio needs to DIAL the Agent in once the call has been placed. (We'll discuss this later.)

          Loading Code Sample...
              
              
              
              
              app/routes.php

              The application routes

              app/routes.php

              Let's look in greater detail at our TwiML commands to Twilio.

              Craft Some Perfect TwiML Commands

              Generating TwiML

              TwiML is a set of verbs and nouns written in XML that Twilio reads as instructions. For this simple app, 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.

              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.

              Loading Code Sample...
                  
                  
                  
                  
                  app/routes.php

                  And with that, we've added Click-to-Call to our application which will make it easy for our website visitors to get in touch.

                  Next

                  Testing Your App Locally

                  Now you can run and test your Twilio app.

                  However, you probably want to test it using a publicly available endpoint without having to go "public" with your app. The best option is to use ngrok.

                  Note: For more information about running the application, see the Readme file in the app github repository.

                  About ngrok

                  ngrok generates a secure URL that forwards traffic to a port, usually 5000, on your localhost server. It allows you to run applications locally but make them a publicly available endpoint via secure tunneling. This allows you to test your application and do all the things you want your app to do but in a secure public space.

                  In case you are wondering, ngrok is an executable (ngrok.exe) that you run on the command line or terminal.

                  Setting Up ngrok

                  ngrok is brilliantly simple to use. You sign up on the ngrok website (ngrok.com), download the ngrok.zip file for your OS of choice, then unzip the file into an easily accessible location.

                  For example, on Windows, you can place it in your \Users directory in \AppData\Roaming\<ngrok-directory-name>\ngrok.exe. Then, update your PATH environment variables to the location of the ngrok executable. On Linux or OSX, it's much easier (see the instructions on the ngrok site).

                  And that's it.

                  Accessing your app from an endpoint using ngrok

                  So, now you are ready to use ngrok.

                  Before you start ngrok, it might be a good idea to have your Twilio Console open.

                  So, for Mac and Linux, open a terminal and run this command to start ngrok:

                  $ ./ngrok http 4040

                  On Windows, open a command prompt and run this command to start ngrok:

                  $ Path-to-ngrok> ngrok http 4040

                  Alternately, you can start ngrok using the following command:

                  $ ngrok http 4040 -host-header="localhost:4040"

                  The port number "4040" is arbitrary. If your local server is running on another port, replace "4040" in the command with the appropriate port number.

                  This will start ngrok. A running instance of ngrok will appear in the terminal showing the local web interface (in this case http://127.0.0.1:4040) and the public URL (in this case, https://28dd499b.ngrok.io).

                  ngrok-running

                  The forwarding public URL needs to be set in the Twilio Console. In the Console, select the active phone number you set in Local.config and enter the public URL from ngrok (shown above) in the "A Call Comes In" field under Voice & Fax. Be sure to select Webhook from the dropdown list.

                  Remember, each time you run ngrok, a new public URL will be generated. You will need to set this new URL in the Console.

                  Twilio Console Webhook Setting

                  And that's it. You now have a publicly available endpoint for your app, so now you can take a look at your running app and enter the phone numbers using your ngrok address: https://xxxxxx.ngrok.io

                  What Else Can I Build?

                  Where to Next?

                  Check out how iAdvize uses Twilo click-to-call to connect to online shoppers with customer support representatives:

                  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 SMS text messages.
                  • Two-Factor Authentication with Authy - Improve the security of Laravel's built-in login functionality by adding two-factor authentication with Twilio's Authy

                  Did this help?

                  Thanks for checking this tutorial out! Tweet to us @twilio and let us know what you're building!

                  Mario Celi Jose Oliveros Agustin Camino Kat King Glenn Lea Paul Kamp Andrew Baker

                  Need some help?

                  We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.

                  Loading Code Sample...