Passing input variables to Salesforce Scheduler Inbound Guest User flow hosted in a website

Question

I've implemented and modified Salesforce Inbound Guest User Flow to accomplish the business requirements following this guide: https://goravseth.com/using-flows-as-a-form-tool-for-external-users

Essentially, so far I've created:

• A connected App;
• All the configs to allow guest users to make an appointment;
• A Visualforce page that will host the flow;
• An Aura:application that extends lightningOut (you can refer to the link above);
• The script to embed the VFPage/Flow into the website;

Everything would work perfectly fine, however, one of the requirements is such that: during the appointment process the website will provide to this "iframe" the email - like an input variable, and inside the flow, we will handle the logic to evaluate if this email is a Lead, an Account.

So what I am struggling with is how to pass the email from the website to the flow. I've done some investigation around that and tried to implement the suggestion explained in this post Pass URL Variable to Flow contained in VisualForce Page , but still, it didn't work. Any suggestion (with a simple example) on how can I pass the input variables from the website to the SF Scheduler Guest User Flow?

Silly script that I used as Iframe on the website [Only for test purpose]:

btn.addEventListener('click', event => {
    var emailResult = document.getElementById("emailInput").value;
    $Lightning.use("c:GuestAccessVFPage", function() { // Callback once framework and app load
            $Lightning.createComponent(
                "lightning:flow", // top-level component of your app
                {EmailInput : emailResult }, // attributes to set on the component when created
                "lexcontainer", // the DOM location to insert the component
                function(component) { // API name of the Flow
                    component.startFlow("MyInboundGuestUserFlow", inputVariables);
                }
            );
        }, 
        'https://MyOrg.force.com/abc' // Site endpoint
    );
});

Aura app

<aura:application access="global" extends="ltng:outApp" implements="ltng:allowGuestAccess" >
    <aura:attribute name="EmailInput" type="String" description="this attribute is for Email passed from visualforce page"/>  
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:flow aura:id="flowData" />
    <aura:dependency resource="lightning:flow"/>
</aura:application>

VF Page

<script>
    $Lightning.use("c:GuestAccessVFPage", function() {
        // Create the flow component 
        $Lightning.createComponent("lightning:flow", {},
            "flowContainer",
            function (component) {
                // Start an interview in the flowContainer div, and 
                //component.startFlow("MyInboundGuestUserFlow");
            }
        );
    });
</script>

.js

({
    init : function (component) {
        var flow = component.find("flowData");
        var inputVariables = [
            {
                name    : 'EmailInput',
                type    : 'String',
                value   : component.get("v.EmailInput")
            }
        ];
        flow.startFlow("MyInboundGuestUserFlow", inputVariables);
    }
})

Flow results

I really appreciate any help you can provide.