Pass variable created in a flow to a VisualForce Page

Question

I have a flow that is run when internal users click a button. This button will set a variable in the flow for: first name, last name, and decoded email (for url).

I created a VF page that is used to display the calendly widget based off the url. I want to pass the variables from the flow to URL section of the VF page div.

I have an aura component that displays this VF page in the flow for me.

<apex:page >
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/link-name/?sfid={!recordId}&first_name={!Get_Current_Oppo.Account.Contact__r.FirstName}&last_name={!Get_Current_Oppo.Account.Contact__r.LastName}&email={!decodedEmail}" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->
</apex:page>

Aura Component --

<aura:component implements="forceCommunity:availableForAllPageTypes,lightning:availableForFlowScreens" access="global">
<iframe src="https://domain--c.visualforce.com/apex/Calendly" width="100%" height="500px;" frameBorder="0"/>
</aura:component>

Is it possible to pass the flow Variables to the VF if the flow is initialized from the button rather than a VF page?

Answer 1

One of the ways is to add a design attribute to your Aura component and update that design attribute in the flow.

In the Aura component pass that variable to VisualForce page using the windows.postmessage. An alternative to using windows.postmessage is to use the Lightning Message Service. You can read about it at the following link. I think the LWC Recipes also has an example of communicating between Aura Component and VisualForce Page.

https://www.salesforceben.com/lightning-message-service-lms-vs-aura-visualforce/