Skip to content
/ plugin-custom-directory Public

Adds a custom tab to the Worker Directory for supporting cold and warm transfer to custom targets

License

MIT license
8 stars 3 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

twilio-professional-services/plugin-custom-directory

BranchesTags

Repository files navigation

Flex Custom Directory Plugin

This plugin implements a Custom Transfers Directory tab in the Twilio Flex Native Dialpad. It includes code for Twilio Functions as well as frontend UI code in the form of a Flex plugin.

Status

This project is currently Feature-Complete. There is still some testing, polish, and documentation work to do, but all feature requirements have been satisfied. Please refer to the TODO list for details.

TODO

  • Fork existing Custom Directory Plugin sample code
  • Cleanup the sample code
  • Upgrade Flex to latest
  • Add Serverless structure
  • Implement & incorporate Function for pulling team members
    • Modify all workers
    • Build Function
    • Incorporate function into the Directory Component
  • Incorporate Transfer functionality from the Native Flex Dialpad Add-on Plugin
    • Refactor Transfer button structure (currently errors)
    • Pull in Warm Transfers note: Using Actions framework "TransferTask" rather than the addon strategy
    • Pull in Cold Transfers note: Using Actions framework "TransferTask" rather than the addon strategy
  • Enhancements/Bugfixes
    • Validate Twilio Signature
    • Sort workers alphabetically
    • Tab to front
    • "Directory" --> "Team"
    • Add Flex Signature check
    • Migrate team_lead_sid to team_id to leverage pre-existing Flex Insights standards and tie into reporting
  • Test
    • Unmodified workers
    • Invalid Signature
    • Function errors
    • Transfer failures
  • Flesh out the README
    • Demo
      • Media Branch
      • Recording
    • Setup/Configuration

Setup

Prerequisites

Before beginning with this Flex plugin, you'll want to make sure that:

  • You have a working Twilio Flex account
  • You have Node.js as well as npm installed
    • npm generally gets installed along with Node.js, but make sure you have it anyway
  • You have the latest Twilio CLI installed
  • Your Twilio CLI is running the latest Serverless Plugin

Workers

This plugin assumes a simple one-to-many Team structure – all workers must have a single Team Leader. That Team Leader's Worker SID must be populated in their team_leader_sid worker attribute. Here is an example of a worker's attributes containing this value:

{
  "contact_uri": "client:redshirt",
  "full_name": "Red Shirt",
  "image_url": "https:\\/\\/p199.p4.n0.cdn.getcloudapp.com\\/items\\/8Lu7y5on\\/Image%202020-06-09%20at%209.36.09%20AM.jpg",
  "email": "[email protected]",
  "roles": [
    "agent"
  ],
  "team_lead_sid": "WKf4cbd765a0ed1c0fee5b3bb655e1c851"
}

Configuration

Over the course of the configuration process, you'll need several values from your Twilio account. The first three can be found right now in the Twilio Console, but the last one will require you to deploy your Twilio Functions to find (Don't worry, we'll cover that!)

  • Account SID
  • Auth Token
    • Found on the Twilio Console Homepage
    • Secure string of 32 characters that we'll call "blah..." for the sake of communication
  • Workspace ID
  • Serverless Runtime Domain
    • We'll grab this after we've deployed our Twilio Functions
    • A web domain that looks something like "foobar-xxx-dev.twilio.io"

We'll be entering these values into three files, some of which don't exist yet:

  • public/appConfig.js
  • serverless/.env
  • src/config.js

public/appConfig.js

To kick things off, rename the example app configuration file to remove .example, then open it in your editor of choice

mv public/appConfig.example.js public/appConfig.js

vim public/appConfig.js

You'll notice that this file has a temporary string variable for your Account Sid. Replace that string with your actual value.

# Before:
var accountSid = 'accountSid';

# After
var accountSid = 'AC...';

serverless/.env

Next, we'll need to configure the environment variables for the Twilio Functions. Start by renaming the environment file to remove .example and opening it with your editor:

mv serverless/.env.example serverless/.env

vim serverless/.env

Now, just like before, replace the temporary strings with your actual values

# Before
ACCOUNT_SID=accountSid
AUTH_TOKEN=authToken
TWILIO_WORKSPACE_SID=workspaceSid

# After
ACCOUNT_SID=AC...
AUTH_TOKEN=blah...
TWILIO_WORKSPACE_SID=WS...

Deploying Functions

Before we can configure the last file, we'll need to deploy our Twilio Functions and grab the Runtime Domain. To do so, we'll be using the Twilio CLI and the Serverless Plugin that you installed as a prerequisiste.

First off, make sure that you have authenticated according to the Twilio CLI documentation.

Then cd into the Functions directory and deploy them:

cd src/Functions
twilio serverless:deploy

Once everything gets deployed, your response should look something like this:

Deployment Details
Domain: foobar-xxx-dev.twilio.io
Service:
   custom-transfer-directory (ZS...)
Environment:
   dev (ZE...)
Build SID:
   ZB...
View Live Logs:
   Open the Twilio Console
Functions:
   [protected] https://foobar-xxx-dev.twilio.io/getTeamMembers
Assets:

The value we're looking for comes after Domain: – that's your Runtime Domain.

config.js

Now open src/config.js in your text editor. Notice the runtime domain set to a default value? Let's change that:

# Before:
export default {
    runtimeDomain: "http://localhost:3000"
}

# After:
export default {
    runtimeDomain: "https://foobar-xxx-dev.twilio.io"
}

And now your plugin is fully configured! You can now run it locally to test and customize it, or build it into a package and upload it to your Twilio Assets for hosted use.

Local Development/Deployment

In order to develop locally, you can use the Webpack Dev Server by running:

npm install
npm start

This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:3000. If you want to change that you can do this by setting the PORT environment variable:

PORT=3001 npm start

When you make changes to your code, the browser window will be automatically refreshed.

Deploy

Once you are happy with your plugin, you have to bundle it in order to deploy it to Twilio Flex.

Run the following command to start the bundling:

npm run build

Afterwards, you'll find in your project a build/ folder that contains a file with the name of your plugin project. For example, plugin-example.js. Take this file and upload it into the Assets part of your Twilio Runtime.

Note: Common packages like React, ReactDOM, Redux and ReactRedux are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex to provide them globally.

Disclaimer

As Open Source Software from Twilio Professional Services, this project is not supported by Twilio Support. This software is to be considered "sample code", a Type B Deliverable, and is delivered "as-is" to the user. Twilio bears no responsibility to support the use or implementation of this software. In using this project, you are assuming ownership over the code and its implementation.

For bug reports and feature requests, please submit a Github Issue.

About

Adds a custom tab to the Worker Directory for supporting cold and warm transfer to custom targets

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

8 stars

Watchers

2 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages