Embed Calendly into React

You need to create a container DOM element that won't rerender, and you need to load the script after the DOM node exists.

This is a simple component (not tested) that renders the target div. In componentDidMount() it generates the script tag, and adds it to the head element of the page. You should clear the widget in componentWillUnmount(), so the component can remove itself when needed.

class Calendly extends React.Component {
  componentDidMount() {
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute('src',  'https://assets.calendly.com/assets/external/widget.js');
    head.appendChild(script);
  }

  componentWillUnmount() {
    // whatever you need to cleanup the widgets code
  }

  render(){
    return (
      <div>
        <div id="schedule_form">
          <div 
            className="calendly-inline-widget"
            data-url="https://calendly.com/username"
            style={{ minWidth: '320px', height: '580px' }} />
        </div>
      </div>
    );
  }
}

This is how you do it with React hooks:

import React, { useEffect } from 'react';

const Calendly = ({ minWidth, height, url }) => {
  useEffect(() => {
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute(
      'src',
      'https://assets.calendly.com/assets/external/widget.js'
    );
    head.appendChild(script);
  }, []);

  return (
    <div
      className="calendly-inline-widget"
      data-url={url}
      style={{ minWidth, height }}
    />
  );
};

Suggested, possibly simpler, alternative:

import React from 'react';

const Calendly = () => {
  return (
    <div style={{ height: "800px" }}>
      <iframe
        src="https://calendly.com/{USERNAME}/{OPTIONALEVENTNAME}"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
    </div>
  );
};

export default Calendly;

Adjust height as required (though I found 800px to be good). Ultimately, the script that they provide creates an iFrame anyway, might as well skip the entire step and load the iFrame directly. Plus you have better control over the styling (I found with other solutions that the embedded calendar would only be 150px height for some reason, even when the container was bigger and the iFrame is set to be 100%)

You can use this package react-calendly and just pass in the calendly url

import { InlineWidget } from 'react-calendly';

const App = () => {
return <InlineWidget url="yourcalendlyurl"/>
}

export default App

and you're good to go.

Stick the script file itself before the </body> tag in the index.html

import React, { Component} from "react";

class Calendly extends Component {
  ComponentDidMount( )

  render(){
    return (
      <div>
        <div id="schedule_form">
          <div class="calendly-inline-widget" data-url="https://calendly.com/username" style="min-width:320px;height:580px;"></div>
        </div>
      </div>
    );
  }
};

export default Calendly;