Styjun

I am trying to create a phone system with Twilio Javascript client SDK for a small customer service team with the following criteria:

1. each Client can see if multiple calls are coming in at the same time and choose which one to answer


2. each Client can transfer a call to another Client

From what I can tell there is no way to see multiple incoming calls

Which means, when transferring a call, if the phone is also ringing at the same time, the Client who is to be receiving the transferred call cannot see/accept the incoming call.

We have a small team (between 2-4 Clients online at any one time) working from the same office. It seems like TaskRouter is the only viable option but feels like overkill considering the size of our team and the simplicity of the problem I am trying to solve.

Any help would be much appreciated.

Twilio developer evangelist here.

This is what TaskRouter was designed for, though I understand that it may be overkill for the size of the team.

You could place all incoming calls into a queue using <Enqueue> (without a workflow ID) and then query the Queue resource to display all the current incoming calls. Then when you choose to answer or redirect the call, you can eject it from the queue using the REST API too, then directing it on to <Dial> the <Client> of choice.

Let me know if that points you in the right direction.

I thought I'd answer my own question as I have solved this problem for myself.

Nowhere in any of the docs or stack overflow questions I read did I see any mention that handling multiple incoming calls is possible within the browser with the JavaScript SDK. However, I have been able to do so. It seems that each Twilio.Device() can have multiple Connections. So by creating a new phone container as outlined bellow, you can manage each separately.

HTML

<div id="main_container">
 <div class="phone_container" call_sid="">
 <div class="well well-sm call-status">
 Connecting to Twilio...
 </div>

 <div class="phone_btn_container">
 <button class="btn btn-md btn-success answer-button" disabled>Answer</button>
 <button class="btn btn-md btn-danger hangup-button" disabled>End</button>
 <button class="btn btn-md btn-default mute-button" disabled>Mute</button>
 </div>
 </div>
</div>

Javascript

device.on('incoming', function(connection) 

 // get call sid
 var call_sid = connection.parameters.CallSid

 // get phone container which holds the buttons and call status etc.
 var phone_container = $('.phone_container')

 // if there is only one container and it's empty, use this to handle call
 if (phone_container.length == 1 && phone_container.attr('call_sid') == '') 
 // set call sid to container
 $('.phone_container').attr('call_sid', call_sid)
 

 // else clone phone container for new call
 else 
 // clone , set call sid and append to main container
 $('.phone_container').first().clone().attr('call_sid', call_sid).appendTo($('#main_container'))
 

);

In regards to transferring calls, I have used conference rooms to manage this. Similar to Devin Rader's answer to this question: Twilio - How to move an existing call to a conference