Skip to content

lehel-twilio/plugin-dialpad

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dialpad

A version of this plugin is now natively available in Flex. Please see the documentation here: https://www.twilio.com/docs/flex/dialpad-end-user-guide

Make outbound calls using Twilio Flex!

Dialpad

Summary

This plug-in adds an icon to the side navigation bar which will open a dialpad. When a call is placed, a new TaskRouter Task is created through a Twilio Function and routed through the TaskRouter Workflow. Changes will need to be made to the Workflow in order to ensure that this Task gets routed back to the original worker.

Once the Worker is assigned the Task, a customization from the plug-in will auto-accept the Task on the Worker’s behalf, create a Conference and will call a second Twilio Function which will place the agent into the previously created Conference. Once the Worker is in the conference, a third Twilio Function is called which will place the outbound call into the same Conference.

Instructions

Get the Source Code

  • git clone https://github.com/lehel-twilio/plugin-dialpad.git
  • npm install
  • make patch

Setup Environment Variables

  • cp public/appConfig.example.js public/appConfig.js

Edit public/appConfig.js and add your accountSid.

Deploy Functions

Go to your Twilio Functions and deploy the functions in the /functions directory.

The function paths should match the function file names

Note the below functions need to have the Access Control checkbox, Check for valid Twilio signature, unchecked.

  • Flex Dialpad Hold Call (/hold-call)
  • Flex Dialpad Create New Task (/create-new-task)
  • Flex Dialpad Cleanup Rejected Task (/cleanup-rejected-task)

You can edit the below Twilio functions to replace the placeholder text, "Your Company Name Here", with your company name.

  • Flex Dialpad Add Conference Participant (/add-conference-participant)
  • Flex Dialpad Create New Task (/create-new-task)

In the Function Configuration tab you will need to make your credentials available in your Function code by checking the Enable ACCOUNT_SID and AUTH_TOKEN option. Additionally, you will need to configure two environmental variables:

TWILIO_WORKSPACE_SID Out of the box, Flex Task Assignment is the only available Workspace
TWILIO_WORKFLOW_SID Out of the box, Assign to Anyone is the only available Workflow.

You will need to add the NPM package, axios, as a Dependency under the Twilio Functions Dependencies section.

Task Router

In the TaskRouter -> Task Channels, please verify that channel custom1 exists. If not, please create one using the REST API or via Twilio Console. Instructions can be found here

In TaskRouter, add an attribute called “phone” to every Worker and specify a E.164 phone number which will be used as the caller ID for outbound calls.

Within the TaskRouter Workflow, add the following filter at the top:

{
  ​"filter_friendly_name"​: ​"Outbound Calls"​,
  ​"expression"​: ​"targetWorker != null"​,
  ​"targets"​: [
    {
​      "queue"​: ​"your Queue Sid which includes all workers"​,
      "expression"​: ​"task.targetWorker == worker.contact_uri"
    }
  ]
}

The filter should look like this within the Twilio Console:

TaskRouter Image

Build

  • npm run build

Deploy Plugin

Go to your Twilio Assets and deploy the plugin-dialpad.js file from the /build directory.

Change log

10/12/2018 - v1.0 - Initial release

10/15/2018 - v1.1 - Added hold functionality

10/18/2018 - v1.2 - Added support for international dialing

10/22/2018 - v2.0 - Support for Flex 1.0

10/26/2018 - v2.1 - E.164 dialing format now supported

11/12/2018 - v2.2 - Significant changes on back-end, support for Flex 1.1

11/16/2018 - v2.3 - Checking number length before dialing, copy and paste, bug fix that was allowing multiple calls to be dialed at the same time

11/27/2018 - v2.4 - Added Call button for SMS, support for Flex 1.2

12/19/2018 - v2.5 - Moved all outbound calls to taskChannel custom1, only auto-accepting interactions that have the attribute autoAnswer set to true. Support for Flex 1.3. Restyled using MUI buttons

1/16/2019 - v2.6 - Support for Flex 1.4. Minor bug fixes in hold.

3/14/2019 - v3.0 - Support for Flex 1.6. Added internal dialing and 3-way conferencing. Multiple breaking changes. Minor bug fixes. If upgrading from a previous version, please re-deploy all functions from src/functions to your Twilio console as most functions received updates.

4/25/2019 - v3.1 - Support for Flex 1.8. Instead of grabbing the url from the state, manager.serviceConfiguration.runtime_domain is used. Task Timeout is now set to 30 seconds instead of the default 24 hours.

5/31/2019 - v3.2 - Added support for Flex 1.9. Validating all JWE tokens in Twilio Functions. Using new version of MUI. Miscellaneous bug fixes.

7/2/2019 - v4.0 - Complete rewrite of the dialpad. No new features were added in this release. The components of the dialpad were separated out into individual React components and a custom redux store is used to communicate between components. This version requires Flex 1.9 or newer.

8/19/2019 - v4.1 - Dialpad has been migrated to plugin builder v3 (https://www.twilio.com/docs/flex/plugin-builder#plugin-builder-v3). The functions have been migrated to Functions v2 (https://www.twilio.com/docs/runtime). As of this writing, plugin builder v3 cannot deploy to Severless API, the functions have been stripped out and migrated to a separate github repository (https://github.com/lehel-twilio/plugin-dialpad-functions). With this change, you will need to modify Dialpad.js with the location of your Functions v2 domain name. New features: ability to record outbound calls Bug fixes: fixed an error message about task cannot be placed in wrapup status, CSS changes to make it compatible with Salesforce

8/20/2019 - v4.2 - Dialpad is now inheriting styling from Flex themes. This means that Dialpad now works with dark themes as well.

10/30/2019 - v4.3 - Backend changes to fully support E.164 format. The assumption will be made that if no + is entered, and the digits length is 10, then it is a US number. Removed the DTMF mode, as Flex now supports this natively. The Functions v2 runtime domain is now dynamically set based on the value ui_attributes.dialpadDomain from https://flex-api.twilio.com/v1/Configuration. The Dialpad Functions project has been updated to automatically set this value after deployment. Fixed an issue with stale jweTokens, now we grab a fresh token before each Function call.

About

Dialpad plug-in for Twilio Flex

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published