Gerald Ehret-Franck is a Salesforce Principle Solution Engineer (previously he came from Rivia) who has crafted a powerful combination of extensions that enable flows to be inserted into chat sessions and used to managed those same chat sessions. The pinnacle of his achievement, though, is this surprisingly easy-to-implement synchronized coworking solution, where agents can see and assist their users in real time.

Why doing so? This will help you create great experience from both the Customer and Agent perspective in order to :

• Improve Customer Satisfaction and Loyalty
• Improve Agent efficiency and Reduce Average Handle Time
• Improve Quality by reducing copy/paste error

Demo

Overall Architecture

Configure

This example describe the configuration used for the demo above

Install

You will need to install the packages from these three extensions:

• How to Run a Screen Flow in a Chat Session
• Manage Chat/Messaging Session with Flow
• Enabling Flow Screens to Respond to Platform Events

Step 1 – Create a platform event

This platform event will be used to synchronise the customer flow with the agent flow. the platform event has two fields

• id => to identify the platform event between agent and customer
• use_of_fund_reason => to store the customer’s answer and share it with the agent

More information about Platform Event on Salesforce Help.

How does the id get used? Let’s say you’re having two customers (A & B) having a chat session at the same time with two different agents (A & B) and both of them running the “synchronized” flow. When customer A is filling his form you want only the agent A’s running flow to react to the platform event created by customer A. You don’t want the agent B’s running flow to react. That’s exactly what this id is for. Customer A will create a platform event with an id and agent A is reacting to only platform events with that id.

How does Agent A and customer A knows which id to use? In the demo you may have notice that customer A’s flow has been initiated by Agent A. When Agent A initiates a flow on the customer side for customer A, agent A initiates this customer side flow with one parameter : the id customer A must use to create platform events. This id can be auto-generated and unique, it can be the ChatTranscriptId or the CaseId (assuming the same customer is not discussing with two different agents for the same case!).

If you need more data to synchronise between customer and agent, just add more fields to the platform event

Step 2 – Create Permission

You need to create a permission set to allow users to create and read the Platform Event created. A platform event is a Salesforce Object and will appear as any other objects in the “Object Settings” section of your permission set. You should assign the proper permission to both internal and external users.

More information about Permission Set on Salesforce Help.

Step 3 – Create the Customer side flow

This flow demonstrates the key elements necessary to create a Synchronized Co-Working chat session.

The first node is a screen that will display the question in the form

The second node is a create record node and will create the platform event

The third node is a screen that will display the results

Step 4 – Create a lightning component to listen to the platform event

Refer to following post.

Step 5 – Create the Agent side flow

Remember that in the demonstration, the flow was initiated from the Case and not the Live Chat Transcript

The first node is a Get Record node in order to retrieve the LivechatTranscriptId from the Case Id. The Case Id will be passed in a variable named recordId

The second node is a Screen that will:

• Display the question in the form
• FlowManageChatSessionSC : Send an administrative message to launch the customer side flow in the customer chat window. The message we are sending is a formula fields: “lwc:flow:Use_of_Funds_Customer&recordId=”+{!recordId}. The Chat Lightning Web Component Pack we have installed will react to this message and instead of displaying the message, it will launch the flow 
• FlowManageChatSessionSC: Send the script message automatically in the chat window which is “A form regarding the use of funds must be completed, I am sending you the form in the chat window”
• FlowEventListener: Listen to the platform event.
  • Input: we use the Case Id as the id
  • Ouput : we store the data in a variable named UseOfFund

The third node is a screen that will:

• FlowManageChatSessionSC: Send the script message automatically in the chat window which is “Thank you for completing the questionnaire 😃, we have noted that the use of funds concerns “+{!UseOfFund}. In the demo the value for the variable UseOfFund is 🛠Renovation Work
• Display Image
• Display the result

We can then store the value in the Case.

It’s easy to inject running Flow screens into Salesforce chat sessions using the new Chat Lightning Web Component Pack. This post covers the basics. You may want to also explore the more advanced Synchronized Chat capabilities you can add in this post.

To create a richer chat experience that includes Flow screens, you can replace the default chat component with the richer Chat Lightning Web Component Pack available on the Appexchange as a Salesforce Labs.

Chat Lightning Web Component Pack is the most complete set of example Lightning Web Components for Chat ever assembled! If you are looking for the fastest way to add rich media to your Salesforce Chat and Einstein Bot experience, look no further! The package includes many more capabilities.

How to use it?

Generating a screen flow is done by ‘sending’ a special chat message in the following format:  lwc:flow:{flowURL}:{height}. 

This message will not be seen by the customer but instead the component will interpret this message and display a flow instead. Parameters:

• flowURL: the API name of your flow, with URL params to set input (ie “myFlowName&param1=val1&param2=val2)
• height: the height in pixels that you want the iFrame to be

let’s have a quick example

• Flow API name : MyFlowName
• The flow has one input variable : ContactId

The syntax will be : lwc:flow:MyFlowName&ContactId=003000000000000000 with “003000000000000000” being the id of the Contact to pass as input variable.

To generate these special chat codes, you can enable your agents to run a simple Flow.In the above video, you can see the agent running a flow that in turn causes the chat session to launch a flow.

Sending the Special Chat message from Flow

From a flow, you can send a message automatically in the chat as described in this post. The previous article provides a package for installing the Manage Chat/Messaging Session with Flow Extensions. From your flow create a formula variable that will output the appropriate syntax and send it automatically with the Manage Chat/Messaging Session with Flow Extensions.

Sending the Special Chat message from other places

• From an Einstein Bot you can easily generate the appropriate message with the right syntax. Einstein Bot can leverage variable, example below.

• Using Quick Text and merge fields, agents can also generate the appropriate message with the right syntax.

How to get in my org?

Install the package you can found here : Chat Lightning Web Component Pack 

For more information here is the user guide

Open-source package, so you can modify for your use cases here: https://github.com/Colatabajonies/Chat-Lightning-Web-Component-Pack

Continuing his work in Flow Benchmarking (Salesforce Record Automation Benchmarking by Luke Freeland), Luke has done some more interesting benchmarking with performance data on forcing Flow to store all fields in the new ‘Get All Fields’ feature. Interesting stuff and worth considering when forcing Flow to truly store all of the fields in a record collection.

Check it out: https://metillium.com/2020/11/flow-get-records-benchmarking/

If you are like me, you break your more extensive flows into multiple (sometimes dozens) of subflows. When building out and debugging these subflows concurrently, it can be a massive pain to navigate between them all as Salesforce gives each tab the generic “Flow Builder” title, leaving you with a mess like the screenshot below.

Tab Modifier is a browser extension created by u/sylouuu that allows you to quickly rename your tabs by simply right clicking anywhere on the page and selecting “Rename Tab”.

Once renamed, the new tab titles are stored in your browser and will permanently override the standard “Flow Builder” title unless modified or deleted in the extension options, making it infinitely easier and less frustrating to work with multiple flows at the same time.