Integrating Calendly popup link in React with Material-UI components

Other Questions Calendly
1

I need help setting up a Calendly popup widget inside my React application using Material-UI.

The official Calendly docs show this HTML setup:

<!-- Calendly widget setup -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/myaccount'});return false;">Book Meeting</a>
<!-- End widget setup -->

Here’s what I attempted in my React component:

<Typography className={styles.container}>
    <Link href="#" onClick={Calendly.initPopupWidget({url:'https://calendly.com/myaccount'})}>
       Book Meeting
    </Link>
</Typography>

I’ve already included the required CSS and JavaScript files in my public/index.html file as instructed.

The popup doesn’t trigger when I click the link. What’s the correct way to handle the onClick event in React for this Calendly integration?

2

your onClick is firing right away. you need to wrap it in an arrow func: onClick={() => Calendly.initPopupWidget({url:'https://calendly.com/myaccount'})}. that should fix it!

3

Besides the arrow function fix others mentioned, make sure you’re handling script loading properly. I had the same issue - the Calendly object wasn’t ready when my component mounted. Add a check like if (window.Calendly) before calling the widget function, or use useEffect to wait for the external script to load. Also double-check your Calendly URL is correct and public. I wasted hours debugging this once, only to find my calendar wasn’t set to public. The Material-UI Link component works fine once you get the timing right.

4

Yeah Charlie’s spot on about the function issue. Calendly’s widget setup in React is a nightmare - you’re constantly fighting external scripts, component mounting, and cleanup issues.

I’ve hit this wall so many times at work. Skip the Calendly widgets entirely and automate everything with Latenode instead.

Connect your calendar, set booking logic, send confirmations, and integrate with your React app through clean APIs. No more debugging external scripts or janky popup widgets.

Best part? Full UI control. Build your booking form with Material-UI however you want, let Latenode handle the calendar stuff behind the scenes.

Way cleaner than wrestling third-party widgets into React: https://latenode.com