Salesforce Console Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
LWC Methods for Enhanced Messaging in Lightning Experience
The Conversation Toolkit API is designed for Enhanced Messaging channels, which includes Messaging for In-App and Web, Enhanced Apple, Enhanced Facebook Messenger, Enhanced WhatsApp, Enhanced SMS, and Partner Messaging.
These methods help developers customize the agent experience and how users and other components interact with the conversation component on a page. For example, if you want to customize how an agent composes a message, you can create a messaging composer to draft and send a message during the conversation. These methods only work with an open Messaging Session record page in the console or standard app. If the record is not open, the methods don’t work.
Sample Code
This sample code is an example of the .html file of an LWC bundle that uses Conversation Toolkit API.
1<template>
2 <lightning-card title="LWC tool kit api" icon-name="custom:custom14">
3 <lightning-conversation-toolkit-api lwc:ref="lwcToolKitApi">
4 </lightning-conversation-toolkit-api>
5 <div>
6 {apiOutput}
7 </div>
8 <div>
9 <lightning-button label="getEnhancedConversationLog" onclick={handleButtonClick} value="getEnhancedConversationLog"></lightning-button>
10 <lightning-button label="getConversationLog" onclick={handleButtonClick} value="getConversationLog"></lightning-button>
11 <lightning-button label="sendTextMessage" onclick={handleButtonClick} value="sendTextMessage"></lightning-button>
12 <lightning-button label="setAgentInput" onclick={handleButtonClick} value="setAgentInput"></lightning-button>
13 <lightning-button label="endConversation" onclick={handleButtonClick} value="endConversation"></lightning-button>
14 </div>
15 <template for:each={log} for:item="item">
16 <li key={item}>
17 {item}
18 </li>
19 </template>
20
21 </lightning-card>
22 </template>This sample code is an example of the .xml metadata file of the LWC bundle.
1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
3 <apiVersion>52.0</apiVersion>
4 <isExposed>true</isExposed>
5 <targets>
6 <target>lightning__AppPage</target>
7 <target>lightning__RecordPage</target>
8 <target>lightning__HomePage</target>
9 </targets>
10</LightningComponentBundle>This sample code is an example of the .js file of the LWC bundle. Here is where you use the LWC methods for Enhanced Messaging.
1import { LightningElement, api,track } from 'lwc';
2
3export default class HelloWorld extends LightningElement {
4 @api recordId;
5
6 @track log = [];
7 @track apiOutput;
8 changeHandler(event) {
9 this.greeting = event.target.value;
10 }
11
12 async handleButtonClick(event){
13 this.reset();
14 const toolKit = this.refs.lwcToolKitApi;
15 let result;
16 switch (event.target.value) {
17 case 'getEnhancedConversationLog':
18 result = await toolKit.getEnhancedConversationLog(this.recordId);
19 break;
20 case 'getConversationLog':
21 result = await toolKit.getConversationLog(this.recordId);
22 for(let i=0;i<result.messages.length;i++){
23 var msg = {
24 type:result.messages[i].type,
25 content:result.messages[i].content,
26 name:result.messages[i].name,
27 timestamp:result.messages[i].timestamp
28 }
29 this.log.push(JSON.stringify(msg));
30 }
31 break;
32 case 'sendTextMessage':
33 result = await toolKit.sendTextMessage(this.recordId, { text: 'Text from toolkit' });
34 break;
35 case 'setAgentInput':
36 result = await toolKit.setAgentInput(this.recordId,{ text: 'Inserting from toolkit' });
37 break;
38 case 'endConversation':
39 result = await toolKit.endConversation(this.recordId);
40 break;
41 }
42 if(result){
43 this.apiOutput = event.target.value + " sucess";
44 } else {
45 this.apiOutput = event.target.value + " failed";
46 }
47
48 }
49
50 reset(){
51 this.log = [];
52 this.apiOutput='';
53 }
54
55}These are the LWC methods for Enhanced Messaging.