This plugin is intended to demonstrate how to make outbound calls from Twilio Flex that use the native call orchestration so the inbound call features such as supervisor monitoring as well as cold and warm transfer, also work for outbound calls. This plugin also provides the ability to perform external conferencing which leverages the work on this project
How It Works
This plugin uses a series of twilio functions to create an outbound call, listen for updates to that call and push the updates to the flex users via a sync document. When the call is answered, the worker goes available in Flex to recieve the call via a task router task. The front end puts the agent in a busy state while waiting for the task to arrive so that no other tasks are recieved. To avoid a race condition, when the agent does go available, any tasks that are not the outbound call are auto rejected. The worker goes into a busy state to avoid excessive reservation rejections.
Task Router Dependencies
Before using this plugin you must first create a dedicated TaskRouter workflow for outbound calls. You can do this here. Make sure it is part of your Flex Task Assignment workspace.
- Ensure there is the following matching workers expression for the only filter on the workspace.
task.targetWorker === worker.contact_uri
- Ensure the priorty of the filter is set to 1000 (or at least the highest in the system).
- Make sure the filter matches to a queue with Everyone on it. The default Everyone queue will work but if you want to seperate real time reporting for outbound calls, you should make a dedicated queue for it with a queue expression.
1 === 1
This plugin forces the agent into an offline state to block calls while dialing out and an online state to accept the outbound call thats been placed. You must ensure these are agent activity states are available for this plugin to work. For both offline and available, two possible activities have been programmed, the plugin will try one of the activities and if its not available, try the other, if thats not available it will fail. You can either provision one of the states or update the code to switch to an equivalent activity that you do have configured in Task Router.
Available states programmed by default (One of these must be configured in Task Router):
Unavailable states programmed by default (One of these must be configured in Task Router):
- Outbound Calls
Twilio Serverless Dependency
npm install twilio-cli -g
twilio plugins:install @twilio-labs/plugin-serverless
How To Use
- Setup dependencies above, The workflow and the outbound calls worker activity.
- Clone the repository.
./public/appConfig.jsand set your account sid.
./dialpad-functions/.envand populate the appropriate SIDs. The workflow sid should be the workflow dependency described above.
- CD into
npm installand then
twilio serverless:deploy(optionally you can run locally with
twilio serverless:start --ngrok="".
- Take note of the domain of where they deployed and update
- Update the
DEFAULT_FROM_NUMBERin ./src/OutboundDialingWithConferencePlugin.js to a twilio number or a verified number associated with your account.
- CD back to the root folder and run
npm startto run locally or
npm run-script buildand deploy the generated
./build/plugin-outbound-dialing-with-conference.jsto Twilio Assests to include plugin with hosted Flex.
- The plugin assumes an activity of
Offlineis configured for making the worker automatically unavailable, if these are not worker activity states that are available, you can either add them or update the code to change to a different state. The same is true for ensuring an available activity of
Idleis in the system.
- This plugin is not compatible with the dialpad plugin that is listed as an
Experimental feature- the expiremental feature or more recently, the
Pre Releasefeature must be turned off.
- If you place a
phoneattribute on the worker and assign it a twilio or verified number, the call will be placed from that number instead of the default number.
- This solution doesnt support and is not suitable for direct agent to agent dialing.
- Since the call is routed to the agent only after the call is answered, there can be a perceived delay, typically less than a second, of the agent and the customer connecting on the conference. It is adviced to configure the hold music for the outbound call to be silence, this creates a smoother experience for the person being dialed.
- Improve styling to better match base palette.
- Add in improved text box for entering numbers with country code drop down.
- Introduce callback task for making outbound calls from a callback .
- Update plugin builder to use serverless:cli for plugin asset deployment and align functions hostname automatically.
v1.3 - Moved dialpad to main header to avoid the responsive rendering of the side nav unmounting when resizing the canvas.
v1.2 - converted plugin to use Twilio functions and sync docs to manage state. Also merged in external transfer features.
v1.1 - added ringtone when dialing, DTMF tones while on a call and better state management.
- breaking change to url, must align with backend
v1.0 - initial release
Code of Conduct
Please be aware that this project has a Code of Conduct. The tldr; is to just be excellent to each other