With call recording controls now available via the REST API, users can start, pause, resume, and stop a call recording on the fly. Some contact center use cases may actually require agents to have the ability to control call recordings. This guide walks you through adding buttons to the UI for agents to start, pause, and end recording of their call leg in Flex.
While Flex does not provide this functionality out of the box, below we'll see how agent call recording controls can be implemented with just a Function and a Plugin.
Here are the steps to get you started:
- Project Prerequisites
- Create a Call Recording Controls Function
- Create your Flex Plugin
- Add your Plugin Code
- Test your Plugin
- Deploy your Plugin to Production
Notice: The code samples in this guide are presented as-is, and are intended as an example rather than for production use. This code does not record the full conference, only the agent's leg. Task attributes are not updated with recording information in Flex Insights.
Project Prerequisites
In order to get started building this project, you'll need the following:
- An active Flex project
- Opt-In to credentials variables in Functions
- Update the Twilio-node module in Functions to version 3.17.5 or later
- Install the Twilio create-flex-plugin package from NPM
Create a Call Recording Controls Function
First, let's create a Function that can receive requests from the Flex plugin, and then apply actions via the Node helper library. Here are the instructions:
- Access the Functions page in Console.
- Click the red Plus sign + icon to add a new Function.
- Select the "Blank" template, and then click Create.
- Add a FUNCTION NAME, PATH, and CODE, and then click Save.
- FUNCTION NAME: Name your Function
recordControls
(or something similarly identifiable). - PATH: The path must be named
recordControls
, as we're pointing another script here later. - CODE: Copy and paste the code below (GitHub link: recordControls.js)
exports.handler = function(context, event, callback) { let client = context.getTwilioClient(), setStatus = event.setStatus, callSid = event.callSid, recordingSid = event.recordingSid, responseBody = { recordingSid: null, status: null, error: null }; // set CORS to allow request const response = new Twilio.Response(); response.appendHeader("Access-Control-Allow-Origin", "*"); response.appendHeader("Access-Control-Allow-Methods", "OPTIONS POST"); response.appendHeader("Content-Type", "application/json"); response.appendHeader("Access-Control-Allow-Headers", "Content-Type"); switch (setStatus) { // create a call recording case "create": client .calls(callSid) .recordings.create() .then(recording => { responseBody.recordingSid = recording.sid; responseBody.status = recording.status; response.setBody(responseBody); callback(null, response); }) .catch(err => { // return error message to Flex responseBody.error = err; response.setBody(responseBody); callback(null, response); }); break; // update existing call recording case "in-progress": case "paused": case "stopped": client .calls(callSid) .recordings(recordingSid) .update({ status: setStatus }) .then(recording => { responseBody.recordingSid = recording.sid; responseBody.status = recording.status; response.setBody(responseBody); callback(null, response); }) .catch(err => { // return error message to Flex responseBody.error = err; response.setBody(responseBody); callback(null, response); }); break; default: throw "unexpected status"; } };
- FUNCTION NAME: Name your Function
Create your Flex Plugin
Next, let's create a new plugin called plugin-recordControls (or something similarly identifiable). You can create your plugin project from the terminal with the following command:
twilio flex:plugins:create plugin-recordControls --install
Enter your Twilio Flex project Account SID, indicate if you want to include the Admin UI page, and then install the plugin. For a more detailed walkthrough, please see Creating Plugins for Twilio Flex.
Add your Plugin Code
Once your plugin has been created and installed, you'll need to modify the the plugin code. First, you'll want to edit the file ../plugin-recordControls/src/recordControlsPlugin.js
. Copy and paste the code below to replace the full existing text of this file (GitHub link: recordControlsPlugin.js):
import { FlexPlugin } from 'flex-plugin';
import React from 'react';
import RecordControlsComponent from './RecordControlsComponent';
const PLUGIN_NAME = 'RecordControlsPlugin';
export default class RecordControlsPlugin extends FlexPlugin {
constructor() {
super(PLUGIN_NAME);
}
/**
* This code is run when your plugin is being started
* Use this to modify any UI components or attach to the actions framework
*
* @param flex { typeof import('@twilio/flex-ui') }
* @param manager { import('@twilio/flex-ui').Manager }
*/
init(flex, manager) {
// Add component to top of TaskInfoPanel only for voice calls
flex.TaskInfoPanel.Content.add(
<RecordControlsComponent key="demo-record-controls-component" />,
{
sortOrder: -1,
if: props => props.task.source.taskChannelUniqueName === "voice"
}
);
}
}
Next, you'll need another file - the one we refer to in line 3 above. This file contains the component information for Flex, as well as the logic for sending requests to your recordControls
Function.
Here's how to get this file:
- Download it here: RecordControlsComponent.js
- Copy/Paste, or download it from GitHub: RecordControlsComponent.js
Save this file to the same ../plugin-recordControls/src/
directory as your other plugin file.
Test your Plugin
Once your code is saved, launch Flex locally with the following command:
twilio flex:plugins:start
This will start a local instance of Flex, with your plugin file loaded up. Once your Flex session is active, try placing a test call. Be sure to set your Flex login to Idle, so you can receive the call.
Once you accept the Task in Flex, and answer the incoming call, click the Info tab.
The new Recording Controls Plugin will be displayed at the top. Click Start to begin recording.
When recording is active, the status will read in-progress, and the recording SID will be displayed. From here, recording can be paused, or stopped and ended.
Recordings are automatically stored on your Twilio project until you delete them. For more information on accessing your recordings, please see Listen to your Recordings or Voicemail.
Deploy your Plugin to Production
Once you're satisfied with the functionality of your recording controls plugin, In your terminal, within the plugin-recordControls
directory we created, run
twilio flex:plugins:deploy --major --changelog "Adding Record Controls in Flex" --description "First Plugin on Flex"
Inorder to enable your plugin, run
twilio flex:plugins:release --name "First Plugin Release" --description "Enabling Record Controls"--plugin plugin-recordControls@1.0.0
For more details, please see the Build and Deploy your Plugin Package section of Creating Plugins for Twilio Flex.
Legal Implications of Call Recording
If you choose to record calls, you need to comply with certain laws and regulations, including those regarding obtaining consent to record (such as California’s Invasion of Privacy Act and similar laws in other jurisdictions). Additional information on the legal implications of call recording can be found here.
Notice: Twilio recommends that you consult with your legal counsel to make sure that you are complying with all applicable laws in connection with communications you record or store using Twilio.
Related Topics
- Call Recording and Voicemail with Twilio Flex
- Getting Started with Call Recording Controls
- Downloading and Deleting Twilio Call Recordings