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.
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.
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.
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
CORSsettings in the Org to whitelist the web page URL you've deployed - Visit the deployed HTML page and add
?userName=ABCto the URL to see it work.
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.
I've got a developer org that I use to demo this. You can see the final product here.
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.
- Working with Embedded Flows
- Creating An Embedded Service Deployment
- Passing Variables Into A Flow Via Its URL
- Customizing the Embedded Flow UI Visually
- UnofficialSF post
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.