External Embedded Flows With Variable Pass-Through

Lightning Out-ta This World

This repo contains a practical example of a working Salesforce Customer 360 Platform Embedded Service Deployment external flow, which can be integrated into any non-Salesforce external website and allow visitors of a website or app to interact with Salesforce without logging into it or otherwise accessing it.

This particular feature has a number of super useful applications, and it's a lesser-known aspect of the digital engagement and Service Cloud side of our Customer 360 Platform.

We've also taken the implementation one step further by allowing the user to pass in an arbitrary value to the flow from the external app using a simple URL query parameter.

Use Case

In this example, a customer wants to embed a form on their existing website that collects data and creates records inside of Salesforce based on the user input. The user is already logged in to the customer's existing website, so ideally we'd be able to prefill information in the embedded flow to streamline the process.

Implementation

To accomplish this use case, we're using a few different features:

We've enabled Embedded Flows using the Embedded Service Deployment feature
We've passed information from the authentication context in the custom website to the Flow using a query param varName
We use the passed-in values to modify the flow using a Lightning Component as a Local Action in the flow
We pre-fill the form appropriately with thos evalues and allow the flow to complete

The fancy footwork is mostly accomplished by the Lightning Component.

Setup Instructions

If you're familiar with SFDX, you'll have everything you need herein to provision a scratch org with the feature enabled. The HTML file included in this repo is an example of a simple website that embeds the JavaScript.

Clone the repo
Authorize your Org from VSCode
Push the source to your org
Set up a Community
Set up the Embedded Service Deploy, and use the included Flow
Update the code snippet in the included test page with the one generated by your Embedded Service Deploy.
Deploy the HTML page somewhere (e.g., AWS S3)
Update your CORS settings in the Org to whitelist the web page URL you've deployed
Visit the deployed HTML page and add ?userName=ABC to the URL to see it work.

Modification Instructions

Out of the box, we've set up three query params (parameter1, parameter2, parameter3) that you can work with. All three are optional. This allows you to use up to three attributes from your external site with no-code configuration.

To specify a particular URL parameter name, create a text variable in the Flow that has the attribute name as its value (e.g., "userName") and set it as an input value for the "parameter1Name" field in the Action config screen. In this example, which is included in the package, QueryParamToFind is set to “userName”.

Then create a text variable to store the value that will be retrieved from the URL for that parameter1 attribute. Set it as the output value for the "parameter1Value" field.

Now, when the Flow is run on a page with a URL that includes ?userName=Frank, the value “Frank” will be populated into the varName variable for use in the Flow.

You can use the same approach for the other two parameters, which allows you to capture up to three URL query parameters with the out-of-the-box Flow and Local Action.

Test Version

I've got a developer org that I use to demo this. You can see the final product here.

Documentation

This is a demonstration of the "Embedded Service" feature of Salesforce, and we're using a few neat tricks that Flows supports on the platform to make the magic. Check the following docs for more info.

Questions?

Made with love by Frank Caron. Big shout out to Henry Hai for forcing me to be not lazy and calling out the Local Action workaround of sorts.

frankcaron/SFDX-Embedded-Flow-Example