These two extensions are designed to enable a service agent to use a flow to manage elements of a chat session which rely on the Conversation Toolkit API .
The supported features include:
- Send Message – the message will then be immediately sent
- Set Agent Input – the message will be set in in the agent’s text box so the agent can change/personalize it
- Init File Transfer – Initiates the process of transferring a file from a customer to an agent
- End Chat – Ends a chat in which an agent is currently engaged.
The functionality is available as both a screen component and a Flow action.
Attributes
- sessionId : the id of the LiveChatTranscript or the MessagingSession.
- actionType : the type of action you want to perform. Supported action are : sendMessage, setAgentInput, endChat, initFileTransfer.
- message : the message you want to set or send.
- recordId : (for initFileTransfer only) the id of the record to attach the file after transfer.
Screen Component
How to use it?
Just drag and drop the component on a screen and fill the parameter. See example below:
In case your flow is not started from the LiveChatTranscript object or the MessagingSession object, you can also retrieve the LiveChatTranscriptId or the MessagingSessionId using a Get Record node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:
Action
How to use it?
Just drag and drop an Action node fill the parameter. See example below:
In case your flow is not started from the LiveChatTranscript object or the MessagingSession object, you can also retrieve the LiveChatTranscriptId or the MessagingSessionId using a Get Record node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:
How to get it in my org?
You can either copy/paste the code below or install the following package : FlowManageChatSession
The package will add two Lightning Component :
- FlowManageChatSessionLA : you can use this component in Action
- FlowManageChatSessionSC : you can use this component in Screen
End-to-end example with Screen Component
In this scenario we will start a flow from a Case during a Web Chat conversation. The flow initiated by the Agent will send a message to the customer.
You need first to enable and configure Web Chat. If you’re not familiar with Web Chat, you can refer to this great Trailhead module : Web Chat Basics.
Then create a flow with an input variable recordId. The id of the Case will be passed in this variable:
Add a Get Record node so you can retrieve the LiveChatTranscriptId from the Case id:
Add a screen node and drag and drop the FlowManageChatSessionSC component into your screen
Finally your flow should look like this:
Let’s put it all together and see how it look like from an Agent point of view:
Code
Screen Component
FlowManageChatSessionSC.cmp
<aura:component implements="lightning:availableForFlowScreens" access="global">
<aura:attribute name="sessionId" type="String" access="global"/>
<aura:attribute name="actionType" type="String" access="global" default="sendMessage"/>
<aura:attribute name="message" type="String" access="global"/>
<aura:attribute name="recordId" type="String" access="global"/>
<lightning:conversationToolkitAPI aura:id="conversationKit" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>FlowManageChatSessionSCcontroller.js
({
doInit : function(component, event, helper) {
var actionType = component.get("v.actionType");
if (actionType == 'sendMessage')
helper.sendMessage(component, event);
if (actionType == 'setAgentInput')
helper.setAgentInput(component, event);
if (actionType == 'endChat')
helper.endChat(component, event);
if (actionType == 'initFileTransfer')
helper.initFileTransfer(component, event);
},
})FlowManageChatSessionSChelper.js
({
sendMessage: function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
if (sessionId != null && sessionId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
conversationKit.sendMessage({
recordId: sessionIdShort,
message: {
text: component.get("v.message")
}
})
.then(function(result){
if (result) {
console.log("Successfully sent message: " + component.get("v.message"));
} else {
console.log("Failed to send message: " + component.get("v.message"));
}
});
}
},
setAgentInput : function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
if (sessionId != null && sessionId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
conversationKit.setAgentInput({
recordId: sessionIdShort,
message: {
text: component.get("v.message")
}
})
.then(function(result){
if (result) {
console.log("Successfully setAgentInput, message: " + component.get("v.message"));
} else {
console.log("Failed to setAgentInput, message: " + component.get("v.message"));
}
});
}
},
endChat : function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
if (sessionId != null && sessionId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
conversationKit.endChat({
recordId: sessionIdShort
})
.then(function(result){
if (result) {
console.log("Successfully endChat");
} else {
console.log("Failed to endChat");
}
});
}
},
initFileTransfer : function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
var recordId = component.get("v.recordId");
if (sessionId != null && sessionId != '' && recordId != null && recordId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
var recordIdShort = (recordId.length > 15 ? recordId.substring(0, 15) : recordId);
console.log("AutoSendChatMessage starting conversationKit initFileTransfer on sessionId: " + sessionIdShort + ", recordId: " + recordIdShort);
conversationKit.initFileTransfer({
recordId: sessionIdShort,
attachmentRecordId : recordIdShort
});
}
}
})FlowManageChatSessionSC.design
<design:component>
<design:attribute name="sessionId" label="sessionId"/>
<design:attribute name="actionType" label="Type of Action" datasource="sendMessage,setAgentInput,endChat,initFileTransfer" default="sendMessage"/>
<design:attribute name="message" label="Message"/>
<design:attribute name="recordId" label="recordId"/>
</design:component>Action
FlowManageChatSessionLA.cmp
<aura:component implements="lightning:availableForFlowActions" access="global">
<aura:attribute name="sessionId" type="String" access="global"/>
<aura:attribute name="actionType" type="String" access="global" default="sendMessage"/>
<aura:attribute name="message" type="String" access="global"/>
<aura:attribute name="recordId" type="String" access="global"/>
<lightning:conversationToolkitAPI aura:id="conversationKit" />
</aura:component>FlowManageChatSessionLAcontroller.js
({
invoke : function(component, event, helper) {
var actionType = component.get("v.actionType");
if (actionType == 'sendMessage')
helper.sendMessage(component, event);
if (actionType == 'setAgentInput')
helper.setAgentInput(component, event);
if (actionType == 'endChat')
helper.endChat(component, event);
if (actionType == 'initFileTransfer')
helper.initFileTransfer(component, event);
}
})FlowManageChatSessionLAhelper.js
({
sendMessage: function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
if (sessionId != null && sessionId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
conversationKit.sendMessage({
recordId: sessionIdShort,
message: {
text: component.get("v.message")
}
})
.then(function(result){
if (result) {
console.log("Successfully sent message: " + component.get("v.message"));
} else {
console.log("Failed to send message: " + component.get("v.message"));
}
});
}
},
setAgentInput : function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
if (sessionId != null && sessionId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
conversationKit.setAgentInput({
recordId: sessionIdShort,
message: {
text: component.get("v.message")
}
})
.then(function(result){
if (result) {
console.log("Successfully setAgentInput, message: " + component.get("v.message"));
} else {
console.log("Failed to setAgentInput, message: " + component.get("v.message"));
}
});
}
},
endChat : function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
if (sessionId != null && sessionId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
conversationKit.endChat({
recordId: sessionIdShort
})
.then(function(result){
if (result) {
console.log("Successfully endChat");
} else {
console.log("Failed to endChat");
}
});
}
},
initFileTransfer : function(component, event) {
var conversationKit = component.find("conversationKit");
var sessionId = component.get("v.sessionId");
var recordId = component.get("v.recordId");
if (sessionId != null && sessionId != '' && recordId != null && recordId != '') {
var sessionIdShort = (sessionId.length > 15 ? sessionId.substring(0, 15) : sessionId);
var recordIdShort = (recordId.length > 15 ? recordId.substring(0, 15) : recordId);
console.log("AutoSendChatMessage starting conversationKit initFileTransfer on sessionId: " + sessionIdShort + ", recordId: " + recordIdShort);
conversationKit.initFileTransfer({
recordId: sessionIdShort,
attachmentRecordId : recordIdShort
});
}
}
})FlowManageChatSessionLA.design
<design:component>
<design:attribute name="sessionId" label="sessionId"/>
<design:attribute name="actionType" label="Type of Action" datasource="sendMessage,setAgentInput,endChat,initFileTransfer" default="sendMessage"/>
<design:attribute name="message" label="Message"/>
<design:attribute name="recordId" label="recordId"/>
</design:component>