Embed Calendly into React

Question

Calendly provides this embed code that gets added to the page and displays calendar options to choose from.

<div class="calendly-inline-widget" data-url="https://calendly.com/username" style="min-width:320px;height:580px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

I can't figure out the way to embed this code into the component. What's the best way to do so here?

import React, { Component} from "react";

class Calendly extends Component {
  ComponentDidMount( )

  render(){
    return (
      <div>
        <div id="schedule_form">

        </div>
      </div>
    );
  }
};

export default Calendly;

Answer 1

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.