1

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'.

`

2
  • do the user's profile have access to the VF page? Jul 10, 2021 at 13:42
  • Yes, and I can actually log in to the user's account and the app loads just fine for me (on my computer). Thinking there may be another issue outside of SF? Jul 12, 2021 at 13:10

1 Answer 1

0

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>
                                    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.