Version: 6.0

Conversation Ended

note

This component's former name is Chat-End Listener Component

Introduction

This component subscribes to the lightning__conversationEnded lightning message channel in Salesforce and is triggered when an active chat ends or an agent leaves a chat conference (ref: lightning__conversationEnded).

When an event is received, the component sets the Cisco Chat channel in Wrap-Up state. The Salesforce Conversation Ended Component is only available for Cisco Universal Queue deployment. It supports Salesforce's Messaging for In-App and Web, After Conversation Work Time features, BYOC for Messaging and related Salesforce messaging products.

Due to Salesforce security restrictions, this feature can no longer be shipped as a packaged Aura component. Instead, b+s now provides the Conversation Ended Component as open source Lightning Web Component (LWC) code. Customers must deploy the provided LWC manually and must also create a Lightning Message Channel (LMC) in their own Salesforce org.

Once the LMC is registered in b+s Connects Configuration, the LWC and b+s Softphone communicate through the standard Salesforce Lightning Message Service.

The Conversation Ended component cannot be used as a Custom Toolbar.

Installation

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

Code Example

The following files are to be deployed in force-app/main/default/lwc/conversationEnded/

Filename

conversationEnded.js

Code

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/cnxMessageChannel__c';
import { wire, LightningElement } from 'lwc';

import ConversationEndedChannel from '@salesforce/messageChannel/lightning__conversationEnded';

export default class ConversationEnded extends LightningElement {

    moduleName = 'ConversationEnded';
    subscription = null;
    @wire(MessageContext)
    messageContext;

    recordId;
    moduleInstance;

    subscribeToMessageChannel() {
        if (!this.subscription) {
            this.subscription = subscribe(
                this.messageContext,
                ConversationEndedChannel,
                (message) => this.handleMessage(message),
                { scope: APPLICATION_SCOPE }
            );
        }
    }

    handleMessage(message) {
        console.log(this.moduleName + ': received chat end event for recordId: ', message.recordId);
        this.moduleInstance.endChatEventHandler(message.recordId);
    }

    connectedCallback () {
        Promise.all([
            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.conversationEnded
                };
                this.moduleInstance = BsModules.load(this.moduleName, moduleRefs, noConflictInstance);
                this.subscribeToMessageChannel();
            });
        })
        .catch(error => {
            console.error(this.moduleName + ': an error occurred.', error);
        });
    }
}

Filename

conversationEnded.html

Code

<template>
    <lightning-card title="b+s Conversation Ended" lwc:ref="conversationEnded">
        <p class="slds-p-horizontal_small">Module loaded successfully.</p>
        <p slot="footer">Waiting for events...</p>
    </lightning-card>
</template>

Filename

conversationEnded.js-meta.xml

Code

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