Agent Answers Viewer

Introduction

b+s Connects for Salesforce Agent Answers Viewer is the name of the software solution developed by b+s to display agent answers received from the Cisco WCCAI service during calls between Agent and Customer.

The b+s Connects for Salesforce Agent Answers Viewer consumes the Integration API's onAgentAnswersReceived event introduced in b+s Connects for Salesforce v5.8.

The Agent Answers Viewer component cannot be used as a Custom Toolbar.

Installation

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

Configuration

Configure the WCCAI Tenant in the b+s Configuration - Voice - Additional Voice Settings.

Code Example

agentAnswers/agentAnswers.js

import CNX_RESOURCE_LINK from '@salesforce/resourceUrl/cnx__CnxSfdcResources';
import { loadScript } from 'lightning/platformResourceLoader';
import { subscribe, publish, APPLICATION_SCOPE, MessageContext, createMessageContext } from 'lightning/messageService';
import msgChannel from '@salesforce/messageChannel/[REPLACE WITH LIGHTNING MESSAGE CHANNEL]';
import { LightningElement } from 'lwc';
export default class AgentAnswers extends LightningElement {

    moduleInstance;
    moduleName = 'AgentAnswersViewer';

    connectedCallback () {
        Promise.all([
            loadScript(this, CNX_RESOURCE_LINK + '/gadget/lib/jquery/dist/jquery.min.js'),
            loadScript(this, CNX_RESOURCE_LINK + '/addons/BsModules/js/BsModules.min.js')
        ])
        .then(() => {
            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 moduleRefs = {
                    body: this.refs.agentAnswers,
                    footer: this.refs.agentAnswersFooter
                };
                this.moduleInstance = BsModules.load(this.moduleName, moduleRefs, noConflictInstance);
            });
        })
        .catch(error => {
            console.error(this.moduleName + ': an error occurred.', error);
        });
    }
}

agentAnswers/agentAnswers.html

<template>
    <lightning-card title="b+s Cisco Agent Answers" class="bsAgtAnswers">
        <p class="slds-p-horizontal_small" lwc:ref="agentAnswers" lwc:dom="manual"></p>
        <p slot="footer" lwc:ref="agentAnswersFooter" lwc:dom="manual"></p>
    </lightning-card>
</template>

agentAnswers/agentAnswers.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <description>b+s Agent Answers Viewer</description>
    <isExposed>true</isExposed>
    <masterLabel>b+s Agent Answers Viewer</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>

agentAnswers/agentAnswers.css

.bsAgtAnswers .bsCardBaseHeight {
    height: 320px;
    min-height: 320px;
}

.bsAgtAnswers .fadeInFadeOut {
    background-color: none;
    animation-name: changeBackground;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    border-radius: 0.5rem;
}

.bsAgtAnswers .bs-answers-block-separator {
    margin: 32px 0 16px 0 !important;
}

@keyframes changeBackground {
    0% { background-color: rgba(125, 168, 255, 1); }
    100% { background-color: rgba(125, 168, 255, 0); }
}

Troubleshooting

No answers/transcripts displayed

Symptom

No answers/transcripts displayed.

Possible Cause(s)

Integration API disabled, or Utility Bar item not set to start automatically.

Solution

Enable Integration API and re-check Utility Bar settings.