Supervisor

Introduction

The b+s Supervisor displays team member information in the teams that they are configured to supervise. It also shows queue statistics of all skill groups, which are assigned to the supervised Agents.

This is a Lightning App Page and provides the supervisor with capabilities such as:

Supervisor features

Team View

• Viewing details of team members (CCE only)
• Changing the agent state of team members
• Starting silent monitoring (This will start a silent monitoring call. The supervisor can then barge-in and drop participants inside the Connects Gadget)

Queue View

• Viewing details of queues

Team Message View

• Sending team messages
• Viewing active team messages
• Deleting active team messages

Check the CCE Agent Team List notes for more information on how to configure Teams.

info

Supervisors require access to certain resources of the b+s Connects package. These permissions are defined in the b+s Connects Supervisor Permission Set.

Installation

b+s Supervisor needs to be implemented as a LWC as described in the Installation Guide using the code example below.

Configuration

The following settings can be configured for the b+s Supervisor component from the b+s Configuration App. In order to do so, please go to Integrations | Integration Settings | + Add

Identifier

Identifier of Supervisor component

Value: TeamSupervisor

Settings

hideQueueView: If this option is set, the Queue View will not be displayed in the b+s Supervisor component.
We recommend setting this field for CCX deployments, because CCX doesn’t support queues.

Values: <Boolean>

Default: false

Example: true

Example:

Identifier: TeamSupervisor
Settings: hideQueueView=true

Code Example

teamSupervisor/teamSupervisor.js

import CNX_RESOURCE_LINK from '@salesforce/resourceUrl/cnx__CnxSfdcResources';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import retrieveTeamSupervisorLabelsForLWC from '@salesforce/apex/cnx.TeamSupervisorController.retrieveTeamSupervisorLabelsForLWC';
import { subscribe, publish, APPLICATION_SCOPE, createMessageContext } from 'lightning/messageService';
import msgChannel from '@salesforce/messageChannel/[REPLACE WITH LIGHTNING MESSAGE CHANNEL]';
import { LightningElement } from 'lwc';

export default class teamSupervisorComponent extends LightningElement {

    moduleName = 'TeamSupervisorModule';

    labels;
    connectedCallback () {
        Promise.all([
            console.log('####################### Load BsModules.js'),
            loadStyle(this, CNX_RESOURCE_LINK + '/addons/TeamSupervisor/css/TeamSupervisor.min.css'),
            loadScript(this, CNX_RESOURCE_LINK + '/addons/TeamSupervisor/lib/jquery.min.js'),
            loadScript(this, CNX_RESOURCE_LINK + '/addons/TeamSupervisor/lib/svg4everybody.js'),
            loadScript(this, CNX_RESOURCE_LINK + '/addons/BsModules/js/BsModules.min.js'),
            retrieveTeamSupervisorLabelsForLWC().then(result => { this.labels = result; })
        ])
        .then(() => {
            window.utilitySpritePath = `${CNX_RESOURCE_LINK}/addons/TeamSupervisor/img/`;

            const messageContext = createMessageContext();
            const noConflictInstance = ConnectsIntegrationAPI.noConflict();
            noConflictInstance.setLMSEnvironment({
                mode: 'LWC',
                publishMethod: message => {
                    publish(messageContext, msgChannel, message);
                },
                subscribeMethod: handler => {
                    subscribe(messageContext, msgChannel, handler, { scope: APPLICATION_SCOPE });
                }
            });
            noConflictInstance.waitReady(() => {
                const moduleInstance = BsModules.load(this.moduleName, this.refs.teamSupervisorComponent, noConflictInstance);
                moduleInstance.setLabels(this.labels);
                moduleInstance.initializeModule();
            });
        })
        .catch(error => {
            console.error(this.moduleName + ': an error occurred.', error);
        });
    }
}

teamSupervisor/teamSupervisor.html

<template>
    <div lwc:ref="teamSupervisorComponent" lwc:dom="manual" class="bsSpvr"></div>
</template>

teamSupervisor/teamSupervisor.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <description>TeamSupervisorComponent</description>
    <isExposed>true</isExposed>
    <masterLabel>TeamSupervisorComponent</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__FlowScreen</target>
        <target>lightning__Tab</target>
        <target>lightning__UtilityBar</target>
    </targets>
</LightningComponentBundle>

Troubleshooting

Supervisor cannot control agent states

Symptom

Supervisor cannot control agent states.

Possible Cause(s)

Missing Supervisor permission set or Integration API disabled.

Solution

Assign permission set and enable Integration API.