We can’t display component 'flowruntime:phone', because it isn't supported in Classic runtime

I created a flow and added it to a visualforce page so i can use it on a force.com site to use as a web form. Some of my input fields are lightning components, so when i go to the site the fields that have the lightning components gives me the dredged "We can’t display component 'flowruntime:phone', because it isn't supported in Classic runtime. Ask your Salesforce admin to distribute this flow in Lightning runtime instead".

I created this aura component after viewing a few articles, but I only get a error and my visualforce page does not display anything.

Any help with this would be greatly appreciated.

Component:

<aura:component access="GLOBAL">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:flow aura:id="flowContainer" />
</aura:component>

Visualforce Page:

<apex:page showHeader="false" sidebar="false" lightningStylesheets="true" standardStylesheets="false" standardController="SP_Application__c" >
  
 <html>
      <head>
         <apex:includeLightning  />
         
        
      </head>
      <body class="slds-scope">
         <div class="slds-scope">                                                 
         <div id="flowContainer" />
         <script src="https://acme-dev-ed.lightning.force.com/lightning/lightning.out.js"></script>
<script>$Lightning.use("c:lightningcreatecomponent", function() {
   $Lightning.createComponent("lightning:flow", {},
      "flowContainer",
      function (component) {
         component.startFlow("Service_Provider_Application", inputVariables);
      })
   ;}
);
</script>
         </div>
      </body>
   </html>
</apex:page>