How to embed Calendly Anchor Tag With React and Material-UI

I'm trying to embed the anchor tag of Calendly using Reacrjs and Material-UI.

The Calendly instruction is:

<!-- Calendly link widget begin -->
<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/bbb'});return false;"> Schedule Here</a>
<!-- Calendly link widget end -->

I tried doing this:

<Typography className={classes.root}>
    <Link href="#" onClick={Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
       Schedule Here
    </Link>
</Typography>

And added the script and link tags mentioned on the instructions on the index.html in the public folder of the react app

Thank you.

Solution

It looks like you are calling Calendly.initPopupWidget({url:'https://calendly.com/bbb'}) instead of passing the function to the onClick handler. This will cause the popup to appear when the link is rendered instead of when the link is clicked.

You can change the onClick function to the following to prevent this issue:

<Link href="#" onClick={() => window.Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
       Schedule Here
</Link>

This will wrap the call to initPopupWidget in an anonymous function so that the Calendly function only fires when the Link is clicked.