Use the Lightning Message Service Bridge

Use the Lightning Message Service Bridge component to enable communication between the telephony system and other Lightning components.

To use the Lightning Message Service (LMS) channel in your contact center, create a Lightning component using Aura or a Lightning Web Component that serves as the bridge component. This component supports communication between the connector and other Lightning components on the page.

Using Aura

It must implement the Aura interface service_cloud_voice:messageBridge.
It must reference the LMS channel you defined with namespace.
It must implement the publishMessage method to publish connector messages to the channel.
It must call the handleMessage Action handler to send messages to the connector.
It must not have any UI markups.

.cmp example:

1<aura:component implements="service_cloud_voice:messageBridge">
2  <lightning:messageChannel type="{your_namespace}__{LMS_channel_name}__c" aura:id="sampleMessageChannel" onMessage="{!c.handleMessage}"/>
3</aura:component>

Controller.js sample:

1({
2    publishMessage : function(component, event, helper) {
3        var message = event.getParam('arguments').message;
4        component.find('sampleMessageChannel').publish({ source : 'CONNECTOR', payload:message});
5    },
6    
7    handleMessage: function(cmp, message, helper) { 
8        var messageWrapper = message.getParams();
9        if(messageWrapper.source != 'CONNECTOR') {
10            cmp.get("v.handleMessage")(messageWrapper.payload);
11        }
12    }
13})

Using Lightning Web Components (LWC)

There’s no interface equivalent in LWC.
It must reference the LMS channel you defined without a namespace.
It must expose the publishMessage API to publish messages to the channel.
It must expose a handleMessage attribute and use that as a callback to send messages to the connector.
It must not have any UI markups.

.js example:

1import { LightningElement, track, wire, api } from 'lwc';
2import { publish, subscribe, APPLICATION_SCOPE, MessageContext } from 'lightning/messageService';
3import SAMPLEMC from "@salesforce/messageChannel/{LMS_channel_name}__c";
4
5export default class Lms_LWC extends LightningElement {
6    @wire(MessageContext)
7    messageContext;
8
9    @api handleMessage;
10     
11    constructor() {
12        super();
13    }
14
15    connectedCallback() {
16        subscribe(this.messageContext, 
17            SAMPLEMC, 
18            (message) => {
19                if(message.source != 'CONNECTOR'){
20                    this.handleMessage(message.payload);
21                }
22            },
23            {scope: APPLICATION_SCOPE}
24        );
25    }
26
27    @api
28    publishMessage(message) {
29        publish(this.messageContext, SAMPLEMC,  { source : 'CONNECTOR', payload:message});
30    }
31}

To avoid echo, a source property is inserted during message publishing. When a message from the connector is published to the channel, it’s filtered out and not sent back. The source property won’t be needed if the communication is one-way.
The connector starts receiving messages sent from the message bridge after the connector is fully initialized.

Note

Configure the Contact Center to Use the Message Bridge Component

After creating the component, configure the contact center to use it.

Using the ConversationVendorInfo setup entity (for Production): In a production environment, specify the message bridge component’s fully qualified name (FQN) in the ConversationVendorInfo record from the same managed package that has the actual Lightning component. When a Salesforce admin imports an XML file to create a contact center, it references the ConversationVendorInfo to read the message bridge component name and configure the contact center custom settings automatically.

Using CallCenter Metadata API (for Local Testing): Add the message bridge component FQN to the contact center’s custom settings for testing. This can be done using theCallCenter Metadata type. Set the messageBridgeComponentFqn value in the Metadata file to the fully qualified name of your bridge component. For an example:

1<?xml version="1.0" encoding="UTF-8"?>
2<CallCenter xmlns="http://soap.sforce.com/2006/04/metadata">
3...
4  <customSettings>{&quot;messageBridgeComponentFqn&quot;:&quot;xtelephony:lwcBridge&quot;,&quot;reqTimeout&quot;:&quot;5000&quot;,&quot;reqCallCenterType&quot;:&quot;SCVBYOT&quot;,*scvVendorLoginUrl&quot;:&quot;https://YOUR_SERVER_LOGIN_URL&quot;*,&quot;reqStandbyUrl&quot;:&quot;https://domain:port/softphone&quot;,&quot;reqSoftphoneHeight&quot;:&quot;300&quot;,&quot;reqUseApi&quot;:&quot;true&quot;,&quot;reqSoftphoneWidth&quot;:&quot;500&quot;,&quot;reqSalesforceCompatibilityMode&quot;:&quot;Lightning&quot;}</customSettings>
5...
6</CallCenter>

Test Your Bridge Component

You can test the bridge component using the Messages section of the Voice Call Simulator. To learn more, see Test Your Implementation with the Voice Call Simulator.

Limitations

See Lightning Message Service Limitations.