JavaScript widget

For external sites, use the Three Levers Flow Embed script with FlowIframeEmbed.

Overview

Install FlowIframeEmbed in Salesforce and expose FlowIframeEmbed on a Site.
Define window.tlFlowEmbed on your external page.
Load three-levers-flow-embed.js.
The script builds the query string (flow, endUrl, inputVars, and any styling keys), resizes the iframe from frameHeight, and scrolls the parent page to the top of the flow when Next or Finish is clicked.

Note - Site URL path: Use https://your-site.force.com/site-prefix/apex/three_levers__FlowIframeEmbed (namespaced managed-package page), not /FlowIframeEmbed. See Salesforce setup.

Configure `window.tlFlowEmbed`

Define config before loading the script:

<div id="tl-flow-embed"></div>

<script>
  window.tlFlowEmbed = {
    embedUrl: 'https://your-site.force.com/site-prefix/apex/three_levers__FlowIframeEmbed',
    flow: 'Check_In_Dispatch',
    endUrl: 'https://yoursite.com/thanks',
    inputVars: ['recordId', 'source'],
    params: { recordId: '001xxx', source: 'homepage' },
    height: '75px',
    heightPadding: 20,
    bg: 'F5F3F0',
    padding: '0',
    primary: 'C75B39',
    primaryHover: 'A84A2E',
    secondary: '1B2A4A',
    scrollOffset: 81,
    ease: true,
    easeSpeed: 0.2,
    lazy: true,
    allowedOrigin: 'https://your-site.force.com'
  };
</script>

Load the script

<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>

Or download that same file from the v1.2.0 release. v1.2.0 is the widget that scrolls the page to the top of the flow on Next or Finish.

Source: github.com/jason-best/lightning-flow-iframe

Three Levers hosted copy:

<script src="https://threelevers.com/assets/embed/three-levers-flow-embed.v1.js" type="text/javascript"></script>

Options

Property	Description	Required	Default
`embedUrl`	Site URL to `three_levers__FlowIframeEmbed` (no query string; path `/apex/three_levers__FlowIframeEmbed`)	Yes	—
`flow`	Flow API Developer Name	Yes	—
`endUrl`	Redirect URL when flow finishes	No	—
`inputVars`	Names of query params to pass as flow String inputs	No	none
`params`	Object of values for flow inputs (keys must be in `inputVars`)	No	—
`container`	CSS selector or element id for mount point	No	`#tl-flow-embed`
`height`	Initial iframe height	No	`75px`
`heightPadding`	Extra pixels added to reported height	No	`20`
`bg`	Color of the iframe page body. Hex with or without `#`, a color name, or `transparent`	No	page default
`padding`	Space around the flow on the iframe page body. `0`, `16`, `1rem`, or `1rem 2rem`. A bare number is pixels	No	page default
`primary`	Color of Next, Finish, and other primary buttons. Hex with or without `#`, or a color name	No	rust `#C75B39`
`primaryHover`	Hover color of those buttons. When blank, a darker mix of `primary` is used	No	`#A84A2E` when primary is blank
`secondary`	Text and border color of Previous and other secondary buttons	No	dark text and gray border
`scrollOffset`	Pixels to keep clear below a fixed header when Next or Finish scrolls the page. Stays on the parent page and is not sent to the iframe	No	`0`
`ease`	Smooth height transitions	No	`false`
`easeSpeed`	Transition time in seconds	No	`0.2`
`lazy`	`loading=\"lazy\"` on iframe	No	`false`
`allowedOrigin`	Restrict postMessage to this origin	No	all origins

See also: Querystring variables · Finish URL

Legacy `ifc` widget

Older docs used ifc and lighningiFrame.js. That script forwarded full parent query strings and used endurl (lowercase).

Current FlowIframeEmbed requires:

flow (API name)
endUrl (camelCase)
explicit inputVars allowlist

Legacy	Current
`ifc.iframeurl`	`embedUrl`
`ifc.endurl`	`endUrl`
`ifc.extraqs`	`params` + `inputVars`
Auto parent query string	Explicit `params` only