Giter Club home page Giter Club logo

plugin-flex-outbound-dialpad's Introduction

plugin-flex-outbound-dialpad

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.

Dialpad

Task Router Dependencies

Workflow

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

Activities

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):

  • Available
  • Idle

Unavailable states programmed by default (One of these must be configured in Task Router):

  • Outbound Calls
  • Offline

Twilio Serverless Dependency

You will need the twilio CLI and the serverless plugin to deploy the functions you can install with the following commands

npm install twilio-cli -g

and then

twilio plugins:install @twilio-labs/plugin-serverless

How To Use

  1. Setup dependencies above, The workflow and the outbound calls worker activity.
  2. Clone the repository.
  3. Copy ./public/appConfig.example.js to ./public/appConfig.js and set your account sid.
  4. Run npm install.
  5. Copy ./dialpad-functions/.env.sample to ./dialpad-functions/.env and populate the appropriate SIDs. The workflow sid should be the workflow dependency described above.
  6. CD into ./dialpad-functions/ then run npm install and then twilio serverless:deploy (optionally you can run locally with twilio serverless:start --ngrok="".
  7. Take note of the domain of where they deployed and update FUNCTIONS_HOSTNAME in ./src/OutboundDialingWithConferencePlugin.js.
  8. Update the DEFAULT_FROM_NUMBER in ./src/OutboundDialingWithConferencePlugin.js to a twilio number or a verified number associated with your account.
  9. CD back to the root folder and run npm start to run locally or npm run-script build and deploy the generated ./build/plugin-outbound-dialing-with-conference.js to Twilio Assests to include plugin with hosted Flex.

Important Notes

  • The plugin assumes an activity of Outbound Calls or Offline is 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 Available or Idle is 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 Release feature must be turned off.
  • If you place a phone attribute 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.

TODOs

  1. Improve styling to better match base palette.
  2. Add in improved text box for entering numbers with country code drop down.
  3. Introduce callback task for making outbound calls from a callback .
  4. Update plugin builder to use serverless:cli for plugin asset deployment and align functions hostname automatically.

Changelog

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 ❤️

plugin-flex-outbound-dialpad's People

Contributors

ayyrickay avatar dependabot[bot] avatar dorkusprime avatar jared-hunter avatar johnfischelli avatar ktalebian avatar martinamps avatar mr-yamraj avatar nathan78906 avatar parikshit-hooda avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

plugin-flex-outbound-dialpad's Issues

Moving to twilio-labs

Hi @jhunter-twilio :)

I'm happy to move this into Twilio Labs. Could you please check the following things first.

  • Clearly mark a core maintainer in the repo. One way to do this to specify the "author" in the package.json file or by specifying a Maintainer in the Readme somewhere
  • Link to the Code of Conduct. You can see an example in twilio-labs/plugin-serverless

Thank you,
Dominik

After First Call, Dialer Sends Incorrectly Formatted Number to Dialpad/call-outbound-join Endpoint

After the first call, subsequent calls using the Dialer results in a

"error":"The phone number you are attempting to call, +3324327116, is not valid."

response from POST https://flex.twilio.com/v1/Dialpad/call-outbound-join

The first outgoing call sends out the API request correctly, but subsequent API requests from the dialer incorrectly appends a "+" sign before the phone number value.

So if I enter 444-222-3333 into the dialer, the requested number is +444-222-3333 (even though I didn't put a "+" in front of the number in the dialer). And since you must append the local number with a country code if you include the "+" sign, the resulting call fails.

I found you can get around this bug by entering the full phone number with country code and the plus sign. So for the above number, if I enter +1-444-222-3333 into the dialer, the call does go through.

This looks to be a simple parsing fix.

Call is recording even after clicking on complete

I had a call with a customer, added a new number to the call and left the call, and clicked on complete. Even after that, the call is getting recorded. Is there any way to stop the recording once I click on complete?

Agent status doesn't change to available activity while doing outbound call

When we use this outbound dialpad plugin, we found sometimes the agent status doesn't change to availalbe activity automatically, thus the outbound task can't be set up successfully at agent end, meanwhile at client's end it looks like the call is holding. When issue happens, agent also can't end the call since the hang up icon disappears, agent has to refresh the page to end it.
There are suspicions that sync map update doesn't always happen.
The issue is intermittently.

Setting the dialpad to my clients account and maintaining License

I am developing/helping twilio customer with their IVR,sms,flex etc.I used this plugin and modified and set it up to one of my clients flex account, according to 4.(a) should I handover a license copy to client also?

  1. Redistribution. You may reproduce and distribute copies of the
    Work or Derivative Works thereof in any medium, with or without
    modifications, and in Source or Object form, provided that You
    meet the following conditions:

    (a) You must give any other recipients of the Work or
    Derivative Works a copy of this License; and

    (b) You must cause any modified files to carry prominent notices
    stating that You changed the files; and

    (c) You must retain, in the Source form of any Derivative Works
    that You distribute, all copyright, patent, trademark, and
    attribution notices from the Source form of the Work,
    excluding those notices that do not pertain to any part of
    the Derivative Works; and

    (d) If the Work includes a "NOTICE" text file as part of its
    distribution, then any Derivative Works that You distribute must
    include a readable copy of the attribution notices contained
    within such NOTICE file, excluding those notices that do not
    pertain to any part of the Derivative Works, in at least one
    of the following places: within a NOTICE text file distributed
    as part of the Derivative Works; within the Source form or
    documentation, if provided along with the Derivative Works; or,
    within a display generated by the Derivative Works, if and
    wherever such third-party notices normally appear. The contents
    of the NOTICE file are for informational purposes only and
    do not modify the License. You may add Your own attribution
    notices within Derivative Works that You distribute, alongside
    or as an addendum to the NOTICE text from the Work, provided
    that such additional attribution notices cannot be construed
    as modifying the License.

    You may add Your own copyright statement to Your modifications and
    may provide additional or different license terms and conditions
    for use, reproduction, or distribution of Your modifications, or
    for any such Derivative Works as a whole, provided Your use,
    reproduction, and distribution of the Work otherwise complies with
    the conditions stated in this License.

Warm transfer bug on both outbound and inbound with plugin installed

If I attempt a warm transfer with a customer on the line and I want to cancel the "Consult call", it does not work. It seems unresponsive. I am also not able to bring the customer off hold (probably because its locked while im trying to call up "Agent B". The only solution is to end the call and call up the customer again.

This happens on both inbound calls and outbound calls with the plugin installed.

With Chrome dev console open, this is reported:

image

It seems it fails because its missing the participant SID of the agent im calling to and is therefore unable to remove the participant.

Everytime Error Response by Placing Outbound Call

Hey Guys,

im looking for the Bug but i dont find it yet.
If you Place a outboundcall you got everytime a error but the call is Placed and everything is working fine.

The error cames from the Response in DialPadUtil.js Line 37-57

Unexpected end of input.

Do you know a solution?

Error on outbound calls

Hello,

I have been recently trying to install your Twilio dialpad plugin into my Flex workspace. However, I have not been able to successfully install the plugin as I am noticing some issues whenever a call is made.

I am currently noticing some type of error in the "workerSyncDoc" integration. I do not know exactly what this is supposed to do or what it means (keep in mind I have not worked with Twilio Sync). But I do know the issue occurs somewhere in the callStatusUpdateHandler.js file as this is what the console logs indicate.

I have included my console log:
workerSid: XXX INFO ERROR updating sync map: { [Error: The requested resource /Services/XXX/Documents/client:agentname.outbound-call was not found] status: 404, message: 'The requested resource /Services/XXX/Documents/client:agentname.outbound-call was not found', code: 20404, moreInfo: 'https://www.twilio.com/docs/errors/20404', detail: undefined }

Note that I have removed any credentials for safety reasons.

Would you know how to fix this error ?

thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.