Submit For Review
Edit Article
Show Diff
View Article

Manage Chat/Messaging Session with Flow

Title Changes:

Manage Chat/Messaging Session with FlowManage Chat/Messaging Session with Flow

Content Changes:

Removed Added
Deleted: <!-- wp:tadv/classic-paragraph -->Added:
Deleted: <p><span style="font-weight: 400">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 <a href="https://developer.salesforce.com/docs/component-library/bundle/lightning:conversationToolkitAPI/documentation">Conversation Toolkit API </a></span>.</p> 
Deleted: <p><span style="font-weight: 400">The supported features include:</span></p> 
Deleted: <ul> 
Deleted: <li style="font-weight: 400"><b>Send Message</b><span style="font-weight: 400"> - the message will then be immediately sent</span></li> 
Deleted: <li style="font-weight: 400"><b>Set Agent Input</b><span style="font-weight: 400"> - the message will be set in in the agent's text box so the agent can change/personalize it</span></li> 
Deleted: <li style="font-weight: 400"><b>Init File Transfer</b><span style="font-weight: 400"> - Initiates the process of transferring a file from a customer to an agent</span></li> 
Deleted: <li style="font-weight: 400"><b>End Chat</b><span style="font-weight: 400"> - Ends a chat in which an agent is currently engaged.</span></li> 
Deleted: </ul> 
Deleted: <p><span style="font-weight: 400">The functionality is available as both a screen component and a Flow action. </span></p> 
Deleted: <h2>Attributes</h2> 
Deleted: <ul> 
Deleted: <li><strong>sessionId</strong> : the id of the LiveChatTranscript or the MessagingSession.</li> 
Deleted: <li><strong>actionType</strong> : the type of action you want to perform. Supported action are : sendMessage, setAgentInput, endChat, initFileTransfer.</li> 
Deleted: <li><strong>message</strong> : the message you want to set or send.</li> 
Deleted: <li><strong>recordId</strong> : (for initFileTransfer only) the id of the record to attach the file after transfer.</li> 
Deleted: </ul> 
Deleted: <h2>Screen Component</h2> 
Deleted: <h3>How to use it?</h3> 
Deleted: <p>Just drag and drop the component on a screen and fill the parameter. See example below:</p> 
Deleted: <p><img class="alignnone wp-image-20823" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionSC-300x196.png" alt="" width="744" height="486"></p> 
Deleted: <p>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 <strong>Get Record</strong> node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:</p> 
Deleted: <p><img class="alignnone wp-image-20825" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionSC-from-other-Object-300x155.png" alt="" width="771" height="396"></p> 
Deleted: <h2>Action</h2> 
Deleted: <h3>How to use it?</h3> 
Deleted: <p>Just drag and drop an<strong>&nbsp;Action</strong> node fill the parameter. See example below:</p> 
Deleted: <p><img class="alignnone wp-image-20829" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionLA-300x231.png" alt="" width="725" height="558"></p> 
Deleted: <p>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 <strong>Get Record</strong> node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:</p> 
Deleted: <p><img class="alignnone wp-image-20830" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionLA-from-other-Object-300x155.png" alt="" width="812" height="417"></p> 
Deleted: <h2>How to get it in my org?</h2> 
Deleted: <p>You can either copy/paste the code below or install the following package : <a href="https://login.salesforce.com/packaging/installPackage.apexp?p0=04t1v000002GyNx">FlowManageChatSession</a></p> 
Deleted: <p>The package will add two Lightning Component :&nbsp;</p> 
Deleted: <ul> 
Deleted: <li><strong>FlowManageChatSessionLA</strong> : you can use this component in Action</li> 
Deleted: <li><strong>FlowManageChatSessionSC</strong> : you can use this component in Screen</li> 
Deleted: </ul> 
Deleted: <h2>End-to-end example with Screen Component</h2> 
Deleted: <p>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.</p> 
Deleted: <p>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 : <a href="https://trailhead.salesforce.com/content/learn/modules/web-chat">Web Chat Basics</a>.&nbsp;</p> 
Deleted: <p>Then create a flow with an input variable <strong>recordId</strong>. The id of the Case will be passed in this variable:</p> 
Deleted: <p><img class="alignnone wp-image-20860" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionSC-input-variable-300x129.png" alt="" width="682" height="291"></p> 
Deleted: <p>Add a Get Record node so you can retrieve the LiveChatTranscriptId from the Case id:</p> 
Deleted: <p><img class="alignnone wp-image-20861" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSession-from-Case-300x205.png" alt="" width="668" height="454"></p> 
Deleted: <p>Add a screen node and drag and drop the <strong>FlowManageChatSessionSC&nbsp;</strong>component into your screen</p> 
Deleted: <p><img class="alignnone wp-image-20863" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionSC-Screen-300x181.png" alt="" width="762" height="457"></p> 
Deleted: <p>Finally your flow should look like this:</p> 
Deleted: <p><img class="alignnone wp-image-20865" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionSC-Overall-Flow-300x90.png" alt="" width="767" height="230"></p> 
Deleted: <p>Let's put it all together and see how it look like from an Agent point of view:</p> 
Deleted: <p><img class="alignnone wp-image-20875" src="https://unofficialsf.com/wp-content/uploads/2020/10/FlowManageChatSessionSC-Agent-view-300x148.jpg" alt="" width="1081" height="530"></p> 
Deleted: <p>&nbsp;</p> 
Deleted: <h2>Code</h2> 
Deleted: <h5>Screen Component</h5> 
Deleted: <p>FlowManageChatSessionSC.cmp</p> 
Deleted: <!-- /wp:tadv/classic-paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>&lt;aura:component implements="lightning:availableForFlowScreens" access="global"&gt; 
Deleted: &lt;aura:attribute name="sessionId" type="String" access="global"/&gt; 
Deleted: &lt;aura:attribute name="actionType" type="String" access="global" default="sendMessage"/&gt; 
Deleted: &lt;aura:attribute name="message" type="String" access="global"/&gt; 
Deleted: &lt;aura:attribute name="recordId" type="String" access="global"/&gt; 
Deleted:  
Deleted: &lt;lightning:conversationToolkitAPI aura:id="conversationKit" /&gt; 
Deleted: &lt;aura:handler name="init" value="{!this}" action="{!c.doInit}"/&gt; 
Deleted: &lt;/aura:component&gt;</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:paragraph --> 
Deleted: <p>FlowManageChatSessionSCcontroller.js</p> 
Deleted: <!-- /wp:paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>({ 
Deleted: doInit : function(component, event, helper) { 
Deleted: var actionType = component.get("v.actionType"); 
Deleted: if (actionType == 'sendMessage') 
Deleted: helper.sendMessage(component, event); 
Deleted: if (actionType == 'setAgentInput') 
Deleted: helper.setAgentInput(component, event); 
Deleted: if (actionType == 'endChat') 
Deleted: helper.endChat(component, event); 
Deleted: if (actionType == 'initFileTransfer') 
Deleted: helper.initFileTransfer(component, event); 
Deleted: }, 
Deleted: })</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:paragraph --> 
Deleted: <p>FlowManageChatSessionSChelper.js</p> 
Deleted: <!-- /wp:paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>({ 
Deleted: sendMessage: function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: conversationKit.sendMessage({ 
Deleted: recordId: sessionIdShort, 
Deleted: message: { 
Deleted: text: component.get("v.message") 
Deleted: } 
Deleted: }) 
Deleted: .then(function(result){ 
Deleted: if (result) { 
Deleted: console.log("Successfully sent message: " + component.get("v.message")); 
Deleted: } else { 
Deleted: console.log("Failed to send message: " + component.get("v.message")); 
Deleted: } 
Deleted: }); 
Deleted: } 
Deleted: }, 
Deleted:  
Deleted: setAgentInput : function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: conversationKit.setAgentInput({ 
Deleted: recordId: sessionIdShort, 
Deleted: message: { 
Deleted: text: component.get("v.message") 
Deleted: } 
Deleted: }) 
Deleted: .then(function(result){ 
Deleted: if (result) { 
Deleted: console.log("Successfully setAgentInput, message: " + component.get("v.message")); 
Deleted: } else { 
Deleted: console.log("Failed to setAgentInput, message: " + component.get("v.message")); 
Deleted: } 
Deleted: }); 
Deleted: } 
Deleted: }, 
Deleted:  
Deleted: endChat : function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: conversationKit.endChat({ 
Deleted: recordId: sessionIdShort 
Deleted: }) 
Deleted: .then(function(result){ 
Deleted: if (result) { 
Deleted: console.log("Successfully endChat"); 
Deleted: } else { 
Deleted: console.log("Failed to endChat"); 
Deleted: } 
Deleted: }); 
Deleted: } 
Deleted: }, 
Deleted:  
Deleted: initFileTransfer : function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted: var recordId = component.get("v.recordId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '' &amp;&amp; recordId != null &amp;&amp; recordId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: var recordIdShort = (recordId.length &gt; 15 ? recordId.substring(0, 15) : recordId); 
Deleted: console.log("AutoSendChatMessage starting conversationKit initFileTransfer on sessionId: " + sessionIdShort + ", recordId: " + recordIdShort); 
Deleted: conversationKit.initFileTransfer({ 
Deleted: recordId: sessionIdShort, 
Deleted: attachmentRecordId : recordIdShort 
Deleted: }); 
Deleted: } 
Deleted: } 
Deleted: })</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:paragraph --> 
Deleted: <p>FlowManageChatSessionSC.design</p> 
Deleted: <!-- /wp:paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>&lt;design:component&gt; 
Deleted: &lt;design:attribute name="sessionId" label="sessionId"/&gt; 
Deleted: &lt;design:attribute name="actionType" label="Type of Action" datasource="sendMessage,setAgentInput,endChat,initFileTransfer" default="sendMessage"/&gt; 
Deleted: &lt;design:attribute name="message" label="Message"/&gt; 
Deleted: &lt;design:attribute name="recordId" label="recordId"/&gt; 
Deleted: &lt;/design:component&gt;</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:tadv/classic-paragraph --> 
Deleted: <h5>Action</h5> 
Deleted: <p>FlowManageChatSessionLA.cmp</p> 
Deleted: <!-- /wp:tadv/classic-paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>&lt;aura:component implements="lightning:availableForFlowActions" access="global"&gt; 
Deleted: &lt;aura:attribute name="sessionId" type="String" access="global"/&gt; 
Deleted: &lt;aura:attribute name="actionType" type="String" access="global" default="sendMessage"/&gt; 
Deleted: &lt;aura:attribute name="message" type="String" access="global"/&gt; 
Deleted: &lt;aura:attribute name="recordId" type="String" access="global"/&gt; 
Deleted: &lt;lightning:conversationToolkitAPI aura:id="conversationKit" /&gt; 
Deleted: &lt;/aura:component&gt;</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:paragraph --> 
Deleted: <p>FlowManageChatSessionLAcontroller.js</p> 
Deleted: <!-- /wp:paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>({ 
Deleted: invoke : function(component, event, helper) { 
Deleted: var actionType = component.get("v.actionType"); 
Deleted:  
Deleted: if (actionType == 'sendMessage') 
Deleted: helper.sendMessage(component, event); 
Deleted: if (actionType == 'setAgentInput') 
Deleted: helper.setAgentInput(component, event); 
Deleted: if (actionType == 'endChat') 
Deleted: helper.endChat(component, event); 
Deleted: if (actionType == 'initFileTransfer') 
Deleted: helper.initFileTransfer(component, event); 
Deleted: } 
Deleted: })</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:paragraph --> 
Deleted: <p>FlowManageChatSessionLAhelper.js</p> 
Deleted: <!-- /wp:paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>({ 
Deleted: sendMessage: function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: conversationKit.sendMessage({ 
Deleted: recordId: sessionIdShort, 
Deleted: message: { 
Deleted: text: component.get("v.message") 
Deleted: } 
Deleted: }) 
Deleted: .then(function(result){ 
Deleted: if (result) { 
Deleted: console.log("Successfully sent message: " + component.get("v.message")); 
Deleted: } else { 
Deleted: console.log("Failed to send message: " + component.get("v.message")); 
Deleted: } 
Deleted: }); 
Deleted: } 
Deleted: }, 
Deleted:  
Deleted: setAgentInput : function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: conversationKit.setAgentInput({ 
Deleted: recordId: sessionIdShort, 
Deleted: message: { 
Deleted: text: component.get("v.message") 
Deleted: } 
Deleted: }) 
Deleted: .then(function(result){ 
Deleted: if (result) { 
Deleted: console.log("Successfully setAgentInput, message: " + component.get("v.message")); 
Deleted: } else { 
Deleted: console.log("Failed to setAgentInput, message: " + component.get("v.message")); 
Deleted: } 
Deleted: }); 
Deleted: } 
Deleted: }, 
Deleted:  
Deleted: endChat : function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: conversationKit.endChat({ 
Deleted: recordId: sessionIdShort 
Deleted: }) 
Deleted: .then(function(result){ 
Deleted: if (result) { 
Deleted: console.log("Successfully endChat"); 
Deleted: } else { 
Deleted: console.log("Failed to endChat"); 
Deleted: } 
Deleted: }); 
Deleted: } 
Deleted: }, 
Deleted:  
Deleted: initFileTransfer : function(component, event) { 
Deleted: var conversationKit = component.find("conversationKit"); 
Deleted: var sessionId = component.get("v.sessionId"); 
Deleted: var recordId = component.get("v.recordId"); 
Deleted:  
Deleted: if (sessionId != null &amp;&amp; sessionId != '' &amp;&amp; recordId != null &amp;&amp; recordId != '') { 
Deleted: var sessionIdShort = (sessionId.length &gt; 15 ? sessionId.substring(0, 15) : sessionId); 
Deleted: var recordIdShort = (recordId.length &gt; 15 ? recordId.substring(0, 15) : recordId); 
Deleted: console.log("AutoSendChatMessage starting conversationKit initFileTransfer on sessionId: " + sessionIdShort + ", recordId: " + recordIdShort); 
Deleted: conversationKit.initFileTransfer({ 
Deleted: recordId: sessionIdShort, 
Deleted: attachmentRecordId : recordIdShort 
Deleted: }); 
Deleted: } 
Deleted: } 
Deleted: })</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:paragraph --> 
Deleted: <p>FlowManageChatSessionLA.design</p> 
Deleted: <!-- /wp:paragraph --> 
Deleted: <!-- wp:code --> 
Deleted: <pre class="wp-block-code"><code>&lt;design:component&gt; 
Deleted: &lt;design:attribute name="sessionId" label="sessionId"/&gt; 
Deleted: &lt;design:attribute name="actionType" label="Type of Action" datasource="sendMessage,setAgentInput,endChat,initFileTransfer" default="sendMessage"/&gt; 
Deleted: &lt;design:attribute name="message" label="Message"/&gt; 
Deleted: &lt;design:attribute name="recordId" label="recordId"/&gt; 
Deleted: &lt;/design:component&gt;</code></pre> 
Deleted: <!-- /wp:code --> 
Deleted: <!-- wp:paragraph --> 
Deleted: <p></p> 
Deleted: <!-- /wp:paragraph -->