How to Control Recordings with Twilio Flex – Twilio Support

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 WFO.

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";
  }
};

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:

create-flex-plugin plugin-recordControls

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:

npm 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, you can compile it to be rolled out to production with the following command:

npm run build

Once your plugin package is built, you can upload it to Assets for use in your hosted Flex instance. 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.

Twilio