Transcription Viewer

Introduction

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

The b+s Connects for Salesforce Transcription Viewer consumes the Integration API onTranscriptUtteranceReceived event introduced in b+s Connects for Salesforce v5.5.

Installation

b+s Transcription 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

transcriptionViewer/transcriptionViewer.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 = 'TranscriptionViewer';

    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.transcriptionViewerBody,
                    footer: this.refs.transcriptionViewerFooter
                };
                this.moduleInstance = BsModules.load(this.moduleName, moduleRefs, noConflictInstance);
            });
        })
        .catch(error => {
            console.error(this.moduleName + ': an error occurred.', error);
        });
    }
}

transcriptionViewer/transcriptionViewer.html

<template>
    <lightning-card title="b+s Transcription Viewer" icon-name="custom:custom14" class="bsTranscriptionViewer">
        <section role="log" class="slds-chat" style="background: #fff">
            <div class="slds-scrollable_y bsCardBaseHeight slds-p-horizontal_small" lwc:ref="transcriptionViewerBody" lwc:dom="manual">
            </div>
        </section>
        <p slot="footer" lwc:ref="transcriptionViewerFooter" lwc:dom="manual"></p>
    </lightning-card>
</template>

transcriptionViewer/transcriptionViewer.css

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

transcriptionViewer/transcriptionViewer.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 Transcript Viewer</description>
    <isExposed>true</isExposed>
    <masterLabel>b+s Transcript 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>