Get Started with Supervisor Coaching using Node.js

    Overview

    Supervisors in call centers need to coach agents to assure quality and cultivate an effective team. Coaching involves supervisors listening in on live calls and advising agents without customers’ knowledge. A supervisor can also take over a call and talk to a customer directly, if needed. In this tutorial, we’ll guide you through how to implement supervisor coaching using Plivo’s Multiparty Call (MPC) feature.

    Outline

    In visual terms, here’s how supervisor coaching works. Suppose your customers are calling the support hotline to inquire about a new product or service your business offers. Your application connects a customer and an agent. At the same time, Plivo can connect a supervisor to the call in coaching mode, in which anything the supervisor says is inaudible to the customer.

    Set Up Your Node.js Dev Environment

    In this section, we’ll walk you through how to set up a Express server in under five minutes and start handling incoming calls & callbacks.

    Install Node.js

    Operating SystemInstructions
    OS X & LinuxTo see if you already have Node.js installed, run the command node --version in the terminal. If you don't have it installed, you can install it from here .
    WindowsTo install Node.js on Windows you can download it from here and install.

    Install Plivo Node.js Package

    • Create a project directory, run the following command:

      $ mkdir mynodeapp
      
    • Change the directory to our project directory in the command line:

      $ cd mynodeapp
      
    • Install the SDK using npm

      $ npm install plivo
      

    Connect Customer and Agent

    Multiparty calls work just as well for incoming calls. Consider the case of a call center where customers call a hotline number to connect with a customer support representative using a web app powered by Plivo Browser SDK. The call flow goes like this:

    1. Customer dials in from the browser app to talk to an agent.
    2. The customer is added to a multiparty call.
    3. The agent is added to the same multiparty call.

    Outline - Connect customer and agent

    Here’s how that process looks like in Node.js.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    
    var plivo = require('../plivo-node/');
    var express = require('express');
    var bodyParser = require('body-parser');
    var app = express();
    app.set('port', (process.env.PORT || 5000));
    app.use(express.static(__dirname + '/public'));
    app.use(bodyParser.json()); // support json encoded bodies
    app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
    
    var musicUrl = "https://s3.amazonaws.com/plivocloud/music.mp3"
    var client = new plivo.Client("<auth_id>","<auth_token>");
    
    // Add customer to the MPC
    app.all('/add/customer/', function (request, response) {
        var r = new plivo.Response();
        var mpcName = 'test';
        var params = {
            "role": "Customer",
            "statusCallbackUrl": "https://3fe9ee90839a.ngrok.io/add/agent/",
            "statusCallbackMethod": "POST",
            "waitMusicUrl": musicUrl,
            "waitMusicMethod": "GET",
        };
        r.addMultiPartyCall(mpcName, params);
        console.log(r.toXML());
        response.set({ 'Content-Type': 'text/xml' });
        response.end(r.toXML());
    });
    
    //Add agent to the MPC to talk to the customer
    app.all('/add/agent/', function (request, response) {
        var mpcEventName = request.query.EventName || request.body.EventName; 
        var mpcMPCUUID = request.query.MPCUUID || request.body.MPCUUID;
        var mpcParticipantCallFrom = request.query.ParticipantCallFrom || request.body.ParticipantCallFrom;
        console.log(mpcEventName);
        if (mpcEventName == 'MPCInitialized') {
            client.multiPartyCalls.addParticipant('Agent', { 'uuid': mpcMPCUUID, 'from': mpcParticipantCallFrom, 'to': 'sip:Testendpoint181116105835@phone.plivo.com', 'status_callback_url': 'https://3fe9ee90839a.ngrok.io/agent/callback/' })
            console.log(response);
        }
    });
    
    // Collect status callback events after agent joins the MPC
    app.all('/agent/callback/', function (request, response) {
        var mpcMPCUUID = request.query.MPCUUID;
        console.log(mpcMPCUUID)
    });
    
    app.listen(app.get('port'), function () {
        console.log('Node app is running on port', app.get('port'));
    });
    

    Agent Adds Supervisor to the Call

    The previous example was a simple case that involved just a customer and an agent. If the call center wants to provide supervisor coaching, agents can add a supervisor to an ongoing multiparty call like this:

    1. The agent clicks an Add Supervisor button on the dialer web app on which they’re talking to the customer.
    2. The supervisor is added to the multiparty call using Plivo’s Add Participant API.
    3. By default, only the agent will be able to hear the supervisor. You can override this by changing the coachMode parameter to false.

    Outline - Agent adds supervisor

    Here’s how that process looks like in Node.js.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    
    var plivo = require('../plivo-node/');
    var express = require('express');
    var bodyParser = require('body-parser');
    var app = express();
    app.set('port', (process.env.PORT || 5000));
    app.use(express.static(__dirname + '/public'));
    app.use(bodyParser.json()); // support json encoded bodies
    app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
    
    var musicUrl = "https://s3.amazonaws.com/plivocloud/music.mp3"
    var client = new plivo.Client("<auth_id>","<auth_token>");
    
    // Add customer to the MPC
    app.all('/add/customer/', function (request, response) {
        ...
        ...
    });
    
    //Add agent to the MPC to talk to the customer
    app.all('/add/agent/', function (request, response) {
        ...
        ...
    });
    
    // Collect status callback events after agent joins the MPC
    app.all('/agent/callback/', function (request, response) {
        ...
        ...
    });
    
    // Agent clicks "Add supervisor to the call" option to add him to the ongoing MPC
    app.all('/add_supervisor/:mpcMPCUUID', function (request, response) {
        var mpcUUID = request.params("mpcMPCUUID");
        client.multiPartyCalls.addParticipant('Supervisor', { 'uuid': mpcUUID, 'from': mpcParticipantCallFrom, 'to': 'sip:Testendpoint181116105835@phone.plivo.com', 'status_callback_url': 'https://3fe9ee90839a.ngrok.io/supervisor/callback/' })
        console.log(response);
    });
    
    app.listen(app.get('port'), function () {
        console.log('Node app is running on port', app.get('port'));
    });
    

    Supervisor Joins an Ongoing Call

    Not all supervisor calls are initiated by agents — supervisors can jump in themselves. Here’s how this process — often called call barging — works:

    1. An agent is talking to a customer on an ongoing multiparty call.
    2. A supervisor, who is monitoring all the live calls on the call center web dashboard, clicks on a “Join the Call” button next to the longest call in the queue.
    3. The supervisor can then listen to the call and coach the agent.

    Outline - Supervisor joins a call

    Here’s how that process looks like in Node.js.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    
    var plivo = require('../plivo-node/');
    var express = require('express');
    var bodyParser = require('body-parser');
    var app = express();
    app.set('port', (process.env.PORT || 5000));
    app.use(express.static(__dirname + '/public'));
    app.use(bodyParser.json()); // support json encoded bodies
    app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
    
    var musicUrl = "https://s3.amazonaws.com/plivocloud/music.mp3"
    var client = new plivo.Client("<auth_id>","<auth_token>");
    
    // Add customer to the MPC
    app.all('/add/customer/', function (request, response) {
        ...
        ...
    });
    
    //Add agent to the MPC to talk to the customer
    app.all('/add/agent/', function (request, response) {
        ...
        ...
    });
    
    // Collect status callback events after agent joins the MPC
    app.all('/agent/callback/', function (request, response) {
        ...
        ...
    });
    
    // Agent clicks "Add supervisor to the call" option to add him to the ongoing MPC
    app.all('/add_supervisor/:mpcMPCUUID', function (request, response) {
        ...
        ...
    });
    
    // Supervisor clicks "Join the call" option to add him to the ongoing MPC
    app.all('/coach_the_agent/', function (request, response) {
        var r = new plivo.Response();
        var mpcName = 'test'; // MPC name of the call to which the supervisor wishes to join, you can get this from status_callback_url
        var params = {
            "role": "Supervisor",
            "coach_mode": True, // The Supervisor can talk to only the agent. 
            "status_callback_url": "https://3fe9ee90839a.ngrok.io/supervisor/callback/",
            "status_callback_method": "POST",
            "enter_sound": "none",
        };
        r.addMultiPartyCall(mpcName, params);
        console.log(r.toXML());
        response.set({ 'Content-Type': 'text/xml' });
        response.end(r.toXML());
    });
    
    app.listen(app.get('port'), function () {
        console.log('Node app is running on port', app.get('port'));
    });
    

    Supervisor Takes Over a Call

    Depending on what they hear, sometimes supervisors want to talk to both the customer and the agent. Here’s how that process might go.

    1. An agent is talking to a customer on an ongoing multiparty call.
    2. The supervisor is monitoring all live calls on the call center web dashboard.
    3. The supervisor clicks on the Take Over the Call button of a specific call, and can then take over the call and talk to both the customer and the agent.

    Outline - Supervisor takes over a call

    Here’s how that process looks like in Node.js.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    
    var plivo = require('../plivo-node/');
    var express = require('express');
    var bodyParser = require('body-parser');
    var app = express();
    app.set('port', (process.env.PORT || 5000));
    app.use(express.static(__dirname + '/public'));
    app.use(bodyParser.json()); // support json encoded bodies
    app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
    
    var musicUrl = "https://s3.amazonaws.com/plivocloud/music.mp3"
    var client = new plivo.Client("<auth_id>","<auth_token>");
    
    // Add customer to the MPC
    app.all('/add/customer/', function (request, response) {
        ...
        ...
    });
    
    //Add agent to the MPC to talk to the customer
    app.all('/add/agent/', function (request, response) {
        ...
        ...
    });
    
    // Collect status callback events after agent joins the MPC
    app.all('/agent/callback/', function (request, response) {
        ...
        ...
    });
    
    // Agent clicks "Add supervisor to the call" option to add him to the ongoing MPC
    app.all('/add_supervisor/:mpcMPCUUID', function (request, response) {
        ...
        ...
    });
    
    // Supervisor clicks "Join the call" option to add him to the ongoing MPC
    app.all('/coach_the_agent/', function (request, response) {
        ...
        ...
    });
    
    // Supervisor clicks "Join the call" option to add him to the ongoing MPC
    app.all('/talk_to_customer/', function (request, response) {
        var r = new plivo.Response();
        var mpcName = 'test'; // MPC name of the call to which the supervisor wishes to join, you can get this from status_callback_url
        var params = {
            "role": "Supervisor",
            "coach_mode": False, // The Supervisor can talk to only the agent. 
            "status_callback_url": "https://3fe9ee90839a.ngrok.io/supervisor/callback/",
            "status_callback_method": "POST",
            "enter_sound": "none",
        };
        r.addMultiPartyCall(mpcName, params);
        console.log(r.toXML());
        response.set({ 'Content-Type': 'text/xml' });
        response.end(r.toXML());
    });
    
    app.listen(app.get('port'), function () {
        console.log('Node app is running on port', app.get('port'));
    });
    

    As you can see, Plivo makes it easy to set up and manage multiparty calls. With these capabilities, you can run your own call center, manage call transfers, coach agents, and much more. Refer to the Multiparty Call API reference.