I'm trying to setup a seamless outbound calling experience for a Twilio Flex setup. I have the dialpad outbound as well as a callback feature from previously delivered callback/voicemail request tasks (agent can accept the task and make an outbound within).
I am making the call via deployed Twilio function and it looks like this:
client.calls
.create({
url: callHandlerCallbackURL, // to another Twilio function
to: event.To,
from: event.From,
statusCallback: statusCallbackURL,
statusCallbackEvent: ["ringing", "answered", "completed"]
})
When the call is connected, Twilio makes a call to another function which is provided through the url
property above. Within that function, I enqueue the call with some task attributes and it looks like this:
let twiml = new Twilio.twiml.VoiceResponse();
let enqueue = twiml.enqueue({
workflowSid: `${context.TWILIO_WORKFLOW_SID}`,
waitUrl: ''
});
enqueue.task(JSON.stringify(taskAttributes));
callback(null, twiml);
But the problem is the task comes in to Flex (to the agent) after the call is answered and this causes agent to miss a couple of seconds from the call. So, the customer opens the phone, starts speaking, but there is no one on the other side for a while.
Is there a straight-forward way to prevent this from happening?
I was able to resolve this by using a built-in action in Flex called StartOutboundCall
.
With this action, the agent is transferred to the call canvas before the call starts and is already in the call before the customer answers. Overall, this is a much more "natural" flow to start an outbound call and prevents the confusion I mentioned above.
It is also simpler as you can start an outbound call with a couple of lines of code:
function clickToDial(destinationNumber) {
Flex.Actions.invokeAction("StartOutboundCall", {
destination: destinationNumber
});
}
You can find more information here: https://www.twilio.com/docs/flex/developer/voice/dialpad-click-to-dial#the-outbound-call-action-1