javascript - Twilio retrieve call on hold back

Question

In my application, I need to do Twilio holding and retrieving back a call. I researched and got this link : https://www.twilio.com/docs/api/rest/change-call-state.

javascript

function holdCall() {  // hold a call
var callSid = connection.parameters.CallSid;

$.ajax({
    url: "http://www.domain.com/phone/phone_ajax.php",
    type: 'POST',
    data: {
        callSid: callSid
    },
    success: function(data) {
        console.log(data);
    },
    error: function() {

    }, 
    complete: function() {

    }

});
}

The ajax call will go to this page.

phone_ajax.php

require_once ( "http://www.domain.com/phone/phone_api/vendor/autoload.php");
use TwilioRestClient;
use TwilioJwtClientToken;

// initialize

if ( $_POST['callSid'] ) {  // hold a call
    $client = new Client($twilioAccountSID, $twilioAuthenticationToken);
    $calls = $client->calls->read(
        array("ParentCallSid" => $_POST['callSid'])
    );
    // Loop over the list of calls and echo a property for each one
    foreach ($calls as $call) {
        // This will return child call sid e.g CA9ccxxxxxxxxxx
        $twilioCall = $client
        ->calls($call->sid)
        ->update(
            array(
                "url" => "http://demo.twilio.com/docs/voice.xml",
                "method" => "POST"
            )
        );

        echo $twilioCall->to;
    }
} 

I tried calling to my mobile phone, picked up the call and clicked Hold button. The call in my browser got ended and the call in my phone didn't ended up (I can hear hold music in my phone). When I again click on the Hold button in the dialpas, the call should be retrieved back. How can I achieve this?

Can anyone help me to do this? Thanks in advance.

Answer 1

Twilio developer evangelist here.

The problem here is that when you update the first call to redirect to the hold music that disconnects the other call and ends it.

This is likely because your TwiML ends after the <Dial> that connected the two calls in the first place. You can keep a call going by either adding more TwiML after the or using the action attribute.

If instead, your Twilio Client leg of the call had the following TwiML:

<Response>
  <Dial action="/holding">NUMBER_TO_DIAL</Dial>
</Response>

And the endpoint /holding looked like:

<Response>
  <Say>You have a caller on hold.</Say>
  <Redirect>/holding</Redirect>
</Response>

Then your call won't end. It will instead endlessly say "You have a caller on hold". You could implement this however you like though.

Now, instead of shipping the caller on the other end off to "http://demo.twilio.com/docs/voice.xml" you should place them in a queue to wait to be retrieved. So, you'd need another endpoint at say /place-on-hold which you would update the call to when the hold button is pressed. That would need the TwiML:

<Response>
  <Enqueue waitUrl="SOME_HOLD_MUSIC">ADMIN_ID</Enqueue>
</Response>

If you use the ID of the admin who put the user on call then if you have multiple users of the Twilio Client dialler then they will each have their own holding queue.

Finally, you need to Reconnect the callers. For this you need to redirect your admin out of their holding pattern using the REST API again and onto some TwiML that will dial their hold queue which will reconnect the callers. The TwiML would look like:

<Response>
  <Dial action="/holding">
    <Queue>ADMIN_ID</Queue>
  </Dial>
</Response>

This will dequeue the caller on hold and reconnect. Note we also include the action attribute so that the user can be placed on hold again.

Let me know if this helps at all.