Projects / Lightning Flow iFrame
Community tooling wordpress.org

Embed Lightning Screen Flows
on any website.

Use a Salesforce Site + FlowIframeEmbed to run Lightning Runtime flows in an iframe, pass explicit URL inputs, and redirect on completion.

View documentation WordPress plugin JavaScript widget Live demo

Live demo

Try the JavaScript widget

This embed loads Expanding_Flow from our public Salesforce Site demo org via three-levers-flow-embed.js. The iframe resizes automatically as you move through screens. Pass inputDivCount on the URL—for example ?inputDivCount=7.

Completing the flow redirects to iframe-finish-demo.

What you get

  • Flows run in Lightning Runtime.
  • Auto height via frameHeight postMessage.
  • Flow inputs from URL params using inputVars allowlist.
  • Finish redirect with endUrl.

Core pieces

  • FlowIframeEmbed package in Salesforce
  • FlowIframeEmbed Visualforce page (three_levers__FlowIframeEmbed) on a public Site at site-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

  1. Install FlowIframeEmbed in Salesforce.
  2. Create and activate your Screen Flow; note the API Developer Name.
  3. Add FlowIframeEmbed to a Salesforce Site and configure guest access.
  4. Allow your parent domain in clickjack/CSP settings.
  5. 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 frameHeight postMessage
  • Embed mode: flow, endUrl, optional inputVars
  • Legacy mode preserved when Default Flow Name is blank
WordPress.org GitHub Setup guide

JavaScript widget (non-WordPress)

Define window.tlFlowEmbed before loading the script. The widget builds flow, endUrl, and inputVars query strings automatically.

tlFlowEmbed
window.tlFlowEmbed = {
  embedUrl: 'https://threelevers.my.salesforce-sites.com/demo/apex/three_levers__FlowIframeEmbed',
  flow: 'Expanding_Flow',
  endUrl: 'https://threelevers.com/iframe-finish-demo',
  inputVars: ['inputDivCount'],
  params: { inputDivCount: '3' },
  height: '75px',
  heightPadding: 20,
  ease: true,
  easeSpeed: 0.2,
  allowedOrigin: 'https://threelevers.my.salesforce-sites.com'
};
script include
<script src="https://cdn.jsdelivr.net/gh/jason-best/lightning-flow-iframe@latest/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).
  • inputVars and flow variable names match exactly.
  • endUrl redirects when flow reaches FINISHED.
  • Guest user can complete all intended paths.
Read support docs Try live demo