Render Lightning Runtime for Flows in a Visualforce Page

By default, when you embed a flow in a Visualforce page, the flow renders in Classic runtime. Like its name suggests, Classic runtime looks and feels like regular Visualforce pages and the Salesforce Classic desktop experience. To render a flow in Lightning runtime, add the lightning:flow Aura component to your Visualforce page.

Lightning Components for Visualforce is based on Lightning Out (Beta), a powerful and flexible feature you can use to embed Aura and Lightning web components into almost any web page. When used with Visualforce, some of the details become simpler. For example, you don’t need to deal with authentication, and you don’t need to configure a Connected App.

In other ways, using Lightning Components for Visualforce is identical to using Lightning Out. See Use Components Outside Salesforce with Lightning Out (Beta) in the Lightning Web Components Developer Guide.

  1. Create a Lightning Out app that declares a dependency on the lightning:flow component. This app is globally accessible and extends ltng:outApp.

    Your Lightning Out app must exist in the same org as the Visualforce page.

  2. To add the Lightning Components for Visualforce JavaScript library to your Visualforce page, use the <apex:includeLightning/> component.

  3. In the Visualforce page, reference the dependency app by using the syntax $Lightning.use("theNamespace:theAppName”, function() {});

  4. Write a JavaScript function that creates the component on the page by using the syntax $Lightning.createComponent(String type, Object attributes, String domLocator, function callback).

Here’s an example of a Lightning app named lightningOutApp.

To render a pre-existing flow called myFlowName in Lightning runtime, add lightningOutApp to the Visualforce page. The $Lightning.createComponent() function creates the component and inserts it into a div element called flowContainer. The component passes in initial values for the flow and handles a change in the flow interview status using the onstatuschange event handler.

See Also