Pass URL Variable to Flow contained in VisualForce Page

Question

I am attempting to create a PUBLIC VF page that includes a Screen Flow.

The user will access via a url such as https://theurl.com.au/12314125235532235242 where 12314125235532235242 is a hash of the id. Within URL rewrite, it is transformed to https://theurl.com.au?id=0031231ewe2324 where 0031231ewe2324 is the contact id.

I need to pass either 12314125235532235242 or 0031231ewe2324 to the flow as I need that to record the information in the screen flow against the contact record.

Using Getting the URL parameter into Lightning component using the "{! paramName}" expression I was able to get it to function if I hard code the details.

.js file - this works

({
    init : function (component) {
        var flow = component.find("flowData");
//        flow.startFlow("CASE_Advice_Fee_Subsidy");

        var inputVariables = [
            {
                name    : 'varId',
                type    : 'String',
                value   : '30ddf5a99e460a8994f422e2faed93f5250e7994ddcb20587162d0ea9087bb97'
            }
        ];
        flow.startFlow("CASE_Advice_Fee_Subsidy", inputVariables);
    }
})

.js file - this doesn't work The only change is the attempt to get the url parameter 'id'

({
    init : function (component) {
        var flow = component.find("flowData");
//        flow.startFlow("CASE_Advice_Fee_Subsidy");

        var inputVariables = [
            {
                name    : 'varId',
                type    : 'String',
                value   : component.get("v.pageReference").state.id
            }
        ];
        flow.startFlow("CASE_Advice_Fee_Subsidy", inputVariables);
    }
})

.cmp

<aura:component 
                implements="flexipage:availableForAllPageTypes, lightning:availableForFlowActions, lightning:isUrlAddressable" 
                access="GLOBAL">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    {!v.pageReference.state.id}
    <lightning:flow aura:id="flowData" />
</aura:component>

.vfp

<script>
    $Lightning.use("c:embedFlowInExternalWebsiteApp",
        function() {
            $Lightning.createComponent(
                "c:embedFlowInExternalWebsite",
                { },                  
                "lightningLocator",   
                function(cmp) {}
            );
        },
        'https://domain.cs127.force.com'
    );
</script>

Answer 1

Lightning out forces your lightning component to load as an iframe and hence I think it is better if you can pass around the parameter from the Visualforce to the Lightning component via attributes.

I would try something like below,

<script>
 const queryString = window.location.search; 
 const urlParams = new URLSearchParams(QueryString); 
 const id = urlParams.get('id'); //URL param name
 $Lightning.use("c:embedFlowInExternalWebsiteApp",
    function() {
        $Lightning.createComponent(
            "c:embedFlowInExternalWebsite",
            { contactId : id},                  
            "lightningLocator",   
            function(cmp) {}
        );
    },
    'https://domain.cs127.force.com'
   );
</script>

Component Code

<aura:component 
                implements="flexipage:availableForAllPageTypes, lightning:availableForFlowActions, lightning:isUrlAddressable" 
                access="GLOBAL">
        <aura:attribute name="contactId" type="String" description="this attribute is for ContactId passed from visualforce page"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:flow aura:id="flowData" />
</aura:component>

The Js Code

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

Answer 2

Thanks to @Mohith, I have been able to progress.

The answer I found was not exactly as Mohith has mentioned. For some reason the script on the VF page was not playing ball so I then commented that out and tried a few different ways until I was able to find a solution.

As I was using a controller, I have had the controller get the ID that I was after. I am then passing that to the JS constant in vf page.

const id            = '{!frm_id}'; //URL param name

VF Page:

                            <script src="https://domain.cs127.force.com/lightning/lightning.out.js" />

                        <div id="lightningLocator" style="min-height: 200px"></div>
                        
                        <script>
                            //const queryString     = window.location.search; 
                            //const urlParams   = new URLSearchParams(QueryString); 
                            //const id          = urlParams.get('id'); //URL param name
                            const id            = '{!frm_id}'; //URL param name
                            $Lightning.use("c:embedFlowInExternalWebsiteApp",
                                           function() 
                                           {
                                               $Lightning.createComponent
                                               (
                                                   "c:embedFlowInExternalWebsite",
                                                   {  
                                                       contactId : id
                                                   },                  
                                                   "lightningLocator",   
                                                   function(cmp) 
                                                   { }
                                               );
                                           },
                                           'https://domain.cs127.force.com'
                                          );
                        </script>

.cmp

<aura:component 
                implements="flexipage:availableForAllPageTypes, lightning:availableForFlowActions, lightning:isUrlAddressable" 
                access="GLOBAL">
    <aura:attribute name="contactId" type="String" description="this attribute is for ContactId passed from visualforce page"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:flow aura:id="flowData" />
</aura:component>

.js

({
    init : function (component) {
        var flow = component.find("flowData");
//        flow.startFlow("CASE_Advice_Fee_Subsidy");

        var inputVariables = [
            {
                name    : 'varId',
                type    : 'String',
                value   : component.get('v.contactId')
                //value : '30ddf5a99e460a8994f422e2faed93f5250e7994ddcb20587162d0ea9087bb97'
            }
        ];
        flow.startFlow("CASE_Advice_Fee_Subsidy", inputVariables);
    }
})

Answer 3

I found this was possible without using aura component or controller, by setting the variables using {!$CurrentPage.parameters.YOURPARAMETERNAME}

as per https://developer.salesforce.com/forums/?id=906F000000096gCIAQ

     <script>
        var statusChange = function (event) {
           if(event.getParam("status") === "FINISHED") {
              // Control what happens when the interview finishes

              var outputVariables = event.getParam("outputVariables");
              var key;
              for(key in outputVariables) {
                if(outputVariables[key].name === "myOutput") {
                    // Do something with an output variable
                 }
              }
           }
        };
        $Lightning.use("c:lightningOutApp", function() {
           // Create the flow component and set the onstatuschange attribute
           $Lightning.createComponent("lightning:flow", {"onstatuschange":statusChange},
              "flowContainer",
              function (component) {
                 // Set the input variables
                 var inputVariables = [
                    { name : 'ID', type : 'String', value : '{!$CurrentPage.parameters.ID}'},
                    { name : 'Email', type : 'String', value : '{!$CurrentPage.parameters.Email}'},
                    { name : 'Name', type : 'String', value : '{!$CurrentPage.parameters.Name}'}
                 ];
                 
                 // Start an interview in the flowContainer div, and 
                 // initializes the input variables.
                 component.startFlow("FLOWNAME",inputVariables);
              }
           );
        });
     </script>
  </body>