function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Spencer BerkSpencer Berk 

Is it possible to embed this Calendly widget into a custom screen component?

Calendly provides code to Inline Embed their Calendly Widget directly into a website. I would like to Embed the Widget into a custom screen component I can then add to my Flow. I am not a dev so I don't know if this is even possible?

Calendly provided Inline Embed code: 
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/testfinancialplanning/my-financial-coach-consultation-meeting" 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 -->

Any help/suggestions or resources on how to do this would be appreciated.
Thanks,
Spencer
 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Spencer,

I was not able to get any way to use the above code in lightning component directly so that it can be used in a flow but I was able to use it in a visualforce page that you can use it in lightning component that I was able to use in a flow.

I hope this helps and in case if this comes handy can you please choose this as best answer so that it can be useful for others in the future.

Below is the result I got:

User-added image

Regards,
Anutej
Spencer BerkSpencer Berk
Hi Anutej,

I appreciate the testing you did and the solution you found! This is what I've done so far but am receiving a "content is blocked" error when I get to that screen in my flow. Note: This flow is on a public community page. Any suggestions on what is making the VF page not work in my flow?

Thank you for your continued help!

I've created a VF page: 
<apex:page >
    <!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/testfinancialplanning/my-financial-coach-consultation-meeting" 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>

I've also created a Lightning Component: 
<aura:component implements="forceCommunity:availableForAllPageTypes,lightning:availableForFlowScreens" access="global">
    <iframe src="https://myfinancialcoach--community--c.visualforce.com/apex/CalendlyTEST" width="100%" height="500px;" frameBorder="0"/>
</aura:component>

​​​​​​​Error in my Screen Flow:
User-added image
Spencer BerkSpencer Berk
It works when I Debug test but not when I place the flow on my Community page.
Brandon CarterBrandon Carter
Hey, were you able to get this to work? I would like to do something similar (embed calendar in VF/flow page that a bot can call/present to a customer in chat).
Brandon CarterBrandon Carter
This occurs because of a couple of things, but likely security settings.  The code references a site outside of your community, so check the security tab within experience builder and you should see some errors.  Also check to see whether you've given the Guest Site User the ability to view the visual force page.
Martin McCauley 5Martin McCauley 5
Has anyone made any progress on this?

I've got the same issue as Spencer.
  • successfully created VF Page and component
  • Updated security for the VP page and for the site (Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts and added https://calendly.com/ as trusted site)
But I'm still getting the same error screen:

User-added image

Anyone have any ideas at all?
Tyler Campbell 25Tyler Campbell 25

@Martin - I created a Calendly Flow Embed package and tutorial video here:

https://www.youtube.com/watch?v=Scq6d1_JeQw

 

The code in the package does not load an external script, so it should resolve the error above.