Render Lightning Flow Runtime 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. If you want your flow to render in Lightning runtime in your Visualforce page, embed the flow Aura component to your Visualforce page.

Create a Lightning app that declares a dependency on the lightning:flow component.
Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
In the Visualforce page, reference the dependency app.
Write a JavaScript function that creates the component on the page using $Lightning.createComponent().

Example

1<aura:application access="global" extends="ltng:outApp" >
2    <aura:dependency resource="lightning:flow"/>
3</aura:application>

1<apex:page >
2   <html>
3      <head>
4         <apex:includeLightning />
5      </head>
6      <body class="slds-scope">
7         <div id="flowContainer" />
8         <script>
9            var statusChange = function (event) {
10               if(event.getParam("status") === "FINISHED") {
11                  // Control what happens when the interview finishes
12 
13                  var outputVariables = event.getParam("outputVariables");
14                  var key;
15                  for(key in outputVariables) {
16                     if(outputVariables[key].name === "myOutput") {
17                        // Do something with an output variable
18                     }
19                  }
20               }
21            };
22            $Lightning.use("c:lightningOutApp", function() {
23               // Create the flow component and set the onstatuschange attribute
24               $Lightning.createComponent("lightning:flow", {"onstatuschange":statusChange},
25                  "flowContainer",
26                  function (component) {
27                     // Set the input variables
28                     var inputVariables = [
29                        {
30                           name : 'myInput',
31                           type : 'String',
32                           value : "Hello, world"
33                        }
34                     ];
35                     
36                     // Start an interview in the flowContainer div, and 
37                     // initializes the input variables.
38                     component.startFlow("myFlowName", inputVariables);
39                  }
40               );
41            });
42         </script>
43      </body>
44   </html>
45</apex:page>

Visualforce Developer Guide

Render Lightning Flow Runtime in a Visualforce Page

Example