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 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>
    );
  }
}

Answer 2

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%)

Answer 3

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 }}
    />
  );
};

Answer 4

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.

Answer 5

Combining @EricWallen's answer using React Hooks and Ori Dori's suggestion of cleanup in componentWillUnmount.

This is particularly useful if you need to navigate to different components and your calendar is only visible on the first render. Adding this snippet fixes this.

import React, { useEffect } from 'react';

const calendlyWidgetScript = 'calendlyWidgetScript';
const calendarDivId = 'calendarForm';

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

    return () => {
      if (document.getElementById(calendlyWidgetScript) && head) {
        const script = document.getElementById(calendlyWidgetScript);
        script?.remove();
        const calendar = document.getElementById(calendarDivId);
        calendar?.remove();
    }
    }

  }, []);

  return (
  <div id={calendarDivId}>

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

Answer 6

Working Vue 3 example for those looking for it:

<template>
    <div>
        <div class="calendly-inline-widget" data-url="YOUR_CALENDLY_URL_HERE" style="min-width: 320px; height: 630px"></div>
    </div>
</template>

<script setup lang="ts">
    onMounted(() => {
        const head = document.querySelector('head');
        const script = document.createElement('script');
        script.setAttribute('src', 'https://assets.calendly.com/assets/external/widget.js');
        head!.appendChild(script);
    });
</script>

<style scoped></style>

Answer 7

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;