Twilio Client Click-to-Call

Browser to Phone

Twilio Client makes it easy to add browser calling to your website using a usb headset or microphone. You can use Click-to-call to connect your web user with a traditional phone number such as a sales line with just the click of a button. This example shows browser based click-to-call using Twilio Client. You can also read our traditional phone click-to-call HowTo.

Usage

A user clicks a 'Start Call' button on a web page. Twilio will call a specified third party phone and setup a call between the user's browser and that party's phone number. A call status and a disconnect button are displayed on the web page during the call. The parties may talk until one of them disconnects.

Concepts

This HowTo demonstrates browser calling using Twilio Client, specifying an outgoing connection to a Twilio Application, and creating TwiML call logic using the <Say> and <Dial> verbs.

Download

browser-clicktocall.zip

Implementation

1. Generate a Twilio Capability Token with permissions to make an outgoing connection.
2. Create javascript to set up a Twilio.Device and HTML to display status and a button initiate a call
3. When the web user clicks the connect button an outgoing connection is made to the Application specified in the `Services_Twilio_Capability`
4. Twilio requests the Voice URL specified in the Application, and the Application responds with TwiML instructions to dial the third party number.
5. Twilio establishes a call between the third party and the user's browser.

Get Started

• 1

  • Create a capability token to securely bind Twilio Client to your account and also give permissions to make outbound calls to a Twilio Application.

    • howtos/browser-clicktocall/click_to_call.php

      include 'Services/Twilio/Capability.php';
      
      $accountSid = 'ACxxxxxxxxxxxxxxx';
      $authToken  = 'xxxxxxxxxxxxxxxxx';
      
      $capability = new Services_Twilio_Capability($accountSid, $authToken);
      $capability->allowClientOutgoing('APxxxxxxxxxxxxxxx');
          

• 2

  • Add javascript to setup a Twilio.Device with the capability token. We use jQuery to create click handlers for the call and disconnect buttons as well as register Twilio.Device callbacks to update the status text. The visibility of the 'Call' and 'Disconnect' buttons are toggled when a call connects or disconnects.
  • howtos/browser-clicktocall/click_to_call.php

    		<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function(){
    
    			Twilio.Device.setup("<?php echo $capability->generateToken();?>");
    
    			$("#call").click(function() {
    				Twilio.Device.connect();
    			});
    			$("#hangup").click(function() {
    				Twilio.Device.disconnectAll();
    			});
    
    			Twilio.Device.ready(function (device) {
    				$('#status').text('Ready to start call');
    			});
    
    			Twilio.Device.offline(function (device) {
    				$('#status').text('Offline');
    			});
    
    			Twilio.Device.error(function (error) {
    				$('#status').text(error);
    			});
    
    			Twilio.Device.connect(function (conn) {
    				$('#status').text("Successfully established call");
    				toggleCallStatus();
    			});
    
    			Twilio.Device.disconnect(function (conn) {
    				$('#status').text("Call ended");
    				toggleCallStatus();
    			});
    
    			function toggleCallStatus(){
    				$('#call').toggle();
    				$('#hangup').toggle();
    			}
    
    		});
    		</script>
        

  • Create HTML for the 'Call' and 'Disconnect' buttons as well as a div to hold status information. Set the initial visibility of the 'Disconnect' button to 'none'.
  • howtos/browser-clicktocall/click_to_call.php

    		<div align="center">
    			<input type="button" id="call" value="Start Call"/>
    			<input type="button" id="hangup" value="Disconnect Call" style="display:none;"/>
    			<div id="status">
    				Offline
    			</div>
    		</div>
        

• 3

  • When the user clicks the 'Start Call' button, javascript will invoke Twilio.Device's connect method which will initiate an outbound connection.

• 4

  • Twilio requests the Voice Url specified in the Application for instructions on how to handle the call logic. The Application responds to Twilio's request with TwiML.

Our TwiML speaks audio to the web user using <Say> verb, then initiates a phone call to the third party phone number via the <Dial> verb. The 'callerId' attribute is required and determines what number the third party sees on their phone when it rings. For a complete overview of TwiML (Twilio's XML) see the TwiML documentation.

• 5

  • Twilio processes the TwiML we sent, calls the third party and successfully connects the two parties.