iframe on aura component not displaying for users other than me

Question

I have a flow that is invoked by a button on the opportunity. It's an on screen flow that will display a dropdown with two options. One of those options, if chosen, will display an iframe (calendly) in an aura component that calls a visualforce page.

I have no issues access this and viewing the widget in an iframe, however other users cannot see it. It displays the sad face png.I've been searching on this for a few hours and have tried a few different things, and no luck. I will add code here.

.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="firstName" type="String" access="global"/>
    <aura:attribute name="lastName" type="String" access="global"/>
    <aura:attribute name="decodedEmail" type="String" access="global"/>
    <aura:attribute name="recordId" type="String" access="global"/>
    <aura:attribute name="cDomain" type="String" default="https://nameddomain--c.visualforce.com"/>
    <iframe src="{!v.cDomain + '/apex/Calendly?recordId=' + v.recordId + '%3DfirstName=' + v.firstName + '%3DlastName=' + v.lastName + '%3Demail=' + v.decodedEmail}" width="100%" height="500px;" frameBorder="0"/>
</aura:component>

.design

<design:component>
    <design:attribute name="firstName" label="First Name"/>
    <design:attribute name="lastName" label="Last Name"/>
    <design:attribute name="decodedEmail" label="Email"/>
    <design:attribute name="recordId" label="Record Id"/>
</design:component>

Visualforce page

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" style="min-width:320px;height:550px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->


<script>
        const calendlyHandle = "https://calendly.com/onboarding/?sfid={!$CurrentPage.parameters.recordId}&first_name={!$CurrentPage.parameters.firstName}&last_name={!$CurrentPage.parameters.lastName}&email={!$CurrentPage.parameters.email}";
        const calendlyContainer = document.getElementByClassName("calendly-invite-widget");
        calendlyContainer.setAttribute("data-url", calendlyHandle );
</script>
</apex:page>
                   

I am seeing the error on the user's side `

Refused to display 'https://nameddomain.my.salesforce.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

`

Answer 1

I have solved my own question. For future anyone who's wanting to post their Calendly Widget in an iframe on a Visualforce page, this might help.

Aura .cmp the url can be found if. you go to the VF page and click the preview button at the top.

    <aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="fullName" type="String" access="global"/>
    <aura:attribute name="decodedEmail" type="String" access="global"/>
    <aura:attribute name="recordId" type="String" access="global"/>
    <aura:attribute name="cDomain" type="String" default="https://doimain.instance.visual.force.com/" access="global"/>
    <iframe src="{!v.cDomain + '/apex/Calendly?recordId=' + v.recordId + '%26full_Name=' + v.fullName + '%26email=' + v.decodedEmail}" width="100%" height="500px;" frameBorder="0"/>
</aura:component>

.design

<design:component>
    <design:attribute name="fullName" label="Full Name"/>
    <design:attribute name="decodedEmail" label="Email"/>
    <design:attribute name="recordId" label="Record Id"/>
</design:component>

VF Page

<apex:page >

<div id="cWidg" class="calendly-inline-widget" style="min-width:320px;height:550px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>


<script>
        const calendlyHandle = "https://calendly.com/instance/?sfid={!$CurrentPage.parameters.recordId}";
        console.log(calendlyHandle);
        const calendlyContainer = document.getElementById("cWidg");
        console.log(calendlyContainer);
        calendlyContainer.setAttribute("data-url", calendlyHandle );
        console.log(calendlyContainer);
</script>
</apex:page>