Projects / Lightning Flow iFrame
Active in Production · wordpress.org ↗

Lightning Flow
iFrame Plugin

Dynamic iFrame embedding for Salesforce Lightning Flows on external websites with automatic height adjustment and querystring variable passing.

Why this is here. The plugin exists because a client needed Flow on WordPress without the usual iFrame hacks. Hiding the fix behind a private repo wouldn't have matched how I work. Open release is part of the same "creative, cost-conscious" promise: solve the real problem, then let the community benefit.

Background

While developing a new job request process for a client, the goal was to allow external users to input job details through a Salesforce Lightning Flow embedded on the client's WordPress site. I built the flow, exposed it via VisualForce on a public Salesforce Site, and iFramed it on the WordPress page.

Then two problems appeared:

  • ✗ The multi-page flow changed height based on user input, but the iFrame had a fixed static height, cutting off content.
  • ✗ Input variables needed to be passed from the parent page into the Flow; no clean mechanism existed for this.

I built this plugin to solve both problems cleanly, on top of the excellent cross-domain iframe resizer by David J. Bradshaw.

Key Features

  • Dynamic iFrame height adjustment
  • Pass querystrings to iFrame
  • Manual querystring values
  • Finish URL on completion
  • Eased height transitions
  • Lazy loading support

Get It

WordPress Plugin Directory

Non-WordPress implementation documented below under JavaScript Widget.

WordPress Implementation

Shortcode Format

shortcode
[Lightning-Flow-iFrame iframeurl="https://..." endurl="https://..." height="50px" extraqs="key=value" ease="true||false" easespeed=".2" lazy="true"]
Attribute Description Required Default
iframeurl URL of the public VisualForce page rendering the Flow Yes demo URL
endurl URL to redirect to on Flow completion No none
height Initial iFrame height before fully loaded (e.g. "75px") No "50px"
extraqs Additional querystrings to pass, key/value pairs, e.g. "foo=bar&this=that" No none
ease Whether to ease the height adjustment animation No "false"
easespeed Ease speed in seconds (e.g. ".5" or "2") No ".2"
lazy Apply loading="lazy" to the iFrame element No "true"
JavaScript widget (non-WordPress)

Pure JavaScript Implementation

For any site that isn't WordPress, use the pure JavaScript widget. The same variable options apply. An example implementation is available on JSFiddle ↗.

Live demo

The demo Flow runs below using the JavaScript widget with dynamic height. Try completing the flow or test with different querystring parameters in the page URL.

This is content above the iframe
This is content below the iframe

Test passing parameters via querystring:

https://threelevers.com/projects/lightning-flow-iframe?count=7 ↗

Variable Options

ifc object 
var ifc = {
  iframeurl: 'https://...',
  endurl: 'https://...',
  height: '50px',
  extraqs: 'key=value',
  ease: 'true',
  easespeed: '.2',
  lazy: 'true'
};
Attribute Description Required Default
iframeurl URL of the public VisualForce page rendering the Flow Yes demo URL
endurl URL to redirect to on Flow completion No none
height Initial iFrame height before fully loaded (e.g. "75px") No "50px"
extraqs Additional querystrings to pass, key/value pairs, e.g. "foo=bar&this=that" No none
ease Whether to ease the height adjustment animation No "false"
easespeed Ease speed in seconds (e.g. ".5" or "2") No ".2"
lazy Apply loading="lazy" to the iFrame element No "true"
Setup Instructions

Implementation Steps

1

Install the Plugin (WordPress) or include the JS (other sites)

For WordPress, install via the plugin directory. For other sites, include the JavaScript widget code block on your page.

Get on WordPress.org ↗
2

Prepare the Lightning Flow on a VisualForce Page

Follow the Salesforce documentation to render the Flow on a VisualForce page. Then add the communication script before the closing </head> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>

Modify the FINISHED behavior to redirect to the end URL set in the shortcode:

visualforce.js 
if (event.getParam("status") === "FINISHED") {
    var url = "{!$CurrentPage.parameters.endUrl}";
    if (url.length > 1) {
        window.parent.location.href = url;
    }
}
2b

Optional: Pass Input Variables to the Flow

If you need to populate Flow input variables from querystring parameters:

inputVariables 
var inputVariables = [{
    name: 'inputName1',       // Flow input variable name
    type: 'String',
    value: '{!$CurrentPage.parameters.qsname}' // querystring param
}];

Just above component.startFlow(), add the height communication loop:

let height;
var checkExist = setInterval(function() {
    height = document.body.scrollHeight;
    window.parent.postMessage({ frameHeight: height }, '*');
}, 500);

component.startFlow("myFlowName", inputVariables);
3

Make the VisualForce Page Public

Create a Salesforce Site with the proper configuration. Refer to Salesforce documentation:

↗ Setting Up Salesforce Sites ↗ Enable Clickjack Protection in Site.com
4

Add the Shortcode or Code Block to Your Page

For WordPress, add the shortcode to any page or post. For other sites, add the JavaScript code block to your HTML. Reference the attribute options above to configure your implementation.

WordPress Plugin Support

Support for the WordPress plugin is available through the WordPress.org support forum.

WordPress Support Forum ↗

JavaScript Implementation Support

Need help with the pure JavaScript implementation? Get in touch and I'll respond when I'm able.

Contact Us