From Gerald: Insert Screen Flows into Chat Sessions

/0 Comments/in /by

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