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 Lightning component to your Visualforce page..

To add the flow Lightning component to a Visualforce page:

Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
Create and reference a Lightning app that declares your a dependency on the lightning:flow component.
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                  var outputVariables = event.getParam("outputVariables");
12                  var outputVar;
13                  for(outputVar in outputVariables) {
14                     if(outputVar.name === "redirect") {
15                        // Do something
16                     }
17                  }
18               }
19            };
20            $Lightning.use("c:lightningOutApp", function() {
21               $Lightning.createComponent("lightning:flow", {},
22                  "flowContainer",
23                  function (component) {
24                     // Sets a value for the textVar input variable.
25                     var inputVariables = [
26                        {
27                           name : 'textVar',
28                           type : 'String',
29                           value : "my string value"
30                        }
31                     ];
32                     // Starts an interview in the flowContainer div, and 
33                     // initializes the textVar variable.
34                     component.startFlow("Survey_customers", inputVariables);
35                  }
36               );
37            });
38         </script>
39      </body>
40   </html>
41</apex:page>

Visualforce Developer Guide

Render Lightning Flow Runtime in a Visualforce Page

Example