Cloud Workflow

Call Center with Twilio, without Telephone Machine (Receiving Phone calls on the Browser)

A continuation of 'Auto-Launch triggered by an incoming call'. One more step forward to a Call Center!

Last time, I realized to launch a Process triggered by incoming phone call automatically. (The article is here.) It was only a system that receiving calls on the phone machine. I would like to improve it to receive phone calls on the computer, a web browser this time. I think it would cool looking more like an authentic Call Center. It can be realized also with Twilio.

Overall Mechanism looks as below. Almost the same except Step 3.

== 0. Get phone(s) number from Twilio in advance. Publish it as a the Inquiry Phone Number ==

== 1. A User makes a Phone Call to the Inquiry Phone Number ==

== 2. HTTP Request from Twilio to Google Apps Engine ==

Twilio will transmit an HTTP request to the Google Apps Engine on receiving a phone call.
Destination of the transmission of the request also has been registered to Twilio.
You can make a registration of ‘If there is a phone call to the number that you obtained, send an HTTP request to certain URL’.

== 3. Google Apps Engine Responding to the HTTP Request to Transfer the Call to the Specified Application ==

This is the step that is different from the one before. The destination of forwarding was a phone number, because receiving on the phone. This time, the specification of the destination differs because I want to transfer to the browser on a specific PC. Set up in the Google Apps Engine to respond the following XML when receiving an HTTP request from Twilio.

  <Say>Please wait for few seconds.</Say>
  <Dial record="true" action="" method="GET">

The contents of the XML (TwiML) are as follows.

  • Automatically responding to the call saying “Please wait for a few seconds.” (<Say>…</Say>)
  • Then transferring the call to an application (contact personnel’s browser) which is identified as “support”. (<Client>support</Client>)
  • Recording the contents of the call to be transferred (record=”true”)
  • When the call finishes, transmitting an HTTP request in GET method to the specified URL (action=”” method=”GET”)

== 4. The Contact Representative Talks to the User ==

Twilio will transfer the User’s call to the application (contact personnel’s browser) which is identified as “support”, and the conversation will be recorded.

== 5. HTTP Request to Google Apps Engine at Call End ==

At the time the call between the user and the contact representative finishes, Twilio will make an HTTP request to the URL that has been specified in TwiML.
At this time, the URL which you can download recorded conversation will be included in the HTTP parameter.

== 6. Google Apps Parses the HTTP Request from Twilio, and makes an HTTP Request to Questetra BPM Suite ==

Receiving the HTTP request from Twilio, the Google Apps Engine will parse its contents.
Then it will call the Message Start Event of Questetra BPM Suite to start a Process.
I have written a program for it, and here is the link to my program.CallEndServlet (This is a Java program even though the extension is ‘txt’. It is because of this web site.)

As described above, the overall procedure is almost the same as previous. However not like the telephone, the application to be transferred to has no universal identification. In above, the call will be transferred to “support”, but in the state as it is, it will end up with ‘So, what is “support”?’. So beforehand of step 1. ‘A User makes a Phone Call to the Inquiry Phone Number’, the contact personnel’s browser must be registered to Twilio in the name of ‘support’. The followings are the procedures to do so.

I have written another program for it, and here is the link to my program. web_client (This is a Java program even though the extension is ‘txt’. The Program is divided into the JSP script part which is processed on the server side, and javascript part which is processed on the browser. (1) When a User accesses to the Web Program , (2) the JSP script part will be executed on the server side. There will be an interaction between Twilio to prepare connecting to the browser.

<%@ page contentType="text/html; charset=UTF-web_client8"
	import="com.twilio.sdk.client.TwilioCapability,com.twilio.sdk.client.TwilioCapability.DomainException" %>
String ACCOUNT_SID = "..."; /* ID to identify Twilio account  */
String AUTH_TOKEN = "..."; /* Key to access API of Twilio  */

TwilioCapability capability = new TwilioCapability(ACCOUNT_SID, AUTH_TOKEN);
capability.allowClientIncoming("support"); /* Specification of registration in the name of "support" */

String token = null;
try {
  token = capability.generateToken(); /* Specification of temporary token.。passing to Javascript */
} catch (DomainException e) {
  throw new ServletException(e);
pageContext.setAttribute("token", token);


In the interaction with Twilio on the server side, the name of “support” is registered. This name is effective only in the specified Twilio account. It is not effective in the entire Twilio. (3) If the registration is successful, a temporary token is passed from Twilio, then pass it to Javascript. Using this token, interaction with Twilio is carried out. Security is ensured because Javascript does not deal account information etc., of Twilio. (4) When the browser receives the response from the Web Program, Javascript program will be executed on the browser.


<script type="text/javascript" src="//"></script>

<script type="text/javascript">
  /* Setup of Twilio  */
  Twilio.Device.setup("${token}", {debug: true});
  /* Function to be called when it is ready to receive */
  Twilio.Device.ready(function (device) {
  /* Function to be called when a call comes in. */
  Twilio.Device.incoming(function (conn) {
    jQuery("#log").text("Incoming connection from " + conn.parameters.From);
    jQuery('').one('click', function(){
      /* Accept */

There are three points, the first script tag, Twilio.Deveice.setup() and Twilio.Device.incoming(). By the script tag, it reads the Javascript that Twilio provides. Because it is a Javascript that Twilio is providing, this Javascript can communicate with Twilio itself. The second point is Twilio.Device.incoming (). By establishing communication with the Twilio in this method, the browser will be ready to receive. In the setup() method, specify the temporary token which has been generated on the server side as an argument.

The third point is Twilio.Device.incoming(). When a call comes in, a function that has been specified at Twilio.Device.incoming() will be called. The operator can start talking by calling the accept method of the Twilio Connection object which argument is passed to the specified function. In the sample program, it is also possible to reject the incoming call.


Although this program is javascript, the interaction with the speakers and microphone is conducted by Flash. Flash will ask for the permission to use the microphone / speaker, the operator need to grant it when actually talking. When actually a call comes in while the browser is in the state of possible to receive, the screen shows an image as follows.


I only made it possible to receive a call on the browser, but now it makes me feel like an authentic Call Center. When I work on it furthermore, it would be possible to enter data while talking on the computer. Stay tuned!

Prev article - 15. Ambitions Call Center with Twilio, without Telephone Machine (Auto-Launch triggered by an incoming call)
Next article - 15. Ambitions Three changes caused by the introduction of Enterprise Social Networking
Another article - Hatanaka Akihiro How to Use Customer Data on Salesforce as Choices