Twilio Flex - Send Call To IVR After Reject

Question

Using this plugin as a reference, I have Flex configured to be able to send a call to a Twilio Studio IVR, after an agent has accepted a call.

I'd like to be able to send an incoming call back to Studio when an agent rejects a call (ie as soon as they click the reject button). I'm trying to do this by adding a listener to the plugin's init method:

flex.Actions.addListener("afterRejectTask", async (payload, abortFunction) => {
    let url: string = payload.task.attributes.transferToIvrUrl;
    let menu: string = 'hangup';
    await request(url, { CallSid: payload.sid, menu });
});

See here for the full context -- I'm pretty much using that exact code, with the addition of this listener.

I'm getting this error message, and the call is not transferred anywhere.

twilio-flex.unbundled-react.min.js:1574 Error on afterRejectTask: SyntaxError: Unexpected token < in JSON at position 0

Here's additional context from the console, if that's helpful:

Additional info:

The url being requested is a Twilio function, which successfully returns a response like this:

<Response>
  <Enqueue workflowSid="WWcc1a650e4175089538d754a6c2e15a98">
    <Task>{"transferToIvrUrl": "https://my-twilio-function-service.twil.io/studio-flex-transfer-helper"}</Task>
  </Enqueue>
</Response>

Any advice would be appreciated.

Answer 1

Ah, ok, so looking at that plugin I found the example Twilio Function that works with it . From what I can tell, this function is intended to be used in two places, either in Studio to transfer the call to Flex (though I'm not sure it's needed for that) or from Flex to transfer the call back to Studio. The thing that triggers the different response is whether you pass an argument called transferToIVRMenu with the request.

Your current request is not passing that argument, you currently have:

    await request(url, { CallSid: payload.sid, menu });

which looks similar to the original plugin's request:

    await request(transferToIvrUrl, { CallSid: call_sid, transferToIVRMenu });

The difference is in the second property in the object. When you just pass the name of the variable in an object, it expands to call the property the same name as the variable and set the value to the value within the variable. So the original request expands out to:

    await request(transferToIvrUrl, { CallSid: call_sid, transferToIVRMenu: transferToIVRMenu });

but your request only expands to:

    await request(url, { CallSid: payload.sid, menu: menu });

So you are passing a parameter called menu not transferToIVRMenu and that triggers the Function on the back end to return TwiML and not to update the call.

To fix this, you can update your plugin code to send the transferToIVRMenu parameter, like:

flex.Actions.addListener("afterRejectTask", async (payload, abortFunction) => {
    let url: string = payload.task.attributes.transferToIvrUrl;
    let menu: string = 'hangup';
    await request(url, { CallSid: payload.sid, transferToIVRMenu: menu });
});