Lightning Flow iFrame
Bring your Salesforce Screen Flows onto your website.
A request form or a registration can live on your site and grow as the person moves from step to step. The page gets taller with the form. They aren’t stuck in a box that cuts off the next question.
- Try
- Use the demo on this page.
- Install
- Production and sandbox, or the WordPress plugin. The Flow has to be allowed for guests on a Salesforce Site.
- Get help
- Setup notes are in the support docs. For help wiring it into your site, write Jason.
Try the demo
Pass Flow input variables through the URL.
/projects/lightning-flow-iframe?site=East%20Side#demo
Change the Flow in the URL.
/projects/lightning-flow-iframe?flow=Website_Contact_Form#demo
Completing the flow redirects to iframe-finish-demo.
Features
| Feature | How it works |
|---|---|
| Set Flow Name | The Flow API name is flow. Set it on the page URL, in the WordPress shortcode or settings, or in the JavaScript config. |
| Flow Input Variables | List the input names in inputVars. Values come from the page URL, WordPress extraqs, or JavaScript params. Only listed names are passed. |
| Dynamic height | The frame grows and shrinks with each screen. The embed reads frameHeight from the flow. |
| Scroll to top on screen change | Next and Previous scroll the page so the top of the flow is in view. scrollOffset keeps a fixed header clear. |
| Styling keys | bg, padding, primary, primaryHover, and secondary set the page color, the space around the flow, and the button colors. |
| End URL | endUrl is the page the visitor lands on when the flow finishes. |
Match the public flow to your brand
A public flow can be styled to match the site it lives on. From the embed you can set bg and padding for the color behind the flow and the space around it, and primary, primaryHover, and secondary for the Next, Finish, and Previous buttons. The demo above sets Next to the same rust as this page.
Further changes, such as type, field borders, and error color, are made in the style block on the FlowIframeEmbed Visualforce page.
Install is two parts
The Salesforce package, then the website that shows the flow.
The package
Install FlowIframeEmbed in a production org or a sandbox.
The website
WordPress uses the plugin. Any other site uses the JavaScript embed.
Wire it up
Connect the flow to the public site, then pass values in and send people somewhere when they finish.
Two ways to set it up
WordPress
Install the plugin and point it at your Screen Flow.
Other websites
Use the JavaScript embed.
Either way, the Flow runs for a guest on a Salesforce Site. Guest access has to be on, and the flow has to be allowed on that site. The steps for both are in the support docs.
What you get
- Flows run in Lightning Runtime.
- Auto height via
frameHeightpostMessage. - Flow inputs from URL params using
inputVarsallowlist. - Finish redirect with
endUrl.
Core pieces
- FlowIframeEmbed package in Salesforce
- FlowIframeEmbed Visualforce page (
three_levers__FlowIframeEmbed) on a public Site atsite-prefix/apex/three_levers__FlowIframeEmbed - Screen Flow (activated, API name known)
- three-levers-flow-embed.js for non-WordPress sites
- WordPress plugin with settings defaults + shortcode
High-level setup
- Install FlowIframeEmbed in Salesforce.
- Create and activate your Screen Flow; note the API Developer Name.
- Add FlowIframeEmbed to a Salesforce Site and configure guest access.
- Allow your parent domain in clickjack/CSP settings.
- Embed with the WordPress plugin or JavaScript widget.
Flows, Sites, and guest permissions are configured per org—they are not bundled in the package.
WordPress plugin
Version 1.1.0+ adds FlowIframeEmbed embed mode: configure defaults under Settings → Lightning Flow iFrame, then drop a bare shortcode on any page.
Bare shortcode
When defaults are set for iFrame URL, flow name, and optional end URL:
[Lightning-Flow-iFrame]
Optional flow inputs when your Screen Flow accepts URL variables:
[Lightning-Flow-iFrame inputvars="recordId,source" extraqs="recordId=001xxx&source=homepage"]
Get the plugin
- Auto height via
frameHeightpostMessage - Embed mode:
flow,endUrl, optionalinputVars - Legacy mode preserved when Default Flow Name is blank
JavaScript widget (non-WordPress)
Define window.tlFlowEmbed before loading the script. The widget builds flow, endUrl, and inputVars query strings automatically.
window.tlFlowEmbed = {
embedUrl: 'https://threelevers-dev-ed.my.salesforce-sites.com/apex/three_levers__FlowIframeEmbed3LEVERSDEMO',
flow: 'Demo_iFrame_Volunteer',
endUrl: 'https://threelevers.com/iframe-finish-demo',
inputVars: ['site'],
params: { site: 'North Slope' },
height: '75px',
heightPadding: 0,
bg: 'white',
padding: '0',
primary: 'C75B39',
scrollOffset: 81,
ease: true,
easeSpeed: 0.2,
allowedOrigin: 'https://threelevers-dev-ed.my.salesforce-sites.com'
};<script src="https://cdn.jsdelivr.net/gh/jason-best/lightning-flow-iframe@v1.2.0/embed/three-levers-flow-embed.js" type="text/javascript"></script>Hosted copy: https://threelevers.com/assets/embed/three-levers-flow-embed.v1.js
Implementation checklist
- Public Site URL loads without Salesforce login.
- Iframe renders flow using API Developer Name.
- Dynamic resize works (no clipped screens).
inputVarsand flow variable names match exactly.endUrlredirects when flow reachesFINISHED.- Guest user can complete all intended paths.