From Gerald: Manage Chat Sessions from Flow

/0 Comments/in /by

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
  • Load Message – the message will be set in in the agent’s text box so the agent can change/personalize it
  • Request File Transfer from Customer – 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, loadMessage, endChat, requestFile.
  • message : the message you want to set or send.
  • recordId : (for initFileTransfer only) the id of the record to attach the file after transfer.
  • useShortId : decide to use a short id (15 characters) or regular id (18 characters). When selecting this option and even though sessionId and recordId passed to the component are 18 characters long, id will be stripped to 15 characters. Recommended to left this option to “false” for new channels (Enhanced Messaging) and to “true” for older channels (such as live agent).

Screen Component

🚨 Important note for Enhanced Messaging

Since the introduction of Enhanced Messaging, sending automatically a message from a screen component is NOT supported. Now the screen component includes a button to send message when clicked.

Please (either):

  • Use an Action node before your Screen to send messages automatically.
  • Leverage the screen component code as a baseline component that need to be updated to include your branding and style (example : customize button).

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 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:

How to get it in my org?

Install the following package : FlowManageChatSession

The package will add two Lightning Component : 

  • ManageChatSession : you can use this extension as an Action
  • ChatSessionManagerSC : you can use this extension as a screen component in Flow Screens

The code is available on github as well (not updated, please use package)

End-to-end example

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. 

Screen Component

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:

Action

Now let say you would like to provide the same end results but this time leveraging the Action component.

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 Action node and and fill the parameter

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: