how do I set a call status callback from the Twilio Voice JavaScript SDK?

Sully1570 0
Viewed 43

I'm trying to use the Twilio Programmable Voice JavaScript SDK to make an outbound call with a statusCallback and statusCallbackEvent so I can update another system after the call is completed.

Here's my code.

async function makeOutgoingCall() {
 const params = {
   // get the phone number to call from the DOM
   To: phoneNumberInput.value,
   CallerId: myCallerId,
   statusCallback: OutBoundCallbackURL,
   statusCallbackEvent: 'completed'
 };

console.log(params);

if (device) {
  log(`Attempting to call ${params.To} from caller id: ${params.CallerId} ...`);

  // Twilio.Device.connect() returns a Call object
  const call = await device.connect({ params });
    dtmf_1.onclick = function(){call.sendDigits('1')};
    dtmf_2.onclick = function(){call.sendDigits('2')};
    dtmf_3.onclick = function(){call.sendDigits('3')};
    dtmf_4.onclick = function(){call.sendDigits('4')};
    dtmf_5.onclick = function(){call.sendDigits('5')};
    dtmf_6.onclick = function(){call.sendDigits('6')};
    dtmf_7.onclick = function(){call.sendDigits('7')};
    dtmf_8.onclick = function(){call.sendDigits('8')};
    dtmf_9.onclick = function(){call.sendDigits('9')};
    dtmf_0.onclick = function(){call.sendDigits('0')};
    dtmf_s.onclick = function(){call.sendDigits('*')};
    dtmf_h.onclick = function(){call.sendDigits('#')};

  /*
   * add listeners to the Call
   * "accepted" means the call has finished connecting and the state is now "open"
   */
  call.on('accept', updateUIAcceptedOutgoingCall);
  call.on('disconnect', updateUIDisconnectedOutgoingCall);
  call.on('cancel', updateUIDisconnectedOutgoingCall);
  call.on('reject', updateUIDisconnectedOutgoingCall);

  outgoingCallHangupButton.onclick = () => {
    log('Hanging up ...');
    call.disconnect();
  };
} else {
  log('Unable to make call.');
}
}

I'd like it to send back TwiML like this:

<Response>
<Dial answerOnBridge="true" callerId="+19876543210">
    <Number
     statusCallbackEvent="completed"
     statusCallback="https://myapp.com/calls/events"
     statusCallbackMethod="POST">
        +12349013030
    </Number>
</Dial>
</Response>

But it's sending back this:

<Response>
<Dial answerOnBridge="true" callerId="+19876543210">
    <Number>+1123456789</Number>
</Dial>
</Response>

I can't find a list of possible parameters for device.connect(). Not even sure that's what I need to edit.

Can someone help me out?

twilio-javascript twilio javascript
1 Answers

Updating this TwiML response is likely going to need to be done server side, so you may need to start from where you're generating the Twilio Access Token (that your client initially uses to register with Twilio) and trace that back to see where that server and specific handler live.

So, e.g., if there's an outgoingApplicationSid used to create the voice grant in the access token, you'll want to find the TwiML app with the corresponding sid in the Twilio console and follow the Voice Request URL its configured with to find the server. From within your server you should then be able to find where that TwiML response is created.

For a slightly more specific answer based on a couple assumptions:

  1. Based on some of your code snippets above, it looks like you may have used the TwilioDevEd/voice-javascript-sdk-node as a springboard for your project.
  2. If 1 is true, you likely set up a TwiML app in the Twilio console that points the Voice Request URL that tunnels to your locally running node server using ngrok as they direct in the README.

If those are true, then you'll want to look in your project for the voiceResponse handler and update the twiml.dial() call (which generates that response TwiML) to create the actual TwiML you want.

When Twilio makes the request to your TwiML app, it sends all the parameters that you pass to the connect method through as parameters in the body of the request. So, in your existing program, it appears that the To and CallerId parameters are being used. So you need to adjust your dial to also use the statusCallback and statusCallbackEvent parameters. That might look a bit like this:

const { statusCallback, statusCallbackEvent, CallerId, To } = req.body;
const twiml = new VoiceResponse();
const dial = twiml.dial({ callerId: CallerId });
dial.number({ statusCallback, statusCallbackEvent }, To);
userKCzh0
Related