Skip to content

JavaScript widget

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

  1. Install FlowIframeEmbed in Salesforce and expose FlowIframeEmbed on a Site.
  2. Define window.tlFlowEmbed on your external page.
  3. Load three-levers-flow-embed.js.
  4. The script builds query string (flow, endUrl, inputVars) and resizes iframe from frameHeight messages.

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.

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,
ease: true,
easeSpeed: 0.2,
lazy: true,
allowedOrigin: 'https://your-site.force.com'
};
</script>
<script src="https://cdn.jsdelivr.net/gh/jason-best/lightning-flow-iframe@latest/embed/three-levers-flow-embed.js" type="text/javascript"></script>

Or download from the v1.0.0 release.

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>
PropertyDescriptionRequiredDefault
embedUrlSite URL to three_levers__FlowIframeEmbed (no query string; path /apex/three_levers__FlowIframeEmbed)Yes
flowFlow API Developer NameYes
endUrlRedirect URL when flow finishesNo
inputVarsNames of query params to pass as flow String inputsNonone
paramsObject of values for flow inputs (keys must be in inputVars)No
containerCSS selector or element id for mount pointNo#tl-flow-embed
heightInitial iframe heightNo75px
heightPaddingExtra pixels added to reported heightNo20
easeSmooth height transitionsNofalse
easeSpeedTransition time in secondsNo0.2
lazyloading=\"lazy\" on iframeNofalse
allowedOriginRestrict postMessage to this originNoall origins

See also: Querystring variables · Finish URL

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
LegacyCurrent
ifc.iframeurlembedUrl
ifc.endurlendUrl
ifc.extraqsparams + inputVars
Auto parent query stringExplicit params only