# Pause and Resume Call Recording (Flex UI 1.x.x)

> \[!NOTE]
>
> This guide is only for Flex UI 1.x.x, which [reached End of Life on June 30, 2024](/docs/flex/flex-ui-eol-reference). To build on a current version, we recommend you [upgrade to Flex UI 2.x.x](/docs/flex/developer/ui/migration-guide) and install the ready-to-use [Call Recording Pause and Resume](https://flex.twilio.com/admin/plugins/library/JG3d41bc8de93e31d5acc36981e13e87d3) plugin. You must be logged in to Twilio Console to access the Flex Plugin Library.

## Overview

> \[!WARNING]
>
> This solution features sample code that is provided "as is" and is not production grade. The featured code does not account for edge case handling, scalability, and reliability. It is not covered under Twilio's [Service Level Agreement (SLA)](https://www.twilio.com/en-us/legal/service-level-agreement) and [support plans](https://www.twilio.com/en-us/support-plans).

Most contact centers record all voice calls for various reasons including agent training, quality assessments, historical reporting, and analytics. Many contact centers need their agents to take customer payments over the phone, however for security reasons the recording cannot contain the spoken payment details. This solution allows an agent to temporarily pause the call recording while the customer is providing sensitive information such as credit card/social security number (SSN) over the phone, essentially muting that part of the call recording.

## How it works

The Pause and Resume Call Recording solution includes a Flex plugin that leverages Twilio Functions to perform **start**, **pause**, and **resume** recording. Agents are now provided with a button on every call with the customer.

When an agent receives a new inbound call or initiates a new outbound call from the Dialpad, the plugin invokes the "Create Call Recording" function which leverages the [Twilio Call Recording API resource](/docs/voice/api/recording). The task attribute `conversations.media` is [updated with the recording metadata](/docs/flex/developer/insights/custom-media-attached-conversations) to allow Flex Insights to [play back the call recording](/docs/flex/end-user-guide/insights/player). These Recordings are dual-channel, capturing the customer and the agent audio in their own audio channels.

![Call interface showing in-progress recording with hang up button highlighted.](https://docs-resources.prod.twilio.com/e1344d82f6e1d2d65f42e949bc95f62c2d4a9b24d1f0f9c0aae474125f87d539.png)

![in-progress-recording.](https://docs-resources.prod.twilio.com/6eaec85397a8c61a28144f0265050788174145acbbd6f2df4b9c70c8266ef708.png)

Note the status of a call recording can be **processing** (initial status), **paused**, and **in-progress** (after resuming the recording). The "Pause Recording" function leverages the special `Twilio.CURRENT` value to reference the currently active recording without requiring an explicit Recording SID.

`Twilio.CURRENT` can be used for *pause*, *resume*, or *stop* actions on calls with only one active recording. See the [Call Recording API documentation](/docs/voice/api/recording#code-pause-a-call-recording-with-twiliocurrent) for more information.

![Twilio Flex interface showing a live call with recording in progress.](https://docs-resources.prod.twilio.com/0914d432b0a480f84915718eba0e1c99c911613e5a83a2696fbb0a266f31eb9a.gif)

*These pop-up messages are implemented using the Flex Notifications framework.*

Call Recordings for completed calls are available in the [Twilio Console Voice Recordings](https://console.twilio.com/us1/monitor/logs/call-recordings?frameUrl=%2Fconsole%2Fvoice%2Frecordings%2Frecording-logs%3Fx-target-region%3Dus1) (with attributes **Channels** being `2` and **Source** being `StartCallRecordingAPI`). For the duration of the "pause", the call recording file will be silent.

## Architecture

![Call flow diagram showing pause and resume recording steps with icons for user, phone, and agent.](https://docs-resources.prod.twilio.com/7b71c822b4944b562d34bb127bb7cdde5838e51c8b0fb64a8a3e3d4964657336.png)

## Prerequisites

To deploy this solution, you will need:

* An active Twilio account with Flex provisioned. Refer to the [Flex Quickstart](/docs/flex/admin-guide/setup/account-creation) to create one.
* npm version 6.0.0 installed (type `npm -v` in your terminal to check)
* A Node.js [long-term-support (LTS) version](https://nodejs.org/en/about/releases/) installed, 14 recommended (type `node -v` in your terminal to check)
* [Twilio CLI](/docs/twilio-cli/quickstart#install-the-twilio-cli) along with the [Flex Plugins CLI](/docs/twilio-cli/plugins#available-plugins) and the [Serverless Toolkit](/docs/twilio-cli/plugins#available-plugins). Run the following commands to install them:

  ```bash
  # Install the Twilio CLI
  npm install twilio-cli@2.0 -g
  # Install the Serverless and Flex as Plugins
  twilio plugins:install @twilio-labs/plugin-serverless
  twilio plugins:install @twilio-labs/plugin-flex
  ```
* [Native Dialpad configured on your Flex instance](/docs/flex/admin-guide/setup/voice/dialpad-configure)

> \[!NOTE]
>
> If you're running Linux, click on the Linux tab for the [Twilio CLI installation instructions](/docs/twilio-cli/quickstart#install-the-twilio-cli). If you're running Windows, make sure to run the Windows command prompt as an administrator to install the Serverles/Flex plugins for the Twilio CLI. The Windows commands in this guide use PowerShell (for Node.js/npm installation).

## Deployment Time

30 minutes

## Tested Flex Versions and Operating Systems

* Flex v1.19.0-1.28.0
* macOS / Unix
* Windows 10

## Configure your Flex Workspace

In order to use the solution, you need to prepare your **Flex Task Assignment** workspace.

### Retrieve your Flex settings

#### Step 1

Navigate to your Flex project in the [Twilio Console](https://www.twilio.com/console). Copy your **ACCOUNT SID** and **AUTH TOKEN**, and create a new Twilio CLI profile using those credentials:

```bash
twilio profiles:create
```

You will be prompted to enter your Twilio Account SID, Auth Token, and a shorthand identifier for your profile. When choosing a shorthand identifier, pick one that is meaningful and that you can remember. Once your profile has been created, activate it by running:

```bash
twilio profiles:use PROFILE_ID
```

Keep in mind that this account will be used for the rest of the deployment. In order to switch accounts, use the following command:

```bash
twilio profiles:use DIFFERENT_PROFILE_ID
```

### Step 2

Disable the "Call Recording" option in [Flex Voice Settings](https://console.twilio.com/us1/develop/flex/channels/voice) on the Twilio Console by sliding it to **OFF**. When enabled, Flex records the voice conference on a single-channel or mono recording which we won't need for this custom implementation.

### Step 3

Make sure that you are not enabling Call Recording in any IVR Studio Flows. Verify that your inbound IVR Studio Flows (used to route calls to Flex) ***do not*** contain the Call Recording widget.

## Download the Flex Pause Recording Plugin

Download the plugin source code [here](https://github.com/twilio-professional-services/pause-recording) and unzip the files in a local directory.

You can view the source code on GitHub: [https://github.com/twilio-professional-services/pause-recording](https://github.com/twilio-professional-services/pause-recording.git)

## Deploy your Twilio Function

**Step 1:** Run `npm install` in the functions folder.

```bash
cd serverless
npm install
```

Deploy the Twilio functions to your account using the Twilio CLI:

```bash
twilio serverless:deploy
```

> \[!NOTE]
>
> When running on Windows, you may see an error with the Twilio Serverless deployment command. To work around the issue, set your `TWILIO_ACCOUNT_SID` and `TWILIO_AUTH_TOKEN` as environment variables. Refer to the previous section for examples of how to set an environment variable in Windows.

### Example Function Deployment Output

```bash
✔ Serverless project successfully deployed

Deployment Details
Domain: https://pause-recording-XXXX.twil.io
Service:
   barge-coach (ZSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX) ...
```

Your functions will now be present in the Twilio Functions Console and be part of the "pause-recording" service.

Copy and save the domain returned when you deploy a function. You will need it in the next step. If you forget to copy the domain, you can also refer to it by navigating to [Functions > API](https://www.twilio.com/console/functions/api).

**Debugging Tip:** Pass the `-l` or logging flag to review deployment logs. For example, you can pass `-l debug` to turn on debugging logs.

## Deploy your Flex Plugin

Once you have deployed the function, it is time to deploy the plugin to your Flex instance.

Run the following commands in the plugin source directory. We will leverage the Twilio CLI to build and deploy the Plugin.

## macOS/Linux

```bash
cd ../pause-recording-plugin && mv public/appConfig.example.js public/appConfig.js
```

## Windows

```powershell
cd ..\pause-recording-plugin\

mv .\public\appConfig.example.js .\public\appConfig.js
```

Run `npm install`.

Create the plugin config file by copying `.env.example` to `.env`.

## macOS/Linux

```bash
cp .env.example .env
```

## Windows

```powershell
cp .\.env.example .env
```

Update the variable with the appropriate value. Edit `.env` and set the `REACT_APP_SERVICE_BASE_URL` variable to your Twilio Functions base URL (this will be available after you deploy your functions).

```bash
REACT_APP_SERVICE_BASE_URL=https://pause-recording-xxxx-dev.twil.io
```

When you are ready to deploy the plugin, run the following in a command shell:

```bash
twilio flex:plugins:deploy --major --changelog "Releasing Pause & Resume recording plugin" --description "Flex pause and resume recording"

```

### Example Plugin Deployment Output

```bash
√ Validating deployment of plugin pause-recording-plugin
| Compiling a production build of pause-recording-pluginPlugin pause-recording-plugin was successfully compiled with some warnings.
√ Compiling a production build of pause-recording-plugin
√ Uploading pause-recording-plugin
√ Registering plugin pause-recording-plugin with Plugins API
√ Registering version v1.0.0 with Plugins API

🚀 Plugin (private) pause-recording-plugin@1.0.0 was successfully deployed using Plugins API

Next Steps:
Run $ twilio flex:plugins:release --plugin pause-recording-plugin@1.0.0 --name "Autogenerated Release 1624517195294" --description "The description of this Flex Plugin Configuration." to enable this plugin on your Flex application


```

The previous step only deploys your plugin. You still need to enable the Plugin on your Flex application. To enable, run the following:

```bash
twilio flex:plugins:release --plugin pause-recording-plugin@1.0.0 --name "Autogenerated Release 1624570680076" --description "Enabling Pause and Resume Call Recording for contact center."
```

### View plugin on your Plugins Dashboard

After running the suggested next step, navigate to the [Plugins Dashboard](https://flex.twilio.com/admin/) to review your recently deployed plugin and confirm that it's enabled for your contact center.

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

You are all set to test Pause and Resume Recording on your Flex application!

> \[!WARNING]
>
> Keep in mind that your Agents need to refresh their browsers in order to get the latest changes.

## Testing the solution

Step 1: Place an outbound call from Flex to your mobile number or the phone number of another person that can act as the agent. Notice that the Recording toggle button is green and the status is **processing**.

Step 2: Click the Recording toggle button to pause the recording. Notice that the Recording toggle button is red and the status is **paused**.

Step 3: Click the Recording toggle button again to resume recording. Notice that the Recording toggle button is green and the status is **in-progress**.

Step 4: Complete the call by hanging up.

Step 5: Find the recording for your completed call in the Twilio Console [Voice Recordings](https://console.twilio.com/us1/monitor/logs/call-recordings?frameUrl=%2Fconsole%2Fvoice%2Frecordings%2Frecording-logs%3Fx-target-region%3Dus1). Verify that the call recording is silent during the pause. Furthermore, for each call, there should only be one recording present. If there is a second recording, more than likely the default Flex Call Recording option is still enabled in the Console and should be disabled (see [Configure your Flex Workspace](/docs/flex/solutions-library/pause-resume-recording#configure-your-flex-workspace)).